Zagnieżdżone ścieżki

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 6 z 47.

Teraz zrób to. Dodanie strony do aplikacji Next.js wymaga dwóch kroków: utwórz folder i umieść w nim plik page.jsx.

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

To cały plik. Nie trzeba aktualizować tabeli tras ani niczego importować w innym miejscu czy restartować. Ten komponent to zwykły React. Jedyną rzeczą, która sprawiła, że stał się adresem URL, było miejsce, w którym go zapisano.

Warto zapamiętać dwie kwestie:

Musi to być eksport domyślny: dzięki temu Next.js pobiera komponent strony z pliku.
Nazwa komponentu zależy od ciebie. About, AboutPage, Whatever: adres URL pochodzi z folderu, nigdy z funkcji.

Chcesz też mieć /about/team? Utwórz app/about/team/ i dodaj tam kolejny plik page.jsx. Wraz z rozwojem witryny wzorzec się nie zmienia — na tym właśnie polega jego zaleta.

Wyzwanie

Początkujący

Aplikacja ma stronę główną. Dodaj do niej stronę z informacjami.

Uzupełnij plik app/about/page.jsx.
Wyeksportuj z niego komponent jako domyślny.
Musi zwracać element <h1> z wartością id="about-title" i dokładnym tekstem About us.

Pozostaw app/page.jsx bez zmian: testy odwiedzają oba adresy URL.

Spróbuj swoich sił

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}