Недавно я работал над веб-приложением, которое я создавал в NextJs наряду с множеством других технологий (с помощью create-t3-app). Однако я столкнулся с проблемой, которую не смог легко решить с помощью гугления в течение 15/20 минут. Поэтому я решил поделиться своей проблемой и ее решением, что, надеюсь, поможет другим не проходить через бесконечный просмотр результатов stackoverflow, как это сделал я.
Проблема:
Я хочу иметь несколько вложенных динамических маршрутов в моем приложении NextJs.
Чтобы я мог строить такие маршруты, как:
'/product-catalog/123/product/1'
Теперь, прежде чем я продолжу свое решение, я хотел бы добавить, что базовая динамическая маршрутизация очень проста.
Все, что вам нужно сделать, это создать структуру папок, как показано ниже:
- pages/
-- product-catalog/
--- [productcatalogid].tsx
Это позволит создать маршрут:
/product-catalog/123
(123 being the productcatalogid parameter)
Однако перемещение по нескольким вложенным маршрутам недоступно по тому же принципу. Т.е. структура папок выглядит следующим образом:
- pages/
-- product-catalog/
--- [productcatalogid].tsx
---- product/
----- [productid].tsx
Вышеописанное просто приведет к 404 при каждом запросе страницы.
Решение:
Просто реализовать структуру папок следующим образом:
- pages/
-- product-catalog/
--- index.tsx
---- product/
----- [productid].tsx
Кажется, это отлично работает при работе с несколькими динамическими маршрутами.
Надеюсь, это помогло! Для получения дополнительной информации смотрите видео, на котором я нашел решение: https://www.youtube.com/watch?v=nfAxNTmme64.