Seiten verlinken

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 7 von 47.

Zwei Seiten, die niemand erreichen kann, sind noch keine Website. Sie brauchen Links, und Next.js hat seine eigenen:

import Link from 'next/link';

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

Es sieht aus wie ein <a>, und im fertigen HTML ist es auch eins: gleiches href, per Rechtsklick anklickbar, lesbar für Screenreader und Suchmaschinen. Warum also nicht einfach <a href="/about"> schreiben?

Grund dafür ist, was ein Browser mit einem normalen Link macht: Er verwirft die aktuelle Seite und lädt eine komplett neue. Jedes Skript wird erneut heruntergeladen, React startet von Grund auf neu und alles im Speicher ist verloren: das offene Menü, das halb ausgefüllte Formular, die Artikel im Warenkorb.

Link fängt den Klick ab und tauscht nur den Teil des Bildschirms aus, der sich tatsächlich unterscheidet. Die App wird nie neu gestartet, sodass der Zustand erhalten bleibt und die neue Seite sofort erscheint.

<a href>: vollständiges Neuladen, App startet neu, Zustand geht verloren
<Link href>: gleiche URL, gleiches <a> im HTML, kein Neuladen

Die Regel ist einfach: Verwende innerhalb deiner App immer Link. Hebe dir normale <a>-Tags für Links auf, die deine Website verlassen.

Aufgabe

Einfach

Die beiden Seiten existieren, aber es gibt keine Möglichkeit, zwischen ihnen zu wechseln. Verbinde sie mit Link.

Importiere in beiden Dateien Link von next/link.
Füge in app/page.jsx einen Link zu /about mit id="to-about" hinzu.
Füge in app/about/page.jsx einen Link zurück zu / mit id="to-home" hinzu.

Der Linktext bleibt dir überlassen. Die Tests klicken auf jeden Link und prüfen, ob du auf der richtigen Seite gelandet bist.

Probier es selbst

import './globals.css';

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

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