Как создать структуру каталогов в проекте на next.js? 

Как оптимально организовать структуру роутинга в Next.js для следующего использования: 

- /shop/ - страница с категориями каталога
- /shop/section1/ - страница с товарами раздела 1
- /shop/section1/section2/ - страница с товарами раздела 2 (где раздел 2 является подразделом раздела 1)
- /shop/section1/section2/...любое количество вложенных разделов/product - страница товара

Есть ли способ более изящно организовать такую структуру с использованием app роутера? 

На данный момент у меня есть следующий подход:

- app
-- shop
-- page.ts
--- [...section]
--- page.ts

Эта структура позволяет создавать неограниченное количество вложенных разелов, но как можно добавить страницу товара в эту структуру? 
Единственный вариант, который я вижу, это добавление условного оператора в [...sections]/page.ts, который бы вызывал различные компоненты, в зависимости от запроса на бэкенд по последнему элементу в параметрах URL. Если бэкенд вернул товар - показываем компонент товара, иначе - компонент раздела.

Чувствуется, что мое решение костыльное. Я уверен, что возможно более элегантное решение, но сам не могу найти его.
  • 17 марта 2024 г. 7:19
Ответы на вопрос 2 
Для создания более элегантной структуры каталога в проекте на Next.js, можно использовать динамические маршруты и страницы. Например, можно создать следующую структуру каталога:

- pages
-- shop
--- index.tsx
--- [category].tsx
--- [category]/[section].tsx
--- [category]/[section]/[...product].tsx

В данной структуре каждая категория каталога будет представлена страницей с динамическими параметрами для раздела и продукта. Таким образом, при заходе на URL `/shop/category/section/product`, Next.js будет понимать какую страницу нужно отобразить и передавать соответствующие параметры.

Чтобы оптимально организовать роутинг для данной структуры, можно использовать useRouter() из библиотеки Next.js. Например, в файле `[...product].tsx` можно обратиться к useRouter() и в зависимости от полученного параметра отрендерить компонент страницы товара или компонент страницы раздела.

Таким образом, вы можете создать более гибкую и элегантную структуру каталога и оптимально организовать роутинг в проекте на Next.js.
уверен, есть более лаконичное решение
 Нет, магического способа «сделать хорошо» не существует.
Похожие вопросы
    Показать ещё