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要素が再作成され、状態は保持されず、エフェクトが再同期されます。

バージョン履歴