template.js

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

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

あまり一般的ではありませんが、以下のような場合にレイアウトではなくテンプレートを使用することを選択できます。

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

プロパティ

children (必須)

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

<Layout>
  {/* Note that the template is automatically given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

知っておくと良いこと:

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

バージョン履歴