Rutas anidadas

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

Ahora hazlo. Añadir una página a una aplicación de Next.js implica dos pasos: crear una carpeta y poner un page.jsx dentro.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

Ese es todo el archivo. No hay ninguna tabla de rutas que actualizar, ninguna importación en otro lugar ni nada que reiniciar. El componente es React ordinario. Lo único que lo convirtió en una URL fue dónde lo guardaste.

Dos detalles que conviene tener claros:

Debe ser una default export: así es como Next.js selecciona el componente de página del archivo.
El nombre del componente lo eliges tú. About, AboutPage, Whatever: la URL proviene de la carpeta, nunca de la función.

¿También quieres /about/team? Crea app/about/team/ y coloca allí otro page.jsx. El patrón no cambia a medida que el sitio crece, y ese es el objetivo.

Desafío

Principiante

La app tiene una home page. Dale una about page.

Completa el archivo app/about/page.jsx.
Haz un default-export de un componente desde él.
Debe hacer return de un <h1> con id="about-title" y el texto exacto About us.

Deja app/page.jsx sin cambios: las pruebas visitan ambas URL.

Pruébalo tú mismo

import './globals.css';

export const metadata = {
    title: 'My App',
};

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