02 / 10

How to create a dynamic route segment ?

Difficulty: 5/10
dynamic routing, file-system routing, catch‑all routes

A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug].

Dynamic Segments are passed as the params prop to
  1. 1

    layout

  2. 2

    page

  3. 3

    route

  4. 4

    generateMetadata functions.

Scenario Questions

0-2 years experience

  1. 1We need a product page that shows details based on product ID. How would you set up the file structure in a Next.js pages directory to handle URLs like /product/123?
  2. 2If you create a file named [slug].js under pages/blog, what URL patterns will it match, and how do you access the slug value inside the component?
  3. 3What does Next.js do when a user navigates to a route that doesn't have a matching dynamic segment file?

2-5 years experience

  1. 1Your team added a feature where a user can view orders by month using URLs like /orders/2023/04, but the page isn’t rendering. Walk me through how you’d implement the route and debug the issue.
  2. 2Explain the trade‑offs between using a single [...slug].js catch‑all route versus nested [year]/[month].js files for the orders example.
  3. 3You need to pre‑fetch data for a dynamic product page using getStaticProps. How does Next.js know which paths to generate, and what would you do if the list of products changes frequently?

5-8 years experience

  1. 1Our site serves millions of product pages and we want optimal caching and ISR. How would you design the dynamic route and data‑fetching strategy to balance build time, freshness, and CDN caching?
  2. 2A colleague introduced a dynamic route that reads query parameters directly from router.query inside useEffect, causing hydration mismatches. How would you refactor it to avoid the mismatch?
  3. 3We are migrating from the pages router to the new app router. What considerations do you have for preserving dynamic segment behavior and route‑segment naming conventions?

8+ years experience

  1. 1Across several micro‑frontends we need a consistent convention for dynamic routes, including versioning and fallback handling. How would you define a cross‑team strategy and what tooling or linting would you put in place?
  2. 2Our legacy monolith uses server‑side routing. We plan to gradually replace it with Next.js dynamic routes. What architectural steps and migration plan would you propose to minimize risk and maintain SEO?
  3. 3Discuss the impact of dynamic route segment naming on edge‑runtime functions and how you’d structure the codebase to support edge caching at scale.

Follow-up Questions

  • What happens if the dynamic segment contains a dot or special character?
  • How does the fallback option affect the user experience?
  • Can you explain the difference between getStaticPaths and getServerSideProps for dynamic routes?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.