Вложенные маршруты

Часть раздела Основы Next.js путешествия по React на Coddy — урок 6 из 47.

Теперь сделайте это. Добавление страницы в приложение Next.js — это два шага: создайте папку и поместите в неё page.jsx.

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

Вот и весь файл. Никакой таблицы маршрутов для обновления, никаких import где-либо ещё, ничего не нужно перезапускать. Компонент — это обычный React. Единственное, что превратило его в URL — это то, куда вы его сохранили.

Две детали, которые стоит запомнить:

Это должен быть default export: именно так Next.js выбирает компонент страницы из файла.
Имя компонента остаётся за вами. About, AboutPage, Whatever: URL берется из папки, а не из функции.

Хотите также /about/team? Создайте app/about/team/ и положите туда ещё один page.jsx. Этот паттерн не меняется по мере роста сайта, и в этом вся суть.

Задание

Новичок

У приложения есть главная страница. Добавьте страницу «О нас».

Создайте файл app/about/page.jsx.
Экспортируйте из него компонент по умолчанию (default).
Он должен возвращать <h1> с id="about-title" и точным текстом About us.

Оставьте app/page.jsx без изменений: тесты проверяют оба URL-адреса.

Попробуйте сами

import './globals.css';

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

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