Route annidate

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 6 di 47.

Ora tocca a te. Aggiungere una pagina a un'app Next.js richiede due passaggi: crea una cartella e inseriscici un page.jsx.

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

Questo è tutto il file. Non c’è nessuna tabella delle route da aggiornare, nessun import altrove e niente da riavviare. Il componente è normale React. L’unica cosa che lo ha trasformato in un URL è dove l’hai salvato.

Due dettagli da tenere a mente:

Deve essere un export predefinito: è così che Next.js individua il componente della pagina nel file.
Il nome del componente lo scegli tu. About, AboutPage, Whatever: l’URL deriva dalla cartella, mai dalla funzione.

Vuoi anche /about/team? Crea app/about/team/ e inserisci un altro page.jsx lì dentro. Lo schema non cambia man mano che il sito cresce, ed è proprio questo il punto.

Sfida

Principiante

L'app ha una pagina principale. Aggiungile una pagina informativa.

Completa il file app/about/page.jsx.
Esporta da esso un componente come esportazione predefinita.
Deve restituire un <h1> con id="about-title" e il testo esatto About us.

Lascia stare app/page.jsx: i test visitano entrambi gli URL.

Provalo tu

import './globals.css';

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

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