先生と生徒の会話形式で理解しよう

生徒

「Next.jsのLayoutって、毎回同じ画面が表示されるだけのものですか？」

先生

「画面を共通化するだけでなく、データをずっと持ち続ける役割もあります。」

生徒

「ずっと持ち続けるって、ページを移動しても消えないんですか？」

先生

「そうです。Next.jsのLayoutを使うと、アプリ全体で使う情報を安全に管理できます。」

1. Next.jsのLayoutとは何かをやさしく理解しよう

Next.jsのLayoutとは、すべてのページで共通して使われる「外枠」のような存在です。家にたとえると、壁や床の部分がLayoutで、その中に置かれる家具が各ページだと考えると分かりやすいです。ページを移動しても、壁や床が毎回作り直されないのと同じように、Layoutは状態を保ったまま使われます。これが、グローバル状態を保持できる理由です。

2. グローバル状態とは何かを超かんたんに説明

グローバル状態とは、アプリ全体で共有したい情報のことです。例えば「ログインしているかどうか」「ユーザーの名前」「テーマの色」などが代表的です。メモ帳を一冊だけ机の真ん中に置いて、みんなで同じメモを見るイメージです。 Layoutに置いた状態は、その共通のメモ帳になります。

3. Layoutで状態を管理する基本構造

Next.jsのApp Routerでは、appフォルダの中にあるlayout.jsxが特別な役割を持ちます。このファイルは、ページを切り替えても再読み込みされません。そのため、ここで管理した状態は消えずに残り続けます。


import React from "react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
      </body>
    </html>
  );
}

このように、Layoutは子要素を包み込む役割を持っています。

4. useStateを使ってLayoutに状態を持たせる

状態とは「今どうなっているか」を表す情報です。ボタンを押した回数や、表示する文字の内容などが状態です。 ReactのuseStateを使うと、Layoutの中で状態を管理できます。


"use client";
import React, { useState } from "react";

export default function RootLayout({ children }) {
  const [userName, setUserName] = useState("ゲスト");

  return (
    <html>
      <body>
        <p>こんにちは、{userName}さん</p>
        {children}
      </body>
    </html>
  );
}

画面の上に「こんにちは、ゲストさん」と表示され、ページを移動しても表示が消えません。

5. Contextを使ったベストプラクティス

状態をたくさんのページで使う場合、Contextという仕組みを使うのが安全です。 Contextは「情報を入れた箱」をアプリ全体に配るようなものです。 Layoutは、この箱を置くのに最適な場所です。


"use client";
import React, { createContext, useState } from "react";

export const UserContext = createContext(null);

export default function RootLayout({ children }) {
  const [user, setUser] = useState("未ログイン");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <html>
        <body>{children}</body>
      </html>
    </UserContext.Provider>
  );
}

6. 子ページからLayoutの状態を使う方法

Layoutで作ったContextは、子ページから自由に使えます。難しく感じるかもしれませんが、箱から中身を取り出すだけです。


"use client";
import React, { useContext } from "react";
import { UserContext } from "../layout";

export default function Page() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <p>現在の状態：{user}</p>
      <button onClick={() => setUser("ログイン中")}>
        状態を変更
      </button>
    </div>
  );
}

ボタンを押すと表示が変わり、他のページに移動しても状態が保持されます。

7. Layoutでグローバル状態を管理する時の注意点

Layoutに何でもかんでも入れると、管理が難しくなります。本当に全ページで必要な情報だけを置くことが大切です。一時的な情報や、そのページだけで使う情報は、ページ側で管理しましょう。これがNext.jsでよく使われる考え方です。

8. Templateとの違いを理解して使い分ける

Templateは、ページを移動するたびに作り直される仕組みです。 Layoutは消えず、Templateは毎回リセットされます。状態を保持したい場合はLayout、毎回初期化したい場合はTemplateを使うと覚えると迷いません。

まとめ

ここまで、Next.jsのLayoutを使ってグローバル状態を保持する方法について、基礎から丁寧に解説してきました。 Next.jsのLayoutは、単に共通のヘッダーやフッターを表示するための仕組みではなく、アプリ全体で共通して使う情報を安全かつ効率的に管理するための重要な役割を担っています。ページを移動しても状態がリセットされないという特徴は、ユーザー体験を向上させるうえで欠かせません。ログイン状態やユーザー名、テーマカラー、言語設定など、アプリ全体で共有したい情報をLayoutに集約することで、コードの見通しが良くなり、保守性も高まります。

特にApp Routerを使ったNext.jsでは、appフォルダ配下のlayout.jsxやlayout.tsxが特別な意味を持ち、ここに書かれたコンポーネントはページ遷移をしても再生成されません。この仕組みを理解することで、「なぜLayoutに状態を置くと消えないのか」という疑問も自然に解消されます。 ReactのuseStateをLayoutで使うだけでも簡単なグローバル状態管理は実現できますが、複数のページやコンポーネントから状態を参照・更新したい場合にはContextの利用が効果的です。

ContextをLayoutに配置することで、アプリ全体に共通の「箱」を用意し、その中に状態と更新用の関数をまとめて渡すことができます。子ページ側ではuseContextを使って中身を取り出すだけなので、propsを何段階も渡す必要がなくなり、コードがすっきりします。これはNext.jsとReactを組み合わせた開発で非常によく使われる設計パターンです。初心者のうちは少し難しく感じるかもしれませんが、仕組み自体は「一か所で管理して、みんなで使う」というシンプルな考え方です。

ただし、Layoutに何でも詰め込みすぎないことも重要なポイントです。全ページで本当に必要な情報だけをグローバル状態として管理し、ページ固有の一時的な状態は各ページやコンポーネントで管理するようにしましょう。この使い分けができるようになると、Next.jsの設計が一段と理解しやすくなります。また、Templateとの違いを意識することで、「保持したい状態」と「毎回リセットしたい状態」を明確に分けられるようになります。

最後に、今回学んだNext.jsのLayoutによるグローバル状態管理は、小さなサンプルだけでなく、実際のWebアプリ開発でもそのまま応用できます。基本構造をしっかり押さえておけば、認証機能やダッシュボード、設定画面など、さまざまな場面で役立つでしょう。 Next.jsを使ったReact開発において、Layoutを正しく理解することは大きな一歩です。ぜひ、自分のアプリでもLayoutに状態を持たせる設計を試してみてください。


"use client";
import React, { createContext, useState } from "react";

export const AppContext = createContext(null);

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

  return (
    <AppContext.Provider value={{ theme, setTheme }}>
      <html>
        <body>
          <p>現在のテーマ：{theme}</p>
          {children}
        </body>
      </html>
    </AppContext.Provider>
  );
}

テーマの状態がLayoutで管理され、ページを移動しても現在のテーマ表示が維持されます。

先生と生徒の振り返り会話

生徒

「Next.jsのLayoutって、見た目を共通にするだけじゃなくて、状態もずっと持てるんですね。ページを移動しても名前やログイン状態が消えない理由が、やっと分かりました。」

先生

「その理解で大丈夫です。 Layoutはアプリの土台のような存在なので、全体で使う大事な情報を置くのに向いています。」

生徒

「ContextをLayoutに置くと、どのページからでも同じ状態を使えるのも便利ですね。 propsをたくさん渡さなくていいのが助かります。」

先生

「そうですね。ただし、何でもかんでもLayoutに入れず、本当に必要なものだけをグローバル状態にするのがコツです。」

生徒

「LayoutとTemplateの違いも理解できました。消したくない状態はLayout、毎回初期化したいものはTemplate、という使い分けですね。」