Lier des pages

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 7 sur 47.

Deux pages auxquelles personne ne peut accéder ne forment pas encore un site. Vous avez besoin de liens, et Next.js a le sien :

import Link from 'next/link';

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

Il ressemble à un <a>, et dans l'HTML final c'en est un : même href, cliquable avec le bouton droit, lisible par les lecteurs d'écran et les moteurs de recherche. Alors pourquoi ne pas simplement écrire <a href="/about"> ?

En raison de ce qu'un navigateur fait avec un lien simple : il jette la page actuelle et en charge une toute nouvelle. Chaque script est téléchargé à nouveau, React redémarre de zéro, et tout ce qui se trouve en mémoire a disparu : le menu ouvert, le formulaire à moitié rempli, les articles dans le panier.

Link Intercepte le clic et remplace uniquement la partie de l'écran qui diffère réellement. L'application ne redémarre jamais, donc l'état survit et la nouvelle page apparaît instantanément.

<a href> : rechargement complet, l'application redémarre, état perdu
<Link href> : même URL, même <a> dans le HTML, pas de rechargement

La règle est simple : à l'intérieur de votre application, utilisez toujours Link. Réservez les balises <a> simples pour les liens qui quittent votre site.

Défi

Facile

Les deux pages existent mais il n'y a aucun moyen de naviguer entre elles. Reliez-les avec Link.

Dans les deux fichiers, importez Link depuis next/link.
Dans app/page.jsx, ajoutez un lien vers /about avec id="to-about".
Dans app/about/page.jsx, ajoutez un lien retour vers / avec id="to-home".

Le texte du lien est libre. Les tests cliquent sur chaque lien et vérifient que vous êtes arrivé sur la bonne page.

Essayez vous-même

import './globals.css';

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

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