Next.js 15 Tutorial - 6 - Nested Routes

Как настроить вложенные маршруты в NEX.js?

Введение в маршрутизацию на основе файлов

• В предыдущих частях мы рассмотрели систему маршрутизации на основе файлов в NEX.js, где файлы page.tsx в папке приложения соответствуют корневому домену.

• Файлы page.tsx в подпапках создают маршруты, соответствующие именам их папок, например, /about и /profile.

Настройка блога с вложенными маршрутами

• Для сценария 3 необходимо создать страницу, которая будет отображаться при посещении localhost:3000/blog.

• Также нужно обработать два дополнительных маршрута: localhost:3000/blog/first и localhost:3000/blog/second.

Создание структуры папок

• Мы создаем папку blog внутри директории приложения и добавляем файл page.tsx, который экспортирует простой React-компонент.

• Компонент возвращает заголовок H1 с текстом "My Blog". После сохранения файла можно проверить страницу по адресу localhost:3000/blog.

Реализация вложенных страниц

• Для создания вложенных маршрутов создаем две новые папки внутри папки blog: first и second.

• В каждой из этих папок создаем файл page.tsx, который экспортирует свои компоненты. Первый компонент возвращает заголовок H1 "First Blog Post", а второй - "Second Blog Post".

Проверка работы вложенных маршрутов

• После сохранения файлов можно перейти по адресам /blog/first и /blog/second, чтобы увидеть рендеринг соответствующих страниц блога.