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 exportación predeterminada: así es como Next.js identifica el componente de página en el 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 aplicación tiene una página de inicio. Dale una página «acerca de».

Completa el archivo app/about/page.jsx.
Exporta de forma predeterminada un componente desde él.
Debe devolver 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>
    );
}