template.js

テンプレートファイルは、レイアウトと同様に、レイアウトやページをラップします。ルート間で持続し状態を維持するレイアウトとは異なり、テンプレートには一意のキーが与えられるため、クライアントコンポーネントの子要素はナビゲーション時に状態をリセットします。

テンプレートは以下のような場合に有用です:

ナビゲーション時に useEffect を再同期する必要がある場合
ナビゲーション時にクライアントコンポーネントの子要素の状態をリセットする必要がある場合（例: 入力フィールド）
フレームワークのデフォルト動作を変更する場合。例えば、レイアウト内のSuspense境界は初回ロード時のみフォールバックを表示しますが、テンプレートではすべてのナビゲーションで表示されます

規約

テンプレートは、template.js ファイルからデフォルトのReactコンポーネントをエクスポートすることで定義できます。コンポーネントは children プロップを受け入れる必要があります。

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

ネストに関して、template.js はレイアウトとその子要素の間にレンダリングされます。以下は簡略化された出力例です:

出力例

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

テンプレートは children プロップを受け入れます。

出力例

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

サーバーコンポーネント: デフォルトで、テンプレートはサーバーコンポーネントです
ナビゲーション時の再マウント: テンプレートには自動的に一意のキーが与えられます。新しいルートにナビゲートすると、テンプレートとその子要素が再マウントされます
状態のリセット: テンプレート内のクライアントコンポーネントは、ナビゲーション時に状態をリセットします
エフェクトの再実行: useEffect などのエフェクトは、コンポーネントが再マウントされると再同期されます
DOMのリセット: テンプレート内のDOM要素は完全に再作成されます

バージョン	変更内容
`v13.0.0`	`template` が導入されました