El diseño raíz

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 11 de 47.

Cada aplicación tiene partes que nunca cambian: la estructura de la página, un encabezado y un pie de página. En Next.js, estas se encuentran en un layout, y el más externo se llama root layout.

Es el archivo que has tenido bloqueado frente a ti todo este tiempo:

// app/layout.jsx
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Tres cosas lo diferencian de una página:

Es obligatorio, y es el único archivo que renderiza <html> y <body>
Recibe children, independientemente de la página con la que coincida la URL. Si olvidas renderizar {children}, tu app no mostrará nada excepto la estructura base.
Envuelve a cada ruta en la app, sin que ninguna página necesite importarlo

Persiste

Esta es la parte que sorprende a la gente. Cuando el usuario pasa de / a /menu, el diseño no se vuelve a crear. Next.js cambia la página que contiene y deja el diseño intacto.

Así, un encabezado compartido no parpadea, un video en la barra lateral sigue reproduciéndose y cualquier estado que resida en el diseño sobrevive a la navegación: un menú abierto permanece abierto y una posición de desplazamiento se mantiene. Un diseño es un marco de larga duración; las páginas entran y salen dentro de él.

Una consecuencia que vale la pena recordar: como un diseño no se vuelve a ejecutar al navegar, no puede leer los searchParams de la página actual. No está escuchando el cambio.

Pruébalo tú mismo

Esta lección no incluye un desafío de código.