@fokit

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

Подскажите как правильно реализовать подобную структуру роутинга 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.
если по коду вернулся товар - отрисовываем компонент товара, в противном случае компонент раздела

мой вариант выглядит крайне костыльно, уверен, есть более лаконичное решение, но сам не могу до него додуматься
  • Вопрос задан
  • 293 просмотра
Решения вопроса 2
уверен, есть более лаконичное решение
Нет, магического способа «сделать хорошо» не существует.
Ответ написан
Комментировать
KataevAS
@KataevAS
Чтобы не делать лишних запросов к бд, можно прийти к соглашению в названии разделов (если это возможно в рамках проекта) и паттерна URL для товаров, например:
/shop/section1/section2/section3/product-productName
В таком случае достаточно проверить на соответствие паттерну продукта последний элемент массива, если он не соответствует, то это раздел, если соответствует, то товар. Но не одно из названий разделов, не должно иметь в себе оговорённый паттерн.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы