template.js

Un fichier template (modèle) est similaire à un layout en ce qu'il englobe chaque layout enfant ou page. Contrairement aux layouts qui persistent entre les routes et maintiennent leur état, les templates créent une nouvelle instance pour chacun de leurs enfants lors de la navigation.

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

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

Bien que moins courant, vous pourriez choisir un template plutôt qu'un layout si vous souhaitez :

• Des fonctionnalités reposant sur useEffect (ex : journalisation des vues de page) et useState (ex : un formulaire de feedback par page).
• Modifier le comportement par défaut du framework. Par exemple, les Suspense Boundaries dans les layouts n'affichent le fallback que lors du premier chargement du Layout, et non lors du changement de page. Pour les templates, le fallback est affiché à chaque navigation.

Props

children (requis)

Les composants Template doivent accepter et utiliser une prop children. Le template est rendu entre un layout et ses enfants. Par exemple :

<Layout>
  {/* Notez que le template reçoit une clé unique. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Bon à savoir :

• Par défaut, template est un Composant Serveur, mais peut aussi être utilisé comme Composant Client via la directive "use client".
• Lorsqu'un utilisateur navigue entre des routes partageant un template, une nouvelle instance du composant est montée, les éléments DOM sont recréés, l'état n'est pas préservé et les effets sont resynchronisés.

Historique des versions