Adding custom pages or dynamic routes in V0

Why adding pages requires understanding App Router file conventions

V0 generates Next.js App Router projects where routing is entirely file-based — there is no routes configuration file. Each folder under /app that contains a page.tsx becomes a route. Dynamic segments use bracket notation like [id] or [slug], and catch-all routes use [...slug]. This differs from adding individual pages because you need to understand the file conventions to create routes that work with layouts, loading states, and metadata. V0's AI can add pages via prompts, but it sometimes creates them in the wrong location or misses the page.tsx file convention, resulting in 404 errors.

• New directory created under /app but missing the page.tsx file, so the route returns 404
• Dynamic route uses incorrect bracket notation (parentheses or curly braces instead of square brackets)
• Page component is not the default export, which Next.js App Router requires
• Route group folders using (groupName) syntax are confused with dynamic route folders
• V0 generates a page inside the wrong directory level in the /app folder structure

Error messages you might see

Before you start

• A V0 project where you need to add new pages or dynamic routes
• Access to the V0 code editor to create files and directories
• Understanding of URL structure and how it maps to file paths

How to fix it

// No /about route exists
// app/
//   page.tsx (home page only)

// app/about/page.tsx — creates the /about route
export default function AboutPage() {
  return (
    <div className="max-w-4xl mx-auto px-6 py-16">
      <h1 className="text-3xl font-bold">About Us</h1>
      <p className="mt-4 text-muted-foreground">
        Learn more about our team and mission.
      </p>
    </div>
  );
}

// Only a static /blog page exists
// app/blog/page.tsx

// app/blog/[slug]/page.tsx — creates /blog/:slug routes
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  
  return (
    <article className="max-w-3xl mx-auto px-6 py-16">
      <h1 className="text-3xl font-bold capitalize">
        {slug.replace(/-/g, " ")}
      </h1>
    </article>
  );
}

// app/blog/[slug]/page.tsx — no metadata or loading state
export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

// app/blog/[slug]/page.tsx — with dynamic metadata
import type { Metadata } from "next";
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  return {
    title: slug.replace(/-/g, " "),
    description: `Read our blog post about ${slug.replace(/-/g, " ")}`,
  };
}
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return (
    <article className="max-w-3xl mx-auto px-6 py-16">
      <h1 className="text-3xl font-bold capitalize">
        {slug.replace(/-/g, " ")}
      </h1>
    </article>
  );
}

// Only matches /docs — not /docs/getting-started or /docs/api/auth
// app/docs/page.tsx

// app/docs/[...slug]/page.tsx — matches /docs/anything/at/any/depth
export default async function DocsPage({
  params,
}: {
  params: Promise<{ slug: string[] }>;
}) {
  const { slug } = await params;
  const path = slug.join("/");
  
  return (
    <div className="max-w-4xl mx-auto px-6 py-16">
      <p className="text-sm text-muted-foreground">docs/{path}</p>
      <h1 className="text-3xl font-bold mt-2">
        {slug[slug.length - 1].replace(/-/g, " ")}
      </h1>
    </div>
  );
}

Complete code example

1import type { Metadata } from "next";
2import { notFound } from "next/navigation";
3import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4import { Badge } from "@/components/ui/badge";
5
6interface Product {
7  id: string;
8  name: string;
9  description: string;
10  price: number;
11  category: string;
12}
13
14async function getProduct(id: string): Promise<Product | null> {
15  try {
16    const res = await fetch(`${process.env.API_URL}/products/${id}`);
17    if (!res.ok) return null;
18    return res.json();
19  } catch {
20    return null;
21  }
22}
23
24export async function generateMetadata({
25  params,
26}: {
27  params: Promise<{ id: string }>;
28}): Promise<Metadata> {
29  const { id } = await params;
30  const product = await getProduct(id);
31  return {
32    title: product?.name ?? "Product Not Found",
33    description: product?.description ?? "",
34  };
35}
36
37export default async function ProductPage({
38  params,
39}: {
40  params: Promise<{ id: string }>;
41}) {
42  const { id } = await params;
43  const product = await getProduct(id);
44
45  if (!product) notFound();
46
47  return (
48    <div className="max-w-3xl mx-auto px-6 py-16">
49      <Card>
50        <CardHeader>
51          <div className="flex items-center justify-between">
52            <CardTitle>{product.name}</CardTitle>
53            <Badge>{product.category}</Badge>
54          </div>
55        </CardHeader>
56        <CardContent>
57          <p className="text-muted-foreground">{product.description}</p>
58          <p className="text-2xl font-bold mt-4">${product.price}</p>
59        </CardContent>
60      </Card>
61    </div>
62  );
63}

Best practices to prevent this

• Always use default exports for page components — Next.js App Router does not recognize named exports as pages
• Name dynamic route directories with square brackets like [id] or [slug] — not curly braces or parentheses
• Use route groups with parentheses (marketing) for organizational folders that should not create URL segments
• Add generateMetadata to every page for proper SEO — V0 often generates pages without metadata
• Create loading.tsx alongside page.tsx for any route that fetches data to show a skeleton during loading
• Call notFound() from the page component when a dynamic route parameter does not match any data
• For complex routing structures, consider having RapidDev architect the route hierarchy before generating pages with V0

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue