VIDEO
HIGHLIGHT
Log InSign up
Next.js 15 Tutorial - 16 - Multiple Root Layouts
SummaryTranscriptChat

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

Playlists: Next.js 15 Tutorial - Beginner to Advanced
Video description

Mastering Multiple Root Layouts with Route Groups in Next.js In this video, we'll explore how to create and manage multiple root layouts in a Next.js project using route groups. Learn how to apply different layouts to various sections of your app, such as revenue and customers, while keeping login and register pages clean and minimal. This step-by-step tutorial will help you understand the power and flexibility of route groups, making your code more organized and maintainable. 📔 GitHub Repo - https://github.com/gopinav/Next.js-15-Tutorials 📘 Frontend Interview Course - https://learn.codevolution.dev/ 💖 Support UPI - https://support.codevolution.dev/ 💖 Support Paypal - https://www.paypal.me/Codevolution 💾 Github - https://github.com/gopinav 📱 Follow Codevolution + Twitter - https://twitter.com/CodevolutionWeb + Facebook - https://www.facebook.com/codevolutionweb 📫 Business - codevolution.business@gmail.com 00:00 Introduction and Project Setup 00:39 Understanding Multiple Root Layouts 01:09 Implementing Route Groups 01:31 Creating and Moving Layout Files 02:04 Handling Errors and Finalizing Layouts 02:45 The Power of Route Groups in Next.js 03:03 Exploring Metadata in Layouts 03:17 Supporting the Channel