v0 to Production: What Vercel's AI Misses

// Typical v0 output: clean, well-structured, accessible
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
 
export function ProjectCard({ project }: { project: Project }) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{project.name}</CardTitle>
        <Badge variant={project.status === 'active' ? 'default' : 'secondary'}>
          {project.status}
        </Badge>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{project.taskCount}</div>
        <p className="text-xs text-muted-foreground">
          {project.completedTasks} of {project.taskCount} tasks completed
        </p>
      </CardContent>
    </Card>
  );
}

// v0 generates this beautiful login form
export function LoginForm() {
  return (
    <form className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="m@example.com" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" />
      </div>
      <Button className="w-full">Sign In</Button>
    </form>
  );
}
// But there's no onSubmit handler, no auth provider, no session management

import { createBrowserClient } from '@supabase/ssr';
 
export function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();
 
  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    setLoading(true);
 
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
 
    if (error) {
      setError(error.message);
      setLoading(false);
      return;
    }
 
    router.push('/dashboard');
  }
 
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password">Password</Label>
        <Input
          id="password"
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          required
        />
      </div>
      {error && <p className="text-sm text-destructive">{error}</p>}
      <Button className="w-full" disabled={loading}>
        {loading ? 'Signing in...' : 'Sign In'}
      </Button>
    </form>
  );
}

// v0 gives you the component with mock data
const projects = [
  { id: 1, name: "Website Redesign", status: "active" },
  { id: 2, name: "Mobile App", status: "completed" },
];
 
// You need to replace this with real data fetching
async function getProjects(userId: string) {
  const supabase = createServerClient();
  const { data, error } = await supabase
    .from('projects')
    .select('*')
    .eq('user_id', userId)
    .order('created_at', { ascending: false });
 
  if (error) throw error;
  return data;
}

// app/api/projects/route.ts - you build this entirely yourself
import { z } from 'zod';
 
const CreateProjectSchema = z.object({
  name: z.string().min(1).max(200).trim(),
  description: z.string().max(2000).optional(),
});
 
export async function POST(request: Request) {
  const userId = request.headers.get('x-supabase-user-id');
  if (!userId) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }
 
  const body = await request.json();
  const result = CreateProjectSchema.safeParse(body);
  if (!result.success) {
    return Response.json(
      { error: 'Validation failed', details: result.error.flatten() },
      { status: 400 }
    );
  }
 
  const supabase = createServiceClient();
  const { data, error } = await supabase
    .from('projects')
    .insert({ ...result.data, user_id: userId })
    .select()
    .single();
 
  if (error) {
    return Response.json({ error: 'Failed to create project' }, { status: 500 });
  }
 
  return Response.json(data, { status: 201 });
}

// v0 output: assumes data is always available
export function ProjectList({ projects }: { projects: Project[] }) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {projects.map(project => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </div>
  );
}
 
// Production version: handles all states
export function ProjectList() {
  const { data: projects, isLoading, error } = useProjects();
 
  if (isLoading) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <ProjectCardSkeleton key={i} />
        ))}
      </div>
    );
  }
 
  if (error) {
    return (
      <Alert variant="destructive">
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Failed to load projects. Please try again.
        </AlertDescription>
      </Alert>
    );
  }
 
  if (!projects?.length) {
    return (
      <EmptyState
        title="No projects yet"
        description="Create your first project to get started"
        action={<Button>Create Project</Button>}
      />
    );
  }
 
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {projects.map(project => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </div>
  );
}