Next.jsのprops：Server ComponentからClient Componentへ安全に渡す
propsはReactのデータ受け渡しの仕組みです。Next.jsではサーバーとブラウザーの境界が加わるため、渡せる値と公開される情報を意識して設計します。
propsはReactのデータ受け渡しの仕組みです。Next.jsではサーバーとブラウザーの境界が加わるため、渡せる値と公開される情報を意識して設計します。
対象環境と役割
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プロジェクトで実行してください。
引数・戻り値・受け渡すデータ
通常のpropsはコンポーネントの引数です。サーバーからクライアントへ渡す値にはReactがシリアライズできる形が必要です。一般の関数やDB接続などをそのまま渡すことはできません。
コード例を動かす
app/props-demo/Counter.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
'use client';
import { useState } from 'react';
type Props = { label: string; initialCount: number };
export default function Counter({ label, initialCount }: Props) {
const [count, setCount] = useState(initialCount);
return <section><h2>{label}</h2><p>{count}</p>
<button onClick={() => setCount(value => value + 1)}>1増やす</button></section>;
}実行結果と処理の順序
Counterは label と initialCount を受け取り、以後の操作状態をブラウザー内で管理します。親側のServer Componentは文字列と数値を渡せばよく、クリック用関数を渡す必要がありません。
次の親ページを同じディレクトリに置いてください。app/props-demo/page.tsx の内容は後述のコードです。コンポーネント単体と親ページの2ファイルで実行できます。
app/props-demo/page.tsx を作成する
import Counter from './Counter';
export default function PropsDemo() {
return <main><h1>propsの境界</h1><Counter label="読んだ記事" initialCount={2} /></main>;
}/props-demo を開くと2から始まるカウンターが表示されます。サーバーが初期値を用意し、ブラウザーがボタン操作を担当します。
つまずきやすい点と使い分け
普通の関数とServer Functionの違い
普通のコールバックをサーバーからクライアントへ渡すことはできません。Server Functionへの参照には専用の仕組みがありますが、呼び出し時の認証・認可や入力検証が必要です。
propsは秘密の保管場所ではない
クライアントへ渡すpropsは閲覧者が確認できる情報です。APIキーや不要な個人情報を混ぜず、表示用に必要な項目だけを選んで渡します。
静的出力で使えるか
この例はビルド時に値を確定できるため静的出力に組み込めます。CMS更新などで値を変えた場合は再ビルド・再配置が必要です。
確認課題と実務への応用
自分で値を変えて確認する
初期値を5へ変えて再読み込みします。続いて親propsの変化とuseStateの初期化は別であることを確認し、常に親の値へ追従させるか、独立した操作状態にするかを決めてください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。