Warten auf Route-Parameter

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

Eine dynamische Route übergibt Ihrer Seite das URL-Segment über params. In Next 15 gibt es jedoch einen Haken, den man sich merken sollte:

params ist ein Promise.

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

Vergisst man das await, stürzt nichts ab, was genau das ist, was es so tückisch macht. Das Destrukturieren eines Promises gibt dir einfach undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // sucht nichts

Die Seite wird weiterhin gerendert. Sie ist einfach leer oder voll von Fallbacks, und Sie begeben sich in Ihrer Datenschicht auf die Suche nach einem Fehler, der dort nie existiert hat.

Die gleiche Regel gilt für searchParams. Beide sind Promises, für beide wird await benötigt und beide sind nur für async-Serverkomponenten verfügbar – ein weiterer Grund, warum die Seite, die Sie gerade geschrieben haben, async sein musste.

Warum überhaupt Promises? Damit Next.js mit dem Rendern der Teile Ihrer Seite beginnen kann, die nicht von der URL abhängen, bevor es die Teile verarbeitet hat, die dies tun.

Aufgabe

Einfach

app/menu/[slug]/page.jsx ist fast richtig, aber es wartet nie auf params mittels await, sodass jedes Gericht als Unknown dish zurückgegeben wird.

Warte auf params vor dem Destrukturieren: const { slug } = await params;

lib/data.js und die Homepage sind gesperrt. Der Aufruf von /menu/carbonara muss Carbonara in #dish-name und den zugehörigen Preis in #dish-price anzeigen.

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