Creating and styling custom 404 pages in V0

// No not-found.tsx — shows generic Next.js 404 page

// 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-[60vh] px-6 text-center">
      <h1 className="text-6xl font-bold">404</h1>
      <p className="mt-4 text-xl text-muted-foreground">
        The page you are looking for does not exist.
      </p>
      <div className="mt-8 flex gap-4">
        <Button asChild>
          <Link href="/">Go Home</Link>
        </Button>
        <Button variant="outline" asChild>
          <Link href="/contact">Contact Support</Link>
        </Button>
      </div>
    </div>
  );
}

// app/products/[id]/page.tsx — shows blank page for missing products
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(id);
  // If product is null, renders nothing
  return <div>{product?.name}</div>;
}

// app/products/[id]/page.tsx — shows 404 for missing products
import { notFound } from "next/navigation";
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(id);
  if (!product) {
    notFound(); // Triggers not-found.tsx with 404 status
  }
  return <div>{product.name}</div>;
}

// Basic unstyled 404 page
export default function NotFound() {
  return <h1>Page not found</h1>;
}

// Styled 404 page with search and suggested links
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] px-6">
      <div className="text-center max-w-md">
        <p className="text-sm font-medium text-primary">404 Error</p>
        <h1 className="mt-2 text-3xl font-bold">Page not found</h1>
        <p className="mt-4 text-muted-foreground">
          Sorry, we could not find the page you are looking for.
        </p>
        <div className="mt-6 flex items-center gap-2 max-w-sm mx-auto">
          <Input placeholder="Search..." />
          <Button size="icon"><Search className="h-4 w-4" /></Button>
        </div>
        <div className="mt-8 flex flex-col gap-2">
          <p className="text-sm font-medium">Popular pages:</p>
          <div className="flex gap-3 justify-center">
            <Button variant="link" asChild><Link href="/">Home</Link></Button>
            <Button variant="link" asChild><Link href="/products">Products</Link></Button>
            <Button variant="link" asChild><Link href="/blog">Blog</Link></Button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Only one global not-found.tsx for the entire app

// app/blog/not-found.tsx — blog-specific 404
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function BlogNotFound() {
  return (
    <div className="max-w-2xl mx-auto px-6 py-16 text-center">
      <h1 className="text-3xl font-bold">Post not found</h1>
      <p className="mt-4 text-muted-foreground">
        This blog post may have been moved or deleted.
      </p>
      <Button asChild className="mt-6">
        <Link href="/blog">Browse All Posts</Link>
      </Button>
    </div>
  );
}