Introduction to Dynamic Routes in Next.js for Blog Posts

Previously in this course, we covered static page routing, where we built fixed pages like "About" or "Contact." While static routes work for unchanging content, they fall apart when you have hundreds of blog posts. You can't create a new folder for every single article.

In this lesson, we introduce dynamic routing, which allows you to create a single template that adapts its content based on the URL.

The Concept of Dynamic Routing

In Next.js, dynamic routing is achieved through the filesystem. By wrapping a folder name in square brackets—like [slug]—you tell the App Router to treat that segment as a variable rather than a literal path.

When a user visits /blog/my-first-post, the segment my-first-post is captured as a dynamic parameter. Inside your code, you can access this value and use it to fetch the specific data for that post.

Folder Structure

To implement this for our blog project, we need to create a nested folder structure under the app directory.

1. Create an app/blog folder (if it doesn't exist).
2. Inside blog, create a folder named [slug].
3. Inside [slug], create a page.js file.

Your structure should look like this:

TEXT
app/
  blog/
    page.js        <-- The blog index page
    [slug]/
      page.js      <-- The dynamic blog post template

Accessing Dynamic Parameters

When you define a dynamic route, Next.js automatically passes a params object to your page.js component. This object contains the key defined in your folder name.

If your folder is named [slug], the parameter key will be slug. Here is how you access it in your component:

JAVASCRIPT
// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  // We use the slug to identify which post to render
  const { slug } = params;

  return (
    <article className="max-w-prose mx-auto py-10">
      <h1 className="text-4xl font-bold">Post: {slug}</h1>
      <p className="mt-4">You are currently viewing the content for: {slug}</p>
    </article>
  );
}

Why "slug"?

While we use slug by convention for clean, human-readable URLs, you can use any name you want. If you named your folder [id], you would access params.id. Just ensure the folder name matches the property name you destructure from params.

Hands-on Exercise: Build Your Dynamic Template

1. Navigate to your project folder.
2. Create the app/blog/[slug]/page.js file as shown above.
3. Start your development server using npm run dev.
4. Navigate to http://localhost:3000/blog/hello-world. You should see "Post: hello-world" on the screen.
5. Try changing the URL to http://localhost:3000/blog/my-awesome-tutorial. The page will update automatically to reflect the new dynamic parameter.

Common Pitfalls

• Forgetting to destructure params: Remember that params is an object. Accessing it as params.slug is correct, but destructuring it as { params } in the component arguments is the standard modern practice.
• Confusing folder names with routes: Remember that the folder [slug] is not part of the final URL. If you visit /blog/my-post, Next.js maps my-post to the slug variable. You do not include the brackets in your browser URL.
• Async/Await: Note that in newer versions of Next.js, params may be accessed asynchronously in some server-side contexts. If you encounter issues, ensure you are treating the params prop correctly within your Server Component.

FAQ

Q: Can I have multiple dynamic segments? A: Yes! You can nest folders like app/blog/[category]/[slug]/page.js. Your params object would then contain both { category, slug }.

Q: Does this work for static sites? A: Yes. Next.js is highly flexible. While we are using dynamic routes, you can still pre-render these pages at build time using a function called generateStaticParams, which we will cover in a later lesson.

Q: How do I handle 404s for invalid slugs? A: You can use the notFound() function inside your component to trigger a 404 page if your database query returns no data for a given slug.

Recap

Dynamic routing is the backbone of any content-heavy application. By using the [slug] folder convention, you've moved from static, hard-coded pages to a powerful, data-driven architecture. You now know how to capture URL parameters and inject them into your application logic.

Up next: Generating Dynamic Metadata — we'll learn how to make each of these dynamic pages SEO-friendly by generating unique titles and descriptions on the fly.