template.js

template ファイルは layout と似ており、レイアウトやページをラップします。ルート間で状態を保持するレイアウトとは異なり、templateは一意のキーを持ち、子Client Componentsの状態はナビゲーション時にリセットされます。

TypeScript

app/template.tsx

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

JavaScript

app/template.jsx

export default function Template({ children }) {
  return <div>{children}</div>
}

あまり一般的ではありませんが、次のような場合にtemplateを使用することを選択するかもしれません：

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

Props

children（必須）

Templateはchildren propを受け取ります。例えば：

Output

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

Good to know:

• デフォルトでは、templateはServer Componentですが、"use client"ディレクティブを使用してClient Componentとしても使えます
• ユーザーがtemplateを共有するルート間をナビゲートする際、コンポーネントの新しいインスタンスがマウントされ、DOM要素が再作成され、Client Componentsの状態は保持されず、エフェクトは再同期されます

バージョン履歴

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