Dynamic Routes in Next.js

Dynamic routes let you create pages from dynamic data like blog posts, products, or user profiles.

Creating a Dynamic Route

Create a folder with square brackets in the app directory:

app/blog/[slug]/page.tsx

Accessing Parameters

In Next.js 15+, params is a Promise that must be awaited:

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  return <h1>Post: {slug}</h1>;
}

Static Generation with generateStaticParams

Pre-render all dynamic routes at build time:

export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

This generates a static HTML page for each slug, giving you the best possible performance.