Menu

template.js

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

app/template.tsx
TypeScript
export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}
template.js 特殊ファイル

あまり一般的ではありませんが、以下の機能が必要な場合にテンプレートをレイアウトの代わりに使用することを選択できます：

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

Props

children（必須）

テンプレートはchildrenプロップを受け取ります。例：

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

補足：

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

バージョン履歴

バージョン変更点
v13.0.0template導入時期。