Next.js 15 Tutorial - 8 - Nested Dynamic Routes

Nested Dynamic Routes in Real-World Applications

Introduction to Nested Dynamic Routes

• The discussion begins with the importance of understanding nested dynamic routes, particularly in scenarios where multiple dynamic segments are needed.

• An example is introduced: displaying product details at /products/SL1 and the first review for that product at /products/SL1/reviews/1.

Setting Up Nested Routes

• To set up these routes using the app router, a folder structure based on dynamic segments is necessary.

• Inside the product ID folder, a reviews folder is created to facilitate access to /products/[productId]/reviews.

• A further step involves creating another folder named [reviewId] within the reviews folder, which will hold a page.tsx file.

Implementing Route Parameters

• The component defined in page.tsx, named ProductReview, exports an asynchronous function that handles both product ID and review ID as parameters.

• By destructuring these parameters from a promise, it allows for real-time updates when navigating through different products and reviews.

Testing the Implementation

• Users are encouraged to navigate to specific URLs (e.g., /products/1/reviews/1) to see their implementation in action.

• Changing IDs dynamically reflects updated content in real time, demonstrating successful implementation of nested dynamic routes.

Key Takeaways and Visualization

• A visualization illustrates how each part of the route corresponds with its respective page structure within folders.

• The key takeaway emphasizes that nested dynamic routes can be effectively created by utilizing dynamic segments with appropriately structured folders.

Exercise Prompt