Creating custom fallback pages in v0

// No not-found.tsx exists — users see unstyled "404 | This page could not be found."

// app/not-found.tsx
import Link from 'next/link';
import { Button } from '@/components/ui/button';
export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h1 className="text-6xl font-bold">404</h1>
      <p className="text-muted-foreground text-lg">This page does not exist.</p>
      <Button asChild>
        <Link href="/">Back to Home</Link>
      </Button>
    </div>
  );
}

// No error.tsx — runtime errors show: "Application error: a client-side exception has occurred"

// app/error.tsx
'use client';
import { useEffect } from 'react';
import { Button } from '@/components/ui/button';
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Application error:', error);
  }, [error]);
  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h2 className="text-2xl font-semibold">Something went wrong</h2>
      <p className="text-muted-foreground">An unexpected error occurred.</p>
      <Button onClick={reset}>Try Again</Button>
    </div>
  );
}

// Unmatched routes fall through to the default 404

// app/[...slug]/page.tsx
import { notFound } from 'next/navigation';
const validPages: Record<string, { title: string; content: string }> = {
  'about/team': { title: 'Our Team', content: 'Meet the team.' },
  'about/mission': { title: 'Our Mission', content: 'Our mission statement.' },
};
export default function CatchAllPage({
  params,
}: {
  params: { slug: string[] };
}) {
  const path = params.slug.join('/');
  const page = validPages[path];
  if (!page) notFound();
  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-4">{page.title}</h1>
      <p>{page.content}</p>
    </main>
  );
}

// Only app/error.tsx exists — all errors show the same UI

// app/dashboard/error.tsx
'use client';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function DashboardError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="p-8 text-center">
      <h2 className="text-xl font-semibold">Dashboard Error</h2>
      <p className="text-muted-foreground mt-2">Could not load dashboard data.</p>
      <div className="flex gap-2 justify-center mt-4">
        <Button onClick={reset}>Retry</Button>
        <Button variant="outline" asChild>
          <Link href="/">Go Home</Link>
        </Button>
      </div>
    </div>
  );
}