template.js

テンプレートファイルは、それぞれの子レイアウトやページをラップするという点でレイアウトと同様です。しかし、ルートをまたいで持続し、状態を維持するレイアウトとは異なり、テンプレートはナビゲーションごとにその子コンポーネントの新しいインスタンスを生成します。

app/template.tsx

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

あまり一般的ではありませんが、次のような場合にはレイアウトよりもテンプレートの使用を検討できます:

• useEffect（例: ページビューのログ記録）やuseState（例：ページごとのフィードバックフォーム）に依存する機能がある場合。
• デフォルトのフレームワークの挙動を変えるため。例えば、レイアウト内のサスペンス境界は最初にレイアウトがロードされたときだけフォールバックを表示し、ページを切り替えたときには表示しません。しかし、テンプレートでは、各ナビゲーションごとにフォールバックが表示されます。

Props

children（必須）

Templateコンポーネントはchildren propを引数に取り、使用しなければなりません。テンプレートはレイアウトとその子コンポーネントの間でレンダリングされます。例えば次のとおりです：

Output

<Layout>
  {/* templateには一意のキーが与えられていることに注意してください */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Good to know:

• デフォルトではテンプレートはServer Componentですが、"use client"ディレクティブによりClient Componentとしても使用できます。
• ユーザーがテンプレートを共有するルート間を移動するとき、コンポーネントの新しいインスタンスがマウントされ、DOM要素が再作成され、状態は保存されず、副作用は再同期されます。

バージョン履歴

Version	Changes
v13.0.0	templateの導入