template.js

テンプレートファイルは、レイアウトと同様に、各子レイアウトやページをラップします。ルート間で持続し状態を維持するレイアウトとは異なり、テンプレートはナビゲーション時に子要素ごとに新しいインスタンスを作成します。

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

以下のような場合、レイアウトではなくテンプレートを選択するのが適しているかもしれません（使用頻度は低いですが）:

• useEffect（例: ページビューのロギング）や useState（例: ページごとのフィードバックフォーム）に依存する機能が必要な場合
• デフォルトのフレームワーク動作を変更したい場合。例えば、レイアウト内のサスペンスバウンダリは、レイアウトが最初に読み込まれるときのみフォールバックを表示し、ページ切り替え時には表示しません。テンプレートでは、ナビゲーションごとにフォールバックが表示されます。

Props

children（必須）

テンプレートコンポーネントは children prop を受け取り使用する必要があります。template はレイアウトとその子要素の間にレンダリングされます。例:

<Layout>
  {/* テンプレートには一意のキーが与えられることに注意 */}
  <Template key={routeParam}>{children}</Template>
</Layout>

知っておくと便利:

• デフォルトでは、template はサーバーコンポーネントですが、"use client" ディレクティブを通じてクライアントコンポーネントとしても使用可能です
• ユーザーが同じ template を共有するルート間をナビゲートする場合、コンポーネントの新しいインスタンスがマウントされ、DOM要素が再作成され、状態は保持されず、エフェクトが再同期されます

バージョン履歴