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>
  )
}

• ID: not-found-recovery

• Severity: low

• What to look for: Check for a custom 404 / not-found page: (1) In Next.js App Router, look for app/not-found.tsx; (2) In Next.js Pages Router, look for pages/404.tsx; (3) For other frameworks, check the equivalent custom error page location. If a custom 404 page exists, check whether it includes navigation links, a search input, or a CTA that guides the visitor back to the main site or conversion flow — not just an error message.

• Pass criteria: Count all navigation options on the custom 404 page. A custom 404 page exists with at least 1 navigation option (link back to homepage, links to key pages, or a search bar). Report: "Custom 404 provides X navigation options."

• Fail criteria: No custom 404 page found (framework default is served). OR a custom 404 page exists but contains only an error message with no navigation or recovery path.

• Skip (N/A) when: Never — all web projects benefit from a meaningful 404 page.

• Detail on fail: "No custom 404 page found (no app/not-found.tsx in Next.js App Router project)." or "404 page exists but shows only 'Page Not Found' with no navigation links or recovery path.".

• Remediation: A 404 page is a second chance to convert a lost visitor. Keep it simple but include a way out:

  // 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>
    )
  }