Rutas anidadas

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

Ahora hazlo tú. Añadir una página a una aplicación de Next.js consta de dos pasos: crear una carpeta y colocar un page.jsx dentro de ella.

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

Ese es todo el archivo. Sin tabla de rutas que actualizar, sin importaciones en ninguna otra parte, nada que reiniciar. El componente es React ordinario. Lo único que lo convirtió en una URL fue dónde lo guardaste.

Dos detalles que vale la pena tener claros:

Debe ser una exportación por defecto (default export): así es como Next.js elige el componente de la página fuera del archivo.
El nombre del componente es tuyo. About, AboutPage, Whatever: la URL proviene de la carpeta, nunca de la función.

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

Desafío

Principiante

La aplicación tiene una página de inicio. Añádele una página de información (about).

Crea el archivo app/about/page.jsx.
Exporta por defecto (default-export) un componente desde él.
Debe retornar un <h1> con id="about-title" y el texto exacto About us.

Deja app/page.jsx como está: las pruebas visitan ambas URLs.

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>
    );
}