Custom 404 and 500 error pages are configured

Default framework error pages expose the framework name, version, and sometimes a stack trace to anyone who triggers a 404 or 500. Beyond information leakage, an app with no custom error pages signals to users (and attackers) that error cases were never designed — raising the question of what else was left to defaults. CWE-209 (Error Message With Sensitive Information) and CWE-756 (Missing Custom Error Page) both apply. OWASP A05 (Security Misconfiguration) identifies default error pages as a configuration gap. Custom error pages also prevent operational confusion: a customer who hits a raw framework 500 page is far more likely to churn than one who sees a branded, helpful message.

Create both app/not-found.tsx and app/error.tsx in your Next.js app. The error page must be a client component; the not-found page can be a server component.

// app/not-found.tsx
export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
    </main>
  )
}

// app/error.tsx
'use client'
export default function Error({ reset }: { reset: () => void }) {
  return (
    <main>
      <h1>Something went wrong</h1>
      <button onClick={reset}>Try again</button>
    </main>
  )
}

Neither page should expose the caught error object, stack trace, or raw framework output in its markup.