Next.js でUseContextで共通データとして扱う方法

Nextjsで実装していたときに、

各種共通データを扱うときに、

ベースとなるNextjsの仕組み自体で、

うまくやれる方法があるのかもしれませんが、

自分で調べている範囲だと、

どのような方法があるかなど、

プラクティスが見つからなかったので、

ReactのUseContextを使って、

共通的なデータを扱うことにしました。

この記事では、

そのUseContextでの共通データを扱う方法を、

Nextjsで実際に設定を試してみたので、

その際に参考にさせてもらった記事などを含めて、

メモを残しておきます。

公式サイトの情報

公式サイト

まずは、公式サイトでUseContextのことを確認

Hooks API Reference

React Hooksの基礎部分のおすすめ

UseContextを使うのですが、

そもそも、React Hooks周りで、

良くわからないという方は、

こちらの方の動画がわかりやすいのでおすすめです。

参考にした記事

今回、実際に実装する上で、

参考にさせていただいた記事としては、

こちらの記事です。

記事内の動画がすごく参考になったので、

そちらも見てもらえると良いですね。

Make User State Globally Accessible in Next.js with React Context and Providers

実際に試したコード

実際に試したコードについても、

こちらの記事に残しておくので、

参考になれば幸いです。

UseContext用を別ファイルで準備

ファイルを作成

context/BaseContextProvider.js

コード

import { createContext, useContext } from 'react';

const commonInfo = {
  sample_value : 'sample test value'
}
const BaseContext = createContext(commonInfo);

const BaseContextProvider = ({ children }) => {
  return <BaseContext.Provider value={commonInfo}>
    {children}   
  </BaseContext.Provider>
}

export const useCommonInfo = () => useContext(BaseContext);
export default BaseContextProvider;

上記で、

UseContextを使って、

Providerでのvalue設定も含めて、

ラッピングして呼び出すようにしてます。

アプリの基本呼び出しに追加

アプリの基本呼び出しのファイルに、

上記のUseContextの設定ファイルを使うように変更します。

ファイル

_app.js

コード

import BaseContextProvider from '/context/BaseContextProvider'

function MyApp({ Component, pageProps }) {
  return <>
    <BaseContextProvider>
      <Component {...pageProps} />
    </BaseContextProvider>
  </>
}

export default MyApp

シンプルに、

作成したUseContextのためのコードを呼び出して、

そちらを使うように変更した感じです。

UseContextの値を使ってみる

実際にこのUseContextの値を使ってみます。

どこかのコンポーネントで、

import { useCommonInfo } from '/context/BaseContextProvider'

export default SampleComponent() {
   const common = useCommonInfo();
   console.log(common);
}

とすることで、

実際の値を取得することができます。

今回の例であれば、

common.sample_value

とすることで、

sample test value

という値が返ってくるので、

うまく動いていることが確認できました。