Collegare le pagine

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

Due pagine che nessuno può raggiungere non costituiscono ancora un sito. Ti servono dei link, e Next.js ne ha di propri:

import Link from 'next/link';

export default function Home() {
    return (
        <nav>
            <Link href="/about">About</Link>
        </nav>
    );
}

Sembra un <a> e, nell’HTML finito, lo è: stesso href, cliccabile con il tasto destro, leggibile dagli screen reader e dai motori di ricerca. Quindi perché non scrivere direttamente <a href="/about">?

A causa di ciò che fa un browser con un semplice link: abbandona la pagina corrente e ne carica una completamente nuova. Ogni script viene scaricato di nuovo, React si avvia da zero e tutto ciò che è in memoria scompare: il menu aperto, il modulo compilato a metà, gli articoli nel carrello.

Link intercetta il clic e sostituisce solo la parte dello schermo che effettivamente cambia. L'app non si riavvia mai, quindi lo stato viene mantenuto e la nuova pagina appare all'istante.

<a href>: ricaricamento completo, l'app si riavvia, lo stato viene perso
<Link href>: stesso URL, stesso <a> nell'HTML, nessun ricaricamento

La regola è semplice: nella tua app, usa sempre Link. Riserva il semplice <a> ai link che portano fuori dal tuo sito.

Sfida

Facile

Le due pagine esistono, ma non c'è modo di passare dall'una all'altra. Collegale con Link.

In entrambi i file, importa Link da next/link.
In app/page.jsx, aggiungi un link a /about con id="to-about".
In app/about/page.jsx, aggiungi un link per tornare a / con id="to-home".

Puoi scegliere il testo del link. I test fanno clic su ciascun link e verificano che tu sia arrivato alla pagina giusta.

Provalo tu

import './globals.css';

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

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