Mastering Dynamic Routes in Next.js: [id].js & App Router Guide (2025)

Mastering Dynamic Routes in Next.js with [id].js (2025 Edition)

Dynamic routes let you map a single React page to many URLs that share the same “shape”—think /blog/first-post, /blog/second-post, or /users/alice. In Next .js, you create these flexible paths just by putting a segment in square brackets ([ ]) inside the file-system router. This guide walks through everything you need to know in 2025, covering both the classic Pages Router and the newer App Router introduced in v13+, with tips for pre-rendering, data fetching, SEO, and common gotchas.

1. Quick refresher: file-system routing

Next.js turns folders & files into URL segments automatically.
pages/about.js → /about | pages/blog/first-post.js → /blog/first-post
When you don’t know the segment name until runtime, you wrap it in brackets.

2. Dynamic routes in the Pages Router

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const { query } = useRouter();          // { id: '123' }
  return <h1>Post {query.id}</h1>;
}

Pre-rendering with getStaticPaths + getStaticProps

• If the list of paths is finite (e.g. blog posts), export getStaticPaths to tell Next-.js which IDs to pre-render at build time and use getStaticProps to fetch data for each. Next.js

• fallback lets you choose what happens for paths not in that list (false, 'blocking', or true).

• Because these are generated to plain HTML/JSON, they’re CDN-friendly and great for SEO.

Catch-all segments

• [...slug].js captures /a/b/c as slug: ['a','b','c'].

• [[...slug]].js does the same and matches the parent path (/). Next.js

3. Dynamic routes in the App Router (Next.js 13-15)

The App Router uses folders instead of files for segments:

app
└── blog
    └── [slug]          // folder = dynamic segment
        └── page.js

// app/blog/[slug]/page.tsx
export default async function Page({ params }: { params: { slug: string } }) {
  return <h1>Post {params.slug}</h1>;
}

Pre-rendering with generateStaticParams

generateStaticParams replaces getStaticPaths in the App Router. Return an array of param objects, and Next.js will statically build one page per item: Next.js

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((p) => ({ slug: p.slug }));
}

• For paths you don’t pre-generate, control runtime behavior with the dynamicParams route-segment option.

• Catch-all ([...slug]) and optional catch-all ([[...slug]]) work the same here too. Next.js

4. Linking between dynamic pages

Whether you’re in pages/ or app/, use <Link> and provide the full href:

import Link from 'next/link';
<Link href={`/posts/${id}`}>Read more</Link>

Next.js automatically prefetches the code bundle for that route on hover/viewport, giving near-instant navigation.

5. API routes with dynamic parameters

Dynamic file names work in pages/api/ (Pages Router) and app/api/ (App Router route handlers):

// app/api/posts/[postId]/route.js   (App Router, Node.js context)
export async function GET(request, { params }) {
  return Response.json({ id: params.postId });
}

In the Pages Router you’d create pages/api/posts/[postId].js and export default functions for the HTTP verbs.

6. SEO & performance checklist

1. Prefer static generation (getStaticPaths / generateStaticParams) whenever the data can be cached publicly.

2. When data is user-specific or changes often, use Server-Side Rendering (getServerSideProps) or dynamic = 'force-dynamic'` in App Router.

3. Don’t forget to set canonical URLs and meta tags—dynamic routes are still SSR pages, so you can compute SEO metadata on the server.

7. Common pitfalls & debugging tips

8. Conclusion

With just a pair of square brackets, you unlock powerful, SEO-friendly routing that scales from ten pages to ten million. Use [id].js (Pages Router) or [id]/page.js (App Router) for the basic pattern, sprinkle in getStaticPaths or generateStaticParams to pre-render, and you’re production-ready. Happy routing! 🚀

FAQs: Dynamic Routes in Next .js ([id].js & App Router folders)