En Next.js 13, los layouts se han vuelto una herramienta esencial para estructurar nuestras aplicaciones, proporcionando una forma eficiente de reutilizar partes de la interfaz, como los encabezados, menús y pies de página, entre varias páginas. En este capítulo, aprenderemos cómo utilizar layouts en el App Router de Next.js.

¿Qué es un Layout?

Un layout es un componente que se utiliza para compartir una estructura común entre diferentes páginas. Esto es útil cuando tienes elementos repetitivos que se deben mostrar en múltiples rutas, como una barra de navegación o un pie de página.

En Next.js 13, puedes definir layouts a nivel de ruta para reutilizar componentes en las páginas que están bajo esa ruta. Por ejemplo, todas las páginas dentro de la carpeta app/ pueden compartir un layout global, mientras que páginas específicas pueden tener su propio layout.

Ejemplo Básico de Layout

Vamos a crear un layout global que incluya un encabezado y un pie de página. Este layout se aplicará a todas las páginas de nuestra aplicación:

javascript

En este ejemplo, el contenido de cada página se inyecta dentro del contenedor main utilizando la propiedad children. Esto permite que cada página individual defina su propio contenido mientras comparte la misma estructura de encabezado y pie de página.

Layouts por Ruta

Además de tener un layout global, también podemos definir layouts específicos para ciertas rutas. Por ejemplo, si queremos que todas las páginas bajo /blog compartan un layout diferente, podemos hacerlo de la siguiente manera:

javascript

De esta manera, todas las páginas bajo la carpeta app/blog/ utilizarán este layout específico, mientras que otras rutas seguirán utilizando el layout global.

Layouts Anidados

Next.js 13 también permite crear layouts anidados, lo que significa que puedes tener un layout global, y dentro de ciertas rutas, añadir layouts secundarios que hereden del layout principal. Esto es útil para aplicaciones que tienen varias secciones con diferentes estructuras pero que comparten elementos comunes.

javascript

En este ejemplo, el layout global se aplica a todas las páginas, mientras que el layout específico del dashboard añade una barra lateral adicional solo para las páginas dentro de dashboard/. Este enfoque modular permite una gran flexibilidad a la hora de organizar la interfaz de usuario.

Renderizado de Layouts con SSR

Los layouts en Next.js también funcionan perfectamente con el Server-Side Rendering (SSR), lo que significa que pueden ser renderizados en el servidor antes de ser enviados al cliente. Esto es especialmente útil para elementos que dependen de datos obtenidos en tiempo real.

Podemos combinar getServerSideProps con layouts de la siguiente manera:

javascript

Este enfoque permite personalizar el layout en función de los datos que se obtienen dinámicamente desde el servidor, mejorando la experiencia de usuario.

Conclusión

El uso de layouts en Next.js 13 con el App Router permite crear aplicaciones bien estructuradas y fáciles de mantener. Los layouts pueden ser globales, por ruta, o incluso anidados, lo que ofrece una gran flexibilidad para organizar la interfaz de usuario. Además, funcionan sin problemas con el renderizado en el servidor, lo que permite obtener datos dinámicos antes de renderizar la página.