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.

Next übergibt diesen Wert an die Seite als eine Prop namens params:

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

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

Drei Dinge passieren in dieser kleinen Datei:

Die Page nimmt eine params-Prop entgegen. Jede Page 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 dafür. Aus diesem Grund ist die Komponente async. Kapitel 5 erklärt, warum Pages das sein dürfen.
Durch Destructuring wird slug extrahiert, dessen Name direkt vom 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>
    );
}