Verschachtelte Routen

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

Jetzt bist du dran. Das Hinzufügen einer Seite zu einer Next.js-App besteht aus zwei Schritten: Erstelle einen Ordner und lege eine page.jsx darin ab.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

Das ist schon die gesamte Datei. Keine Routing-Tabelle, die aktualisiert werden muss, kein Import an anderer Stelle, nichts, das neu gestartet werden muss. Die Komponente ist gewöhnliches React. Das Einzige, was sie in eine URL verwandelt hat, war der Ort, an dem Sie sie gespeichert haben.

Zwei Details, die man sich merken sollte:

Es muss ein default export sein: So wählt Next.js die Seitenkomponente aus der Datei aus.
Der Name der Komponente liegt bei Ihnen. About, AboutPage, Whatever: Die URL stammt aus dem Ordner, niemals von der Funktion.

Möchtest du auch /about/team? Erstelle app/about/team/ und lege dort ein weiteres page.jsx ab. Das Muster ändert sich nicht, wenn die Website wächst, und genau das ist der Sinn dabei.

Aufgabe

Anfänger

Die App hat eine Startseite. Füge ihr eine Über-uns-Seite hinzu.

Erstelle die Datei app/about/page.jsx.
Exportiere als default eine Komponente daraus.
Sie muss ein <h1> mit id="about-title" und dem genauen Text About us zurückgeben.

Lass app/page.jsx unverändert: Die Tests besuchen beide URLs.

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