Verschachtelte Routen

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

Jetzt mach es. Eine Seite zu einer Next.js-App hinzuzufügen, besteht aus zwei Schritten: einen Ordner erstellen und eine page.jsx hineinlegen.

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

Das ist die gesamte Datei. Keine Routentabelle, die aktualisiert werden muss, kein import irgendwo anders, nichts, was neu gestartet werden muss. Die Komponente ist gewöhnliches React. Das Einzige, was sie in eine URL verwandelt hat, war der Ort, an dem du sie gespeichert hast.

Zwei wichtige Details, die du dir merken solltest:

Es muss ein Default-Export sein: So wählt Next.js die Seitenkomponente aus der Datei aus.
Der Name der Komponente steht dir frei. About, AboutPage, Whatever: Die URL stammt aus dem Ordner, niemals aus der Funktion.

Du möchtest auch /about/team? Erstelle app/about/team/ und lege dort eine weitere page.jsx ab. Das Muster ändert sich nicht, wenn die Website wächst – genau darum geht es.

Aufgabe

Anfänger

Die App hat eine Startseite. Gib ihr eine Über-uns-Seite.

Vervollständige die Datei app/about/page.jsx.
Exportiere daraus standardmäßig eine Komponente.
Sie muss ein <h1> mit id="about-title" und dem exakten 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>
    );
}