Custom 404 page guides visitors back into the funnel

A visitor who lands on a broken URL — a typo, a stale share, an expired campaign link — is a high-intent lost signal, and the framework-default 404 page shows a bare error with no path back into the site. A custom 404 with a link to the homepage, search, or the most common destinations recovers a meaningful share of these visitors and keeps them inside the funnel rather than punishing them with a dead-end for a mistake that was often not theirs.

Create a custom 404 page with at least one navigation path back to the main site — a homepage link, key-page list, or search bar. In Next.js App Router, add app/not-found.tsx:

export default function NotFound() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h1 className="text-2xl font-bold">Page Not Found</h1>
      <p className="text-muted-foreground">
        The page you're looking for doesn't exist.
      </p>
      <Button asChild>
        <Link href="/">Back to Home</Link>
      </Button>
    </main>
  )
}