Loading auth...
Medium15 minNext.js Fundamentals
UpdatedAug 3, 2026
Edit

Next.js Dynamic Routes & `generateStaticParams`

CONCEPTS:Next.js App Router

Question Variations

  • "How do you pre-render dynamic routes in the App Router?"
  • "What is the difference between `generateStaticParams` and `getStaticPaths`?"
  • "How do you handle a scenario where a user visits a dynamic route that wasn't generated at build time?"
  • "What is a catch-all route and when would you use one?"

Why This Is Asked

Most real-world applications require dynamic routes (e.g., /blog/[slug]). Interviewers want to know if you understand how to pre-render these pages at build time using generateStaticParams (the App Router’s equivalent of getStaticPaths) and how dynamicParams affects fallback behavior.

Key Concepts

  • Dynamic Segments: The [slug] folder naming convention.
  • generateStaticParams: How to provide a list of routes to be pre-rendered at build time.
  • dynamicParams: Controlling what happens when a route is visited that wasn’t generated at build time (equivalent to fallback in Pages Router).
  • Catch-all Routes: Using [...slug] and [[...slug]].

Question Variations

  • “How do you pre-render dynamic routes in the App Router?”
  • “What is the difference between generateStaticParams and getStaticPaths?”
  • “How do you handle a scenario where a user visits a dynamic route that wasn’t generated at build time?”
  • “What is a catch-all route and when would you use one?”

Answers by Technology

+ Add Variant
Next.jsImprove this answer ✏️

Expected Answer

In the Next.js App Router, dynamic routes are created by wrapping a folder name in brackets, like app/blog/[slug]/page.tsx.

To pre-render these routes at build time (Static Site Generation), you use the generateStaticParams function:

  1. generateStaticParams: An async function that returns an array of objects, where each object represents the route parameters.
  2. dynamicParams: A configuration option (boolean). If true (default), segments not generated at build time are generated on-demand (SSR). If false, they return a 404.

Catch-all Segments:

  • [...slug]: Matches /blog/a, /blog/a/b, but NOT /blog.
  • [[...slug]] (Optional Catch-all): Matches /blog, /blog/a, and /blog/a/b.

Why It Matters

Efficiently handling dynamic routes is key to balancing build times and user experience. Pre-rendering the most popular pages makes them instant, while allowing others to be generated on-demand keeps build times manageable for large sites.

Example Code

Basic generateStaticParams

TypeScript

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then((res) => res.json());

  return posts.map((post: any) => ({
    id: post.id.toString(),
  }));
}

export default function PostPage({ params }: { params: { id: string } }) {
  return <div>Post ID: {params.id}</div>;
}

JavaScript

// app/posts/[id]/page.js
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then((res) => res.json());

  return posts.map((post) => ({
    id: post.id.toString(),
  }));
}

export default function PostPage({ params }) {
  return <div>Post ID: {params.id}</div>;
}

Catch-all Route

// app/shop/[[...slug]]/page.tsx
export default function Page({ params }: { params: { slug?: string[] } }) {
  // params.slug will be undefined for /shop
  // params.slug will be ['electronics', 'phones'] for /shop/electronics/phones
  return <div>...</div>;
}

Common Mistakes

  • Returning numbers instead of strings: In generateStaticParams, all parameter values must be strings.
  • Forgetting dynamicParams = false for strictly static sites: If you want to ensure only a specific set of pages exists, you must opt-out of on-demand generation.
  • Over-using catch-all routes: This can make your routing logic complex and harder to debug. Use them only when the structure is truly nested or unknown.

Follow-up Questions

  • Can you use generateStaticParams with a parent layout? (Answer: Yes. Parameters generated in a layout are passed down to child layouts and pages).
  • How does generateStaticParams interact with fetch caching? (Answer: If you use the same fetch call in generateStaticParams and the Page, Next.js will memoize the request so it’s only called once).

References