Dynamiczne ścieżki

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

Menu z czterdziestoma daniami nie potrzebuje czterdziestu folderów. Chcesz, aby /menu/pizza, /menu/pasta i /menu/tiramisu były tą samą stroną wyświetlającą różne dane.

To właśnie oznaczają nawiasy kwadratowe w nazwie folderu:

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

Zwykły folder pasuje do swojej nazwy. Folder [bracketed] pasuje do dowolnego segmentu i zapamiętuje, co dopasował. Słowo w nawiasach to nazwa, pod którą później odczytasz dopasowaną wartość: [slug] daje slug, [id] daje id.

Next przekazuje tę wartość do strony jako właściwość o nazwie params:

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

    return <h1>{slug}</h1>;
}

W tym małym pliku dzieją się trzy rzeczy:

Strona przyjmuje właściwość params. Każda strona ją otrzymuje, a w przypadku trasy dynamicznej zawiera ona dopasowane segmenty.
W Next 15 params jest Promise, więc używasz await. Dlatego komponent jest async. W rozdziale 5 wyjaśniono, dlaczego strony mogą takie być.
Destrukturyzacja wyodrębnia slug, którego nazwa pochodzi bezpośrednio od folderu [slug].

Odwiedź /menu/pasta, a slug ma wartość "pasta". Jeden plik, każde danie.

Wyzwanie

Łatwy

Folder dynamiczny już istnieje: app/menu/[slug]/page.jsx obsługuje każdy adres URL w /menu. Problem w tym, że wyświetla pizza, niezależnie od tego, o które danie prosisz.

Utwórz komponent async.
Odczytaj dopasowany segment za pomocą const { slug } = await params;.
Wyświetl slug wewnątrz <h1 id="dish"> zamiast tekstu wpisanego na stałe.

Testy odwiedzają dwie różne strony dań i oczekują dwóch różnych nagłówków.

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>
    );
}