template.js

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

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

あまり一般的ではありませんが、レイアウトよりもテンプレートを使用することを選択する場合があります。

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

プロパティ

children（必須）

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

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

知っておくと良いこと:

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

バージョン履歴