Подскажите как правильно реализовать подобную структуру роутинга nextjs
Нужно
/shop/ - страница с разделами каталога
/shop/section1/ - страница с товарами раздела1
/shop/section1/section2/ - страница с товарами раздела 2 (при этом раздел 2 - дочерний для раздела 1)
/shop/section1/section2/...неограниченное количество вложенных разделов/product - страница товара
возможно ли как-то лаконично реализовать такую структуру, использую app роутер
до чего дошел сам:
-app
--shop
--page.ts
---[...section]
---page.ts
такая компоновка позволяет сделать неограниченное количество вложенных разделов, но как добавить в эту структуру страницу товара?
единственный вариант, который вижу сам:
в [...sections]/pages.ts по условию вызывать разные компоненты, предварительно делая запрос на бэк по последнему элементу в массиве params.
если по коду вернулся товар - отрисовываем компонент товара, в противном случае компонент раздела
мой вариант выглядит крайне костыльно, уверен, есть более лаконичное решение, но сам не могу до него додуматься
Чтобы не делать лишних запросов к бд, можно прийти к соглашению в названии разделов (если это возможно в рамках проекта) и паттерна URL для товаров, например:
/shop/section1/section2/section3/product-productName
В таком случае достаточно проверить на соответствие паттерну продукта последний элемент массива, если он не соответствует, то это раздел, если соответствует, то товар. Но не одно из названий разделов, не должно иметь в себе оговорённый паттерн.
Простой
Средний
