Dynamische Routen

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

Ein Menü mit vierzig Gerichten bekommt nicht vierzig Ordner. Sie möchten, dass /menu/pizza, /menu/pasta und /menu/tiramisu dieselbe Seite sind, die unterschiedliche Daten anzeigt.

Das bedeuten eckige Klammern in einem Ordnernamen:

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

Ein normaler Ordner entspricht seinem eigenen Namen. Ein Ordner mit [eckigen Klammern] entspricht jedem beliebigen Segment und merkt sich, womit er übereingestimmt hat. Das Wort in den Klammern ist der Name, unter dem Sie es auslesen: [slug] gibt Ihnen slug, [id] gibt Ihnen id.

Als Nächstes übergibt es diesen Wert als eine params genannte Prop an die Seite:

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

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

Drei Dinge geschehen in dieser winzigen Datei:

Die Seite nimmt eine params-Prop entgegen. Jede Seite erhält eine, und bei einer dynamischen Route enthält sie die übereinstimmenden Segmente.
params ist in Next 15 ein Promise, daher verwendest du await darauf. Deshalb ist die Komponente async. Kapitel 5 erklärt, warum Seiten dies sein dürfen.
Durch Destrukturierung wird slug herausgezogen, dessen Name direkt aus dem Ordner [slug] stammt.

Rufen Sie /menu/pasta auf und slug ist "pasta". Eine Datei, jedes Gericht.

Aufgabe

Einfach

Der dynamische Ordner ist bereits vorhanden: app/menu/[slug]/page.jsx antwortet auf jede URL unter /menu. Das Problem ist, dass es immer pizza anzeigt, egal welches Gericht aufgerufen wurde.

Mache die Komponente async.
Lies das passende Segment mit const { slug } = await params; aus.
Rendere slug innerhalb von <h1 id="dish"> anstelle des fest codierten Textes.

Die Tests rufen zwei verschiedene Gerichte auf und erwarten zwei verschiedene Überschriften.

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