VIDEO
HIGHLIGHT
Log InSign up
Next.js 15 Tutorial - 8 - Nested Dynamic Routes
SummaryTranscriptChat

Next.js 15 Tutorial - 8 - Nested Dynamic Routes

Динамические маршруты и вложенные динамические маршруты

Введение в вложенные динамические маршруты

  • Обсуждение важности работы с несколькими динамическими сегментами в маршрутах, особенно в реальных приложениях.
  • Пример сценария: отображение деталей продукта по адресу /products/SL1 и первого отзыва по адресу /products/SL1/reviews/1.

Настройка вложенных маршрутов

  • Для настройки вложенных маршрутов необходимо создать папку reviews внутри папки с идентификатором продукта, что приведет к пути /products/[productId]/reviews.
  • Создание еще одной папки для динамического идентификатора отзыва внутри папки reviews, названной [reviewId], и добавление файла page.tsx.

Определение компонента отзыва

  • Определение React-компонента, который показывает как идентификатор продукта, так и идентификатор отзыва. Использование асинхронной функции для экспорта компонента.
  • Деструктуризация параметров productId и reviewId, возвращая их в компоненте.

Проверка реализации

  • Переход на адрес localhost:3000/products/1/reviews/1 для проверки корректности отображения первого отзыва для первого продукта.
  • Возможность изменения URL (например, на продукт 100 и отзыв 5), чтобы увидеть обновление идентификаторов в реальном времени.

Ключевые выводы о вложенных динамических маршрутах

  • Визуализация структуры вложенных динамических маршрутов: файл page.tsx соответствует корневой странице, а структура папок отражает путь к конкретным элементам.
Playlists: Next.js 15 Tutorial - Beginner to Advanced
Video description

Mastering Nested Dynamic Routes in Next.js In this video, we explore the concept of nested dynamic routes within Next.js. You'll learn how to handle multiple dynamic segments in your routes using real-world examples. We start by setting up a dynamic route to display product details and advance to creating nested routes for product reviews. By the end, you'll be able to navigate URLs like /products/1/reviews/1 and see dynamic content update in real-time. Additionally, there's an exercise for implementing a review listing page for each product. 📔 GitHub Repo - https://github.com/gopinav/Next.js-15-Tutorials 📘 Frontend Interview Course - https://learn.codevolution.dev/ 💖 Support UPI - https://support.codevolution.dev/ 💖 Support Paypal - https://www.paypal.me/Codevolution 💾 Github - https://github.com/gopinav 📱 Follow Codevolution + Twitter - https://twitter.com/CodevolutionWeb + Facebook - https://www.facebook.com/codevolutionweb 📫 Business - codevolution.business@gmail.com 00:00 Introduction to Nested Dynamic Routes 00:47 Setting Up Nested Folders for Reviews 01:20 Creating the Review Component 02:08 Testing the Nested Routes 02:34 Visualizing Nested Dynamic Routes 03:16 Exercise and Conclusion