template.js

Un archivo template (plantilla) es similar a un layout en el sentido de que envuelve cada layout hijo o página. A diferencia de los layouts que persisten entre rutas y mantienen el estado, las plantillas crean una nueva instancia para cada uno de sus hijos durante la navegación.

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

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

Aunque menos común, podrías elegir una plantilla en lugar de un layout si necesitas:

• Funcionalidades que dependan de useEffect (ej. registro de visitas a páginas) y useState (ej. un formulario de feedback por página).
• Cambiar el comportamiento predeterminado del framework. Por ejemplo, los Suspense Boundaries dentro de layouts solo muestran el fallback la primera vez que se carga el Layout y no al cambiar entre páginas. En las plantillas, el fallback se muestra en cada navegación.

Props

children (requerido)

Los componentes de plantilla deben aceptar y usar una prop children. El template se renderiza entre un layout y sus hijos. Por ejemplo:

<Layout>
  {/* Nota que a la plantilla se le asigna una clave única. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Es bueno saber:

• Por defecto, template es un Componente de Servidor (Server Component), pero también puede usarse como Componente de Cliente (Client Component) mediante la directiva "use client".
• Cuando un usuario navega entre rutas que comparten un template, se monta una nueva instancia del componente, se recrean los elementos DOM, el estado no se preserva y los efectos se resincronizan.

Historial de versiones