Oczekiwanie na parametry trasy

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

Trasa dynamiczna przekazuje stronie segment adresu URL za pomocą params. W Next 15 warto zapamiętać pewien haczyk:

params to obietnica.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

Zapomnij o await, a nic się nie wysypie — i właśnie dlatego łatwo tego nie zauważyć. Destrukturyzacja obietnicy daje po prostu undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // niczego nie wyszukuje

Strona nadal się renderuje. Jest po prostu pusta albo pełna wartości zastępczych, a ty szukasz błędu w warstwie danych, którego nigdy tam nie było.

Ta sama zasada dotyczy searchParams. Oba są obietnicami, oba wymagają użycia await, a oba są dostępne tylko w komponentach serwerowych async, co jest kolejnym powodem, dla którego napisana przed chwilą strona musiała być asynchroniczna.

Po co w ogóle obietnice? Dzięki nim Next.js może zacząć renderować te części strony, które nie zależą od adresu URL, zanim skończy ustalać te, które od niego zależą.

Wyzwanie

Łatwy

app/menu/[slug]/page.jsx jest prawie poprawny, ale nie oczekuje na params, więc każda potrawa jest wyświetlana jako Unknown dish.

Przed destrukturyzacją zaczekaj na params: const { slug } = await params;

lib/data.js i strona główna są zablokowane. Odwiedzenie /menu/carbonara musi wyświetlić Carbonara w #dish-name, a jej cenę w #dish-price.

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