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, un pie de página. En Next.js, estas viven en un layout, y el más externo se llama el 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

Aquí está la parte que sorprende a la gente. Cuando el usuario pasa de / a /menu, el layout no se vuelve a crear. Next.js cambia la página en su interior y deja el layout intacto.

De este modo, un encabezado compartido no parpadea, un video en la barra lateral sigue reproduciéndose y cualquier estado que resida en el layout sobrevive a la navegación: un menú abierto permanece abierto y la posición del desplazamiento se mantiene. Un layout es un marco de larga duración; las páginas van y vienen dentro de él.

Una consecuencia que vale la pena recordar: como un layout 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.