🔀 Dynamic Routes in Next.js v15 – Building Pages Like /blog/post-1, /blog/post-2, and Beyond

By now, you’ve learned how to create pages and subpages in Next.js using the app/ folder and page.js files.

But what if you’re building something like a blog with many blog posts?

Do you really need to create a new folder and file for every blog post?

Nope! 🎉
That’s where dynamic routes come in.

Let’s explore how they work in Next.js v15 👇

---

📘 The Problem: Static Folders Don't Scale

Let’s say you want to build this:

/blog/post-1  
/blog/post-2  
/blog/post-3  
...

You might think:
“I’ll just create folders for each post…”

app/
├── blog/
│   ├── post-1/
│   │   └── page.js
│   ├── post-2/
│   │   └── page.js

🚨 But this is not scalable!

What if you have hundreds of posts, or they come from a database?

You need a single reusable route — and that’s where dynamic routes shine.

---

🧩 Solution: Dynamic Folder with Square Brackets

To create a dynamic route in Next.js, use square brackets in your folder name.

app/
├── blog/
│   ├── [slug]/
│   │   └── page.js

• [slug] is just a placeholder name (you can name it anything)

• page.js renders the same layout for every /blog/:slug route

✅ This single route now handles:

• /blog/post-1

• /blog/post-2

• /blog/my-first-article

• /blog/anything-you-want

---

🛠️ Step-by-Step: Create Dynamic Blog Posts

1. Create the Main Blog Page

app/blog/page.js

import Link from 'next/link';

export default function BlogPage() {
  return (
    <main>
      <h1>The Blog</h1>
      <p>
        <Link href="/blog/post-1">Read Post 1</Link>
      </p>
      <p>
        <Link href="/blog/post-2">Read Post 2</Link>
      </p>
    </main>
  );
}

2. Create the Dynamic Route

app/blog/[slug]/page.js

export default function BlogPostPage({ params }) {
  return (
    <main>
      <h1>Blog Post</h1>
      <p>You are viewing: {params.slug}</p>
    </main>
  );
}

✅ params.slug is automatically passed by Next.js
✅ It contains whatever value is in the URL (post-1, post-2, etc.)

---

🤯 How Does This Work?

Next.js looks at your folder like this:

app/blog/[slug]/page.js

And understands that [slug] is a dynamic segment.

• If you go to /blog/hello-world → params.slug = "hello-world"

• If you go to /blog/post-23 → params.slug = "post-23"

---

🧠 Where Does params Come From?

You might wonder:

"Who gives us params as a prop?"

Great question!

• You don’t pass it manually

• Next.js automatically provides it when rendering a dynamic route

• Inside your component, you can access it directly using destructuring:

export default function BlogPostPage({ params }) {
  return <p>{params.slug}</p>;
}

---

🧵 Real-World Use: Fetching Content by Slug

In real apps, you'd use params.slug to fetch blog post data from a database or CMS:

const postData = await fetchPostBySlug(params.slug);

Then render the title, content, and author dynamically.

✅ One route
✅ Infinite pages
✅ No extra code or folders for every post

---

📌 Recap: Dynamic Routes in a Nutshell