Next.js 15 Tutorial - 16 - Multiple Root Layouts

¿Cómo implementar múltiples layouts en Next.js?

Introducción a la estructura del proyecto

• Se inicia un nuevo proyecto de Next.js para facilitar el seguimiento del tema.

• Se busca crear una aplicación con rutas para clientes y revenue, incluyendo páginas de inicio de sesión y registro.

Desafío de los layouts

• La dificultad radica en que al agregar un encabezado y pie de página en el archivo root layout.tsx, estos se aplicarán a todas las páginas.

• Se plantea la necesidad de diferentes layouts para distintas partes de la aplicación, introduciendo el concepto de "múltiples root layouts".

Uso de grupos de rutas

• Los grupos de rutas permiten organizar la estructura del proyecto sin afectar las URLs, facilitando la aplicación selectiva de layouts.

• Se crean dos grupos: uno para marketing (clientes y revenue) y otro para login y registro.

Implementación práctica

• El archivo root layout.tsx se mueve al grupo de rutas marketing, renombrándolo a marketing layout.

• Se crea un nuevo layout en el grupo O (login/registro), eliminando el encabezado y manteniendo solo el pie de página.

Resultados observados

• Al mover page.tsx al grupo marketing, se observa que las URLs no cambian pero los layouts sí: las páginas login y registro solo tienen pie, mientras que clientes y revenue tienen ambos elementos.

• Esto demuestra cómo los grupos de rutas permiten definir múltiples layouts específicos para partes concretas de la aplicación.

Conclusión sobre flexibilidad