Layoutのprops：childrenとparamsで共通画面を組み立てる
layout.tsxのchildrenとparamsの役割を解説します。共有レイアウトが維持される仕組みと、searchParamsを受け取らない理由も学びます。
layout.tsxのchildrenとparamsの役割を解説します。共有レイアウトが維持される仕組みと、searchParamsを受け取らない理由も学びます。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
children は内側のページやレイアウトが入る表示領域で、型は ReactNode です。動的ルートに置いたlayoutの params には、その階層までの動的パラメーターが入ります。
コード例を動かす
app/workspace/[team]/layout.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import type { ReactNode } from 'react';
type Props = { children: ReactNode; params: Promise<{ team: string }> };
export default async function TeamLayout({ children, params }: Props) {
const { team } = await params;
return <section><header><p>チーム: {team}</p></header>{children}</section>;
}実行結果と処理の順序
同じ階層の app/workspace/[team]/page.tsx にページを置くと、その内容がchildrenへ入ります。Next.jsの既存ルートlayoutとして app/layout.tsx が別途あり、htmlとbodyを定義している前提です。
チーム内の複数ページに共通するサイドバーなどへ応用できます。表示したteam名をそのままチームへのアクセス許可と解釈せず、データ取得側で所属や権限を確認します。
app/workspace/[team]/page.tsx を作成する
export default function TeamHome() {
return <main><h1>チームのホーム</h1><p>ここがchildrenとして表示されます。</p></main>;
}サーバー実行環境で /workspace/design を開くと、designという共通表示の下にページが入ります。
つまずきやすい点と使い分け
childrenを忘れるとページが見えない
共通ヘッダーだけ返してchildrenを配置しないと、内側のページが表示されません。childrenをどの領域へ入れるかをHTMLの構造と一緒に決めます。
最新の検索条件は子で読む
layoutにはsearchParams propがなく、共有レイアウトは遷移で維持されます。現在の検索条件はPageか、小さなClient Componentの useSearchParams で読みます。
静的出力で使えるか
静的出力では、動的なteamの候補を generateStaticParams で生成対象として列挙する必要があります。children自体は静的サイトでも使えますが、このlayoutだけでは動的URLの生成対象は決まりません。
確認課題と実務への応用
自分で値を変えて確認する
pageへ見出しを置き、childrenを一時的に外したときの違いを確認します。同じチーム配下に2ページを作り、共通部分とページ固有部分がどこかを説明してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。