404 pages are custom and helpful

The framework default 404 page is a dead end: it names the HTTP status, nothing else, and offers no path back into the product. Users who mistype a URL, follow a stale email link, or hit a deleted resource bounce to the browser back button and often leave entirely. A custom 404 recovers that intent by handing users a home link, a search, or suggested pages, which directly affects bounce rate, session depth, and organic-traffic retention from broken inbound links.

Create app/not-found.tsx (App Router) or pages/404.tsx (Pages Router) with a plain-language heading, a one-sentence explanation, and at least one navigation control — a home link, a search input, or a list of popular destinations. Match the site's layout and typography so users recognize they are still inside the product.

// app/not-found.tsx
import Link from 'next/link'
export default function NotFound() {
  return (
    <div className="flex flex-col items-center gap-4 p-8">
      <h1>Page not found</h1>
      <Link href="/">Go to homepage</Link>
    </div>
  )
}