Dynamic Routes in Next.js

In this tutorial, you will create dynamic routes in Next.js

What are Dynamic Routes?

Dynamic routes in Next.js allow you to create pages where the URL contains variables like ID, slugs, or usernames.

Note:

  1. Dynamic route files use bracket notation [ ] .
  2. Dynamic routes capture values from the URL.

app/products/[id]/page.js

Example of a dynamic route URL


/products/20

Create a Dynamic Route

Step 1: Firstly, create a folder structure for a dynamic route.


app/products/[id]/page.js

Step 2: Create a function in the route.js file.


export default function ProductPage({ params }) {
  return (
    <div>
      <h1>Product ID: {params.id}</h1>
    </div>
  );
}

Note: [id] routes make content dynamic and scalable without manually creating pages.

Dynamic Routes in Next.js – Questions and Answers

Q 1: What are dynamic routes?
Ans: Routes created using variable path segments.
Q 2: How are dynamic routes defined?
Ans: Using square brackets like [id].
Q 3: How are route parameters accessed?
Ans: Via params.
Q 4: Are dynamic routes SEO-friendly?
Ans: Yes.
Q 5: Can dynamic routes be statically generated?
Ans: Yes, using generateStaticParams().

Dynamic Routes in Next.js – Objective Questions (MCQs)

Q1. Dynamic routes are created using:





Q2. Which URL matches app/blog/[slug]/page.js?





Q3. Which hook is used to access dynamic params in App Router?





Q4. Dynamic routes help to:





Q5. Dynamic routes are mainly used for:





Related Dynamic Routes in Next.js Topics