Not-Found Pages and Real 404s

notFound() and not-found.tsx

Calling notFound() from next/navigation stops rendering and shows the nearest not-found.tsx, with an HTTP 404 status. This matters for users and for search engines, which should not index "not found" pages served with status 200. Use it whenever a dynamic segment refers to something that does not exist, and design the not-found page to help users find their way.

The not-found page

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; next build compiled and type-checked it successfully. A minimal not-found UI shared by the whole app.

export default function NotFound() {
  return <p>Sorry, we could not find that page.</p>;
}

Requesting an unknown product, run

I built the demo store with next build (Next.js 16.3.8), started it with next start and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. Product 99 does not exist, so notFound() returns status 404 with the custom message, and generateMetadata produced the title "Not found | Stationery Shop".

curl -s -o page.html -w "status %{http_code}\n" http://localhost:3917/products/99
grep -o "Sorry[^<]*" page.html

Output:

status 404
Sorry, we could not find that page.

Quick check: Why call notFound() instead of rendering "not found" text with status 200?

• notFound() deletes the page
• It is faster to type
• 200 pages cannot have text
• So users and search engines get a real 404 status