404 error page with navigation options

A default server 404 response — raw text or a framework-generated HTML stub — gives users no path forward. They cannot navigate home, search for what they wanted, or understand whether the URL was ever valid. ISO 25010 reliability.recoverability requires the system to guide users back to a functional state; a missing custom 404 page abandons them entirely. For SEO, a well-structured custom 404 with navigation also prevents Google from interpreting broken links as site-wide quality signals.

Create app/not-found.tsx in Next.js App Router (or the equivalent for your framework) with at minimum a home link and a back button.

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

export default function NotFound() {
  return (
    <main style={{ textAlign: 'center', padding: '4rem' }}>
      <h1>Page not found</h1>
      <p>This URL doesn\'t exist or has moved.</p>
      <Link href="/">Go to home</Link>
    </main>
  )
}

Add a search input if your app has site search — it converts the 404 into a recovery path rather than a dead end.

• ID: error-resilience.graceful-degradation-shutdown.not-found-error-page

• Severity: low

• What to look for: Count all 404/not-found page implementations. Enumerate whether they include navigation links, search functionality, and brand styling. Check for a custom 404 page (not-found.tsx, 404.tsx, or equivalent). Verify it includes navigation options: home link, back button, search, or sitemap link.

• Pass criteria: A custom 404 page exists with navigation options (home, back, search, or similar). At least 1 custom 404 page must exist with navigation links and brand-consistent styling.

• Fail criteria: No custom 404 page, or 404 page is generic with no navigation options.

• Skip (N/A) when: Never — 404 pages should always be present.

• Cross-reference: For server error page, see server-error-page.

• Detail on fail: "No custom 404 page. Default server 404 response shown" or "404 page displays 'Not Found' with no navigation links"

• Remediation: Create a friendly 404 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
  import Link from 'next/link'
  
  export default function NotFound() {
    return (
      <div style={{ textAlign: 'center', padding: '40px' }}>
        <h1>404 - Page Not Found</h1>
        <p>The page you're looking for doesn't exist.</p>
        <div style={{ marginTop: '20px' }}>
          <Link href="/">Go to Home</Link>
          <span> | </span>
          <button onClick={() => window.history.back()}>Go Back</button>
        </div>
      </div>
    )
  }