Next.js 15 Tutorial - 7 - Dynamic Routes
Введение в динамические маршруты
Создание структуры для продуктов
- Мы изучили вложенные маршруты, создав папку Blog с подкаталогами, каждый из которых имеет свою страницу. Однако для сложных приложений это не всегда практично.
- При посещении страницы SL products пользователь видит список из трех продуктов, а при переходе к конкретному продукту по ID отображаются его детали.
Реализация списка продуктов
- Создаем папку products и файл page.tsx, который будет содержать компонент React для отображения списка продуктов.
- На localhost 3000/SL products мы увидим наш список продуктов — это первый этап завершен.
Проблемы с созданием отдельных папок
- Можно было бы создать отдельные папки для каждого продукта (например, product ID 1, product ID 2), но это приведет к проблемам с обслуживанием при большом количестве продуктов.
Динамические сегменты маршрутов
- Вместо создания множества папок мы создаем специальную папку с квадратными скобками: [productID]. Это позволяет сделать маршруты динамическими и гибкими.
- Теперь при переходе на SL/products/1 или SL/products/100 будут отображаться соответствующие детали продукта благодаря динамическому сегменту.
Получение параметров маршрута
- Каждый маршрут получает параметры через пропс params. Мы можем использовать async/await для получения значений динамических сегментов.
- Внутри компонента мы получаем productID из props и отображаем его в интерфейсе. Это позволяет видеть детали конкретного продукта.
Итоги реализации сценария 4
- Мы создали структуру с квадратными скобками и добавили page.tsx внутри нее. Теперь Next.js сопоставляет URL со страницей внутри этой структуры.