Next.jsでReact Contextを使用する
- コンテキストの使用
- 最後に

Reactアプリケーションで状態を管理するには、常にReduxが必要なわけではありません。

Reduxは、アプリケーションが複雑になり、状態管理が複雑になる場合に使用することが推奨される状態管理ライブラリの一つです。

Next.jsを使用してアプリケーション全体で状態を管理する場合、Reactライブラリの一部である「ReactContext」を使用することが最も簡単な方法です。

ただし、グローバル状態オブジェクトを使用することがすべての種類のプロジェクトで便利であるとは限りません。

アプリケーションの規模や性質に合わせて最適な状態管理方法を選択することが重要です。

React Contextについては、当ブログで詳しく解説しておりますので下記を参照下さい。

dev-k.hatenablog.com

Next.jsでReact Contextを使用する

まずは、「src」フォルダの中に「context」フォルダを作成し、その中に「state.js」ファイルを作成します。

このファイルには、コンテキストを定義し、ラッパーを提供するコードが含まれます。

src/context
     ├ state.js

次に、必要なReactフックをインポートします。

// src/context/state.js

// 必要なフックをインポートする
import { createContext, useContext } from 'react';

次に、「createContext」を使用してコンテキストオブジェクトを作成します。

// src/context/state.js

// コンテキストオブジェクトを作成する
const MyContext = createContext();

MyProviderコンポーネントを作成し、作成したコンテキストオブジェクトをラップします。ここで、共有される状態を宣言しています。

// src/context/state.js

export function MyProvider({ children }) {
  const sharedState = {
    number: 123,
    text: 'test'
  };

  return (
    <MyContext.Provider value={sharedState}>
      {children}
    </MyContext.Provider>
  );
}

最後に、カスタムフック「useMyContext」を作成して、状態データにアクセスできるようにします

// src/context/state.js

// コンテキストオブジェクトにアクセスするためのカスタムフックを作成する
export function useMyContext() {
  return useContext(MyContext);
}

これで、コンテキストオブジェクトを使用するための基本的な準備が整いました。

コンテキストの使用

子コンポーネントからコンテキストオブジェクトにアクセスするには、「useContext(MyContext)」を使用します。

下の例では、コンテキストオブジェクト内のデータを準備しています。

// src/context/state.js

// 必要なフックをインポートする
import { createContext, useContext } from 'react';

// コンテキストオブジェクトを作成する
const MyContext = createContext();

// コンテキストをラップするMyProviderコンポーネントを作成する
export function MyProvider({ children }) {
  const sharedState = {
    number: 123,
    text: 'test'
  };

  return (
    <MyContext.Provider value={sharedState}>
      {children}
    </MyContext.Provider>
  );
}

// コンテキストオブジェクトにアクセスするためのカスタムフックを作成する
export function useMyContext() {
  return useContext(MyContext);
}

上記のコードを使用して、アプリ内の任意の場所で共有される状態にアクセスできます。

任意のファイルまたは既存の「index.js」ファイルでインポートして、コンソールで確認してみてください。

// pages/index.js

import { useMyContext } from './src/context/state';

console.log(useMyContext());

実際は、以下のように変数として格納しておく事を推奨します。

import { useMyContext } from './path/to/context';

function MyComponent() {
  const sharedState = useMyContext();

  // 共有される状態にアクセスするためにsharedStateを使用する
  // ...
}

これで、Next.jsアプリケーションのすべてのコンポーネントとページで「useMyContext」のカスタムフックで作成した、コンテキストで共有されている状態にアクセスが可能となりました。

特定のコンポーネント間でページを共有できる場合は、ページ間で不要な再レンダリングを行う必要はありません。