Next.js In-Depth
Module F-5·13 min read

Slug segments, catch-all routes, async params in Next.js 15, generateStaticParams, and the full suite of client-side navigation hooks including the new useLinkStatus.

Written by Jatin Jain Saraf · Architect of SupraScan

F-5 — Dynamic Routes, Params, and Navigation Hooks

Who this is for: Developers who understand Server Components and basic data fetching from F-3 and F-4, and now need to work with URL parameters, statically pre-render dynamic content, and navigate programmatically from Client Components. This module covers the full routing toolkit — including the navigation hooks that Next.js 15 and 16 extended significantly.

Dynamic Segments: The Mechanics

A folder with square brackets creates a dynamic segment. Every page inside that folder receives the matched value as a params prop:

app/
├── products/
│   └── [id]/
│       └── page.tsx    ← /products/abc123, /products/xyz789
├── blog/
│   └── [slug]/
│       └── page.tsx    ← /blog/my-post-title
└── [locale]/
    └── page.tsx        ← /en, /fr, /de (i18n root)

The folder name — without brackets — becomes the key in params:

// app/products/[id]/page.tsx
 
interface PageProps {
  params: Promise<{ id: string }>;
}
 
export default async function ProductPage({ params }: PageProps) {
  const { id } = await params; // id = "abc123" for /products/abc123
  const product = await getProduct(id);
  return <ProductDetail product={product} />;
}

In Next.js 15+, params is a Promise. Always await it. If you're reading legacy code from Next.js 14, you'll see synchronous destructuring — that still works during the Next.js 15 transition period, but new code should await params.

Nested Dynamic Segments

You can nest dynamic segments. Each folder adds a key to params:

app/
└── users/
    └── [userId]/
        └── posts/
            └── [postId]/
                └── page.tsx    ← /users/42/posts/7
// app/users/[userId]/posts/[postId]/page.tsx
 
interface PageProps {
  params: Promise<{ userId: string; postId: string }>;
}
 
export default async function PostPage({ params }: PageProps) {
  const { userId, postId } = await params;
  const post = await getPost(userId, postId);
  return <PostDetail post={post} />;
}

Deeply nested dynamic routes are common in content-heavy applications. Keep in mind that each level of nesting is a separate layout boundary — you can have app/users/[userId]/layout.tsx that fetches the user profile once and shares it across all pages under that user's namespace.

Catch-All and Optional Catch-All Segments

Catch-all [...slug] matches one or more path segments and returns them as an array:

app/docs/[...slug]/page.tsx
 
/docs/getting-started       → params.slug = ['getting-started']
/docs/api/authentication    → params.slug = ['api', 'authentication']
/docs/api/rest/endpoints    → params.slug = ['api', 'rest', 'endpoints']
// app/docs/[...slug]/page.tsx
 
interface PageProps {
  params: Promise<{ slug: string[] }>;
}
 
export default async function DocsPage({ params }: PageProps) {
  const { slug } = await params;
  const doc = await getDoc(slug.join('/'));
  if (!doc) notFound();
  return <DocContent doc={doc} />;
}

Note: catch-all does not match the root path /docs — only paths with at least one additional segment.

Optional catch-all [[...slug]] also matches the root:

app/[[...slug]]/page.tsx
 
/           → params.slug = undefined
/about      → params.slug = ['about']
/en/about   → params.slug = ['en', 'about']

Optional catch-all is the pattern for CMS-driven sites where the homepage is content-managed alongside all other pages. The root check is if (!slug).

generateStaticParams — Pre-rendering Dynamic Routes

By default, dynamic routes render on-demand at request time (server-rendered). generateStaticParams tells Next.js to pre-render specific parameter values at build time, generating static HTML files for those paths.

// app/products/[id]/page.tsx
 
export async function generateStaticParams() {
  const products = await db.products.findMany({
    select: { id: true },
    take: 1000, // pre-render top 1000 products
  });
 
  return products.map(p => ({ id: p.id }));
}
 
export default async function ProductPage({ params }: PageProps) {
  const { id } = await params;
  const product = await getProduct(id);
  if (!product) notFound();
  return <ProductDetail product={product} />;
}

At build time, Next.js calls generateStaticParams(), gets the list of IDs, and pre-renders each one. The resulting HTML files are stored and served directly from the CDN for those paths — no server work per request.

What happens to paths not in generateStaticParams? By default, they render on-demand (dynamic rendering). You can change this behaviour:

// Force 404 for any path not pre-rendered at build time
export const dynamicParams = false;
 
// Allow dynamic rendering for paths not pre-rendered (default)
export const dynamicParams = true;

dynamicParams = false is the strict mode. Use it when your entire dataset is known at build time (a fixed set of blog posts, documentation pages) and you want 404s for any URL that isn't in your dataset.

For catch-all routes:

// app/docs/[...slug]/page.tsx
 
export async function generateStaticParams() {
  const docs = await getAllDocs();
 
  return docs.map(doc => ({
    slug: doc.path.split('/'), // e.g. ['api', 'authentication']
  }));
}

Each array entry maps to one path. ['api', 'authentication'] pre-renders /docs/api/authentication.

searchParams — The Query String

Sign in to keep reading

The rest of this module is free — sign in with Google to unlock it and track your progress.

Sign in & Register
PreviousModule F-4: Data Fetching in the App RouterNext Module F-6: Built-in Components — Image, Font, Script, Link, and Form

Discussion

0

Join the discussion

Loading comments...
PortfolioBlog

© 2026 Jatin Jain Saraf (JJS). All rights reserved.