What is Dynamic Routes?

Dynamic Routes in Frontend Accelerator enable you to create pages that match variable URL segments. Using bracket notation in folder names, you can build flexible routing patterns for user profiles, blog posts, product pages, and more.

Dynamic Route Patterns:

app/
  blog/
    [slug]/
      page.tsx  // Matches /blog/any-post-title
  products/
    [id]/
      page.tsx  // Matches /products/123
  [username]/
    page.tsx  // Matches /john, /jane, etc.

Accessing Route Parameters:

export default async function BlogPost(
  { params }: { params: { slug: string } }
) {
  const post = await prisma.post.findUnique({
    where: { slug: params.slug }
  });
  return <Article post={post} />;
}

Catch-All Routes:

app/
  docs/
    [...slug]/
      page.tsx  // Matches /docs/a, /docs/a/b, /docs/a/b/c

Static Generation with Dynamic Routes:

export async function generateStaticParams() {
  const posts = await prisma.post.findMany();
  return posts.map((post) => ({ slug: post.slug }));
}

Key Benefits:

• Flexible routing: Single page component handles infinite URL variations
• Type-safe params: TypeScript ensures correct parameter usage
• SEO friendly: Each dynamic route gets its own URL
• Static generation: Pre-render dynamic routes at build time

AI-Friendly: The bracket notation [param] clearly signals dynamic segments. AI tools understand the routing structure, can suggest appropriate parameter names, generate generateStaticParams implementations, and validate that params are accessed correctly with proper TypeScript types.