Как реализовать структу для каталога 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.
если по коду вернулся товар - отрисовываем компонент товара, в противном случае компонент раздела
мой вариант выглядит крайне костыльно, уверен, есть более лаконичное решение, но сам не могу до него додуматься
Дополнительно:
уверен, есть более лаконичное решение
Нет, магического способа «сделать хорошо» не существует.
Чтобы не делать лишних запросов к бд, можно прийти к соглашению в названии разделов (если это возможно в рамках проекта) и паттерна URL для товаров, например:
/shop/section1/section2/section3/product-productName
В таком случае достаточно проверить на соответствие паттерну продукта последний элемент массива, если он не соответствует, то это раздел, если соответствует, то товар. Но не одно из названий разделов, не должно иметь в себе оговорённый паттерн.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания структуры каталога в проекте на Next.js, вам необходимо следовать определенным принципам организации файлов и папок. Вот пример, как можно организовать структуру каталога для проекта на Next.js:
1. **pages**: В этой папке должны содержаться все страницы вашего приложения. Каждый файл в этой папке будет представлять собой отдельную страницу. Например, `index.js` будет корневой страницей вашего приложения.
2. **components**: В этой папке вы можете создавать компоненты, которые будут использоваться на различных страницах вашего приложения. Это поможет вам избежать дублирования кода и сделает ваш проект более модульным.
3. **styles**: Здесь вы можете хранить файлы со стилями для вашего приложения. Вы можете использовать CSS, SCSS или любой другой препроцессор, который вам нравится.
4. **public**: В этой папке вы можете хранить статические файлы, такие как изображения, шрифты и другие ресурсы, которые не требуют обработки.
5. **api**: Если ваше приложение использует API, вы можете создать папку `api` для хранения файлов, связанных с взаимодействием с API.
Пример структуры каталога:
```
- pages
- index.js
- about.js
- components
- Header.js
- Footer.js
- styles
- main.css
- public
- images
- logo.png
- api
- api.js
```
Чтобы использовать синтаксис для кода на языке программирования PHP, вы можете обернуть его в тег `
`. Например: ```html <pre lang="php">
```
Таким образом, следуя этой структуре каталога и используя тег `