useContext の Provider の適用方法

Next.js 14 App Router の基礎
No.222
フロントエンド開発

日付：2025年2月18日

Next.js 14 の App Router で `useContext` を適用し、`Provider` を `app/layout.js` に組み込む方法を解説します。アプリ全体でグローバルな状態を管理する手順を詳しく紹介します。

目 次

はじめに

Next.js 14 の App Router では、アプリ全体で グローバルな状態管理 をする場合に useContext を活用できます。

しかし、通常の React アプリと異なり、Provider をどこに配置すればよいのか 迷うことがあります。本記事では、Provider を app/layout.js に適用し、アプリ全体で useContext を使う方法を解説します。

1. useContext の基本

React の useContext は、コンポーネント間で 状態を共有するための仕組み です。

通常の props を使った状態管理では、親から子へ値を渡す必要がありますが、
useContext を使うことで、どのコンポーネントからでも状態にアクセスできます。

2. Context を作成する

まずは、グローバルな状態を管理する Context を作成します。

🔹 context/ThemeContext.js を作成

JAVASCRIPT
import { createContext, useState, useContext } from "react";

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

✅ ここでのポイント

  • createContext() で ThemeContext を作成
  • ThemeProvider で 状態 (theme, setTheme) を管理
  • useTheme() を作成し、useContext(ThemeContext) をラップして 簡単にアクセスできるようにする

3. Provider を app/layout.js に適用する

次に、作成した ThemeProvider をアプリ全体に適用します。

🔹 app/layout.js を修正

JAVASCRIPT
import "../styles/globals.css";
import { ThemeProvider } from "../context/ThemeContext";

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

✅ ここでのポイント

  • ThemeProvider を layout.js に適用し、アプリ全体で useContext を使えるようにする
  • children を ThemeProvider でラップすることで、全てのページ・コンポーネントが theme にアクセス可能

4. コンポーネントで useContext を利用する

作成した ThemeContext を使い、テーマの切り替えができるボタンを作成します。

🔹 components/ThemeToggle.js

JAVASCRIPT
"use client";

import { useTheme } from "../context/ThemeContext";

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      style={{
        background: theme === "light" ? "#fff" : "#333",
        color: theme === "light" ? "#000" : "#fff",
      }}
    >
      {theme === "light" ? "ダークモードに切り替え" : "ライトモードに切り替え"}
    </button>
  );
}

✅ ここでのポイント

  • useTheme() を使って 現在のテーマ (theme) と状態更新関数 (setTheme) にアクセス
  • onClick で theme を切り替え、ボタンのスタイルも変更

5. useContext の適用後の動作確認

最後に、ThemeToggle をページに配置して動作を確認します。

🔹 app/page.js

JAVASCRIPT
import ThemeToggle from "../components/ThemeToggle";

export default function HomePage() {
  return (
    <div>
      <h1>Next.js 14 の Provider 適用例</h1>
      <ThemeToggle />
    </div>
  );
}
  • ✅ これで、ページ上のボタンを押すとテーマが切り替わる！

6. まとめ

Next.js 14 の App Router では、Provider を app/layout.js に適用することで、
アプリ全体で useContext を利用可能にできます。

📌 学んだこと

  • useContext を使うことで、コンポーネント間でグローバルな状態を共有できる
  • Provider を layout.js に適用すると、アプリ全体で useContext が利用可能になる
  • use client を指定したコンポーネント (ThemeToggle) で useContext を活用し、UI を動的に更新できる

この方法を活用し、Next.js 14 の グローバルな状態管理 をスムーズに実装しましょう！

シリーズ一覧Next.js 14 App Router の基礎
全 17 回
フロントエンド開発
回タイトルリンク
第 1 回Page Router と App Router の違い詳 細
第 2 回App Router のルーティング詳 細
第 3 回App Router における Metadata の設定詳 細
第 4 回OGP・Twitter 画像の自動設定詳 細
第 5 回App Router における API ルートの基本詳 細
第 6 回use server と use client の使い分け詳 細
第 7 回useContext の Provider の適用方法この記事
第 8 回next/link の基本と使い方詳 細
第 9 回next/image の概要詳 細
第 10 回next/navigation の使い方詳 細

似た記事[一覧]