stateの種類#

Next.jsでは、主に以下の2種類のstateが利用できます。

• ローカルstate: 特定のコンポーネント内でのみ保持されるstateです。他のコンポーネントからは直接アクセスできません。
• グローバルstate: アプリケーション全体で共有されるstateです。どのコンポーネントからもアクセスして更新することができます。

stateの管理方法#

stateは、主に以下の2つの方法で管理することができます。

• useStateフック: 関数コンポーネント内でstateを定義・管理するためのフックです。最も一般的なstate管理方法です。
• useReducerフック: 複雑なstate管理や副作用処理に適したフックです。useStateフックよりも高度な機能を提供します。

useStateフックの使い方#

useStateフックは、以下の手順で利用することができます。

1. useStateフックを呼び出し、初期state値を指定します。
2. 返される配列の最初の要素は、現在のstate値です。
3. 2番目の要素は、stateを更新するための関数です。

1
const [count, setCount] = useState(0);
2

3
// ...
4

5
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
6
<p>カウント: {count}</p>

useReducerフックの使い方#

useReducerフックは、以下の手順で利用することができます。

1. useReducerフックを呼び出し、reducer関数と初期state値を指定します。
2. 返される配列の最初の要素は、現在のstate値です。
3. 2番目の要素は、stateを更新するためのdispatch関数です。

1
const reducer = (state, action) => {
2
  switch (action.type) {
3
    case 'increment':
4
      return { count: state.count + 1 };
5
    case 'decrement':
6
      return { count: state.count - 1 };
7
    default:
8
      return state;
9
  }
10
};
11

12
const [state, dispatch] = useReducer(reducer, { count: 0 });
13

14
// ...
15

16
<button onClick={() => dispatch({  })}>カウントアップ</button>
17
<button onClick={() => dispatch({  })}>カウントダウン</button>
18
<p>カウント: {state.count}</p>

その他#

• Next.jsでは、getStaticPropsやgetServerSidePropsなどの特別な関数を使用して、コンポーネントの初回レンダリング時にstateを初期化することができます。
• stateは、コンポーネントの再レンダリングをトリガーする重要な役割を果たします。stateが変更されると、コンポーネントは再レンダリングされ、最新の状態を反映します。