LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1315 min read

Dynamic Routes

Build routes with parameters — like /blog/[slug] — using square-bracket folder names.

What Is a Dynamic Route?

Wrapping a folder name in square brackets, like [slug], creates a dynamic segment — it matches any value in that position of the URL, and that value is passed into your page as a parameter.

app/blog/[slug]/page.tsx


/blog/hello-world   → params.slug === "hello-world"
/blog/nextjs-tips    → params.slug === "nextjs-tips"

Reading Route Parameters

Every page and layout under a dynamic segment receives a params prop containing the matched values.

// app/blog/[slug]/page.tsx
export default async function BlogPostPage({ params }) {
  const { slug } = params;
  const post = await getPostBySlug(slug);


  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Multiple Dynamic Segments

A route can combine several dynamic segments, each becoming its own key on params.

app/shop/[category]/[productId]/page.tsx


/shop/shoes/42   → params = { category: "shoes", productId: "42" }

generateStaticParams

For dynamic routes you want pre-rendered at build time rather than on every request, export a generateStaticParams function that returns the list of param values to build ahead of time.

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}
Covered in Depth Later

generateStaticParams is central to Static Site Generation, which gets its own dedicated lesson later in this course.

Common Beginner Mistakes

Forgetting params values are always strings

Even a segment like [id] arrives as a string ("42"), not a number — convert it explicitly before using it in numeric comparisons.

Naming folders inconsistently, e.g. [slug] and [id] at the same level

Next.js requires all parallel dynamic segments at the same level to share the same parameter name.

FAQs

You can call the notFound() function inside the page to render the nearest not-found.tsx and return a proper 404.

Yes — any layout, page, or Route Handler within a dynamic segment receives the same params prop.

Summary

Square-bracket folder names turn a segment of the URL into data your page can read. Next, you'll learn how catch-all segments match multiple path parts at once.

Next Lesson →

Catch-all Segments