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

Часть раздела Основы 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. По мере роста сайта структура не меняется — в этом и состоит смысл.

Задание

Новичок

У приложения есть домашняя страница. Добавь для него страницу about.

Заполни файл app/about/page.jsx.
Сделай из него компонент с экспортом по умолчанию.
Он должен возвращать <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>
    );
}