Łączenie stron

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 7 z 47.

Dwie strony, do których nikt nie może dotrzeć, nie tworzą jeszcze witryny. Potrzebujesz linków, a Next.js ma własne:

import Link from 'next/link';

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

Wygląda jak <a> i w gotowym HTML jest nim: ma ten sam href, można kliknąć go prawym przyciskiem myszy, a jego treść jest odczytywana przez czytniki ekranu i wyszukiwarki. Dlaczego więc po prostu nie napisać <a href="/about">?

Ze względu na to, co przeglądarka robi ze zwykłym linkiem: porzuca bieżącą stronę i wczytuje zupełnie nową. Każdy skrypt jest pobierany ponownie, React uruchamia się od zera, a wszystko, co znajduje się w pamięci, znika: otwarte menu, częściowo wypełniony formularz, produkty w koszyku.

Link przechwytuje kliknięcie i podmienia tylko tę część ekranu, która faktycznie się różni. Aplikacja nigdy nie uruchamia się ponownie, więc stan zostaje zachowany, a nowa strona pojawia się natychmiast.

<a href>: pełne przeładowanie, aplikacja uruchamia się ponownie, stan zostaje utracony
<Link href>: ten sam URL, ten sam element <a> w HTML, brak przeładowania

Zasada jest prosta: w swojej aplikacji zawsze używaj Link. Zwykły element <a> zachowaj dla linków prowadzących poza Twoją witrynę.

Wyzwanie

Łatwy

Obie strony istnieją, ale nie ma możliwości przechodzenia między nimi. Połącz je za pomocą Link.

W obu plikach zaimportuj Link z next/link.
W app/page.jsx dodaj link do /about z id="to-about".
W app/about/page.jsx dodaj link powrotny do / z id="to-home".

Tekst linków zależy od Ciebie. Testy klikają każdy link i sprawdzają, czy trafisz na właściwą stronę.

Spróbuj swoich sił

import './globals.css';

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

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