Diferencias entre archivos Template y Layout en Next.js

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:57

Diferencias entre archivos Template y Layout en Next.js

Curso de Next.js 14

Clase 26 de 57

Clase 26 / 57

Recursos

Comprender la diferencia entre un archivo template y un archivo layout en Next.js es fundamental para controlar el comportamiento de montaje de los componentes cuando el usuario cambia de ruta. Aunque ambos archivos comparten la misma estructura, su ciclo de vida es completamente distinto, y elegir uno u otro puede definir si tus animaciones funcionan, si tus métricas se envían correctamente o si el estado se preserva entre páginas.

¿Qué hace especial al layout en Next.js?

El layout es un archivo que envuelve a las páginas dentro de un segmento de ruta. Su característica principal es que no se vuelve a remontar cuando el usuario cambia de página dentro del mismo grupo de rutas. Esto significa que React reutiliza el componente tal como fue montado la primera vez [01:30].

Para comprobarlo de forma práctica, se puede convertir el layout en un componente cliente con la directiva "use client" y agregar un console.log dentro del componente:

jsx "use client";

export default function HomeLayout({ children }) { console.log("home layout"); return ( <div> {children} </div> ); }

Al alternar entre la página principal y una página de prueba, el console.log solo aparece una vez en la consola del navegador [02:15]. No importa cuántas veces se alterne entre rutas: el layout conserva su estado y sus componentes montados. Esto otorga una ventaja de rendimiento importante porque evita renderizados innecesarios.

¿Qué es un template y en qué se diferencia del layout?

Un template tiene exactamente la misma estructura que un layout, pero con una diferencia crítica: sí se remonta cada vez que el usuario cambia de segmento de ruta [03:05]. Para usar un template basta con renombrar el archivo de layout a template.

jsx "use client";

export default function HomeTemplate({ children }) { console.log("home layout"); return ( <div> {children} </div> ); }

Ahora, al alternar entre páginas, el console.log se dispara en cada navegación [03:30]. Esto confirma que el template se desmonta y se monta de nuevo, y con él todos sus componentes hijos también se remontan.

¿Cuándo conviene usar un template en lugar de un layout?

El remontado del template abre casos de uso muy concretos:

Animaciones de entrada: si necesitas que un componente ejecute una animación cada vez que el usuario llega a una nueva página, el layout convencional no lo permitirá porque no se remonta. El template sí lo hace [03:55].
Envío de métricas por navegación: usando un useEffect dentro del template, puedes disparar lógica cada vez que el usuario cambia de ruta. Esto es ideal para herramientas como Google Analytics o cualquier sistema de métricas personalizado [04:20].

jsx "use client"; import { useEffect } from "react";

export default function HomeTemplate({ children }) { useEffect(() => { console.log("envío de métricas"); }, []);

return ( <div> {children} </div> ); }

Si este mismo useEffect estuviera dentro de un layout, solo se ejecutaría una única vez, cuando el usuario entra por primera vez a la página. Con el template, se ejecuta en cada cambio de ruta.

¿Qué papel juega el route grouping en este comportamiento?

El ejemplo práctico utiliza un route grouping llamado (home) que agrupa varias páginas bajo el mismo layout o template [01:00]. Cuando las páginas comparten el mismo grupo, la navegación entre ellas es rápida porque Next.js solo intercambia el contenido hijo. El route grouping no afecta la URL final, pero sí determina qué layout o template envuelve a las páginas.

La decisión entre layout y template se reduce a una pregunta: ¿necesitas que el estado se preserve entre navegaciones o necesitas que el componente se reinicie? Si la respuesta es preservar, usa layout. Si necesitas reiniciar, ejecutar efectos o lanzar animaciones en cada cambio de ruta, usa template.

¿Has encontrado algún otro caso de uso interesante para los templates? Comparte tu experiencia en los comentarios.

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Diferencias entre archivos Template y Layout en Next.js