Custom 404 page is present and helpful

The default framework 404 page exposes the framework name, version, and sometimes internal routing details — information an attacker uses to target known vulnerabilities (CWE-756). Beyond security, every user who hits a 404 without navigation options bounces permanently. A custom 404 page with a link back to the homepage recovers a portion of those users who arrived at a broken or moved URL, directly reducing churn from mislinked campaigns, renamed routes, and user typos.

Create app/not-found.tsx in Next.js App Router (or pages/404.tsx in Pages Router) with a clear message and a link back to the homepage.

// app/not-found.tsx
import Link from 'next/link'

export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>This page doesn't exist or has been moved.</p>
      <Link href="/">Return home</Link>
    </main>
  )
}

Include your site's normal navigation header so users can recover without the back button. Optionally add links to popular sections or a search bar. The page should match your brand styling — a bare white error screen signals a broken product.

• ID: pre-launch.user-facing.custom-404

• Severity: medium

• What to look for: Count all error page implementations. Enumerate whether a custom 404 page exists with navigation back to the site. Check for custom 404 pages: app/not-found.tsx in Next.js App Router, pages/404.tsx in Next.js Pages Router, 404.html in static sites, or equivalent error pages in other frameworks. Evaluate whether the page provides navigation help (links back to home or main sections) rather than just displaying "404 Not Found."

• Pass criteria: A custom 404 page exists that provides navigation options (at minimum a link back to the homepage) and does not expose framework internals. At least 1 custom 404 page must exist with navigation links and brand styling.

• Fail criteria: No custom 404 page found, or the default framework 404 page is in use.

• Skip (N/A) when: Never — every web project served to users should have a custom 404 page.

• Cross-reference: For custom 500 page, see custom-500.

• Detail on fail: "No custom 404 page found — using framework default which may expose internal details and provides no navigation help to lost users"

• Remediation: Users hitting broken links or mistyped URLs should be gently redirected, not abandoned on a bare "404 Not Found" page:

  // app/not-found.tsx — custom 404 page
  export default function NotFound() { return <div><h1>Page Not Found</h1><Link href="/">Go Home</Link></div> }
  

  // app/not-found.tsx (Next.js App Router)
  import Link from 'next/link'
  
  export default function NotFound() {
    return (
      <main>
        <h1>Page Not Found</h1>
        <p>The page you're looking for doesn't exist or has been moved.</p>
        <Link href="/">Return home</Link>
      </main>
    )
  }
  

  A good 404 page includes: a clear message that the page wasn't found, a link back to the homepage, optionally a search bar or links to popular sections, and your site's normal navigation header.