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 Details, die du dir unbedingt merken solltest:

Es muss ein default export sein: So wählt Next.js die Seitenkomponente aus der Datei aus.
Der Name der Komponente gehört dir. 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 home page. Gib ihr eine about page.

Vervollständige die Datei app/about/page.jsx.
Exportiere daraus eine Komponente als default-Export.
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>
    );
}