How do you handle 404s in React Router and Next.js App Router?

WHAT THIS TESTS: This tests whether you understand the boundary between client-side and server-side routing, HTTP semantics, and framework-specific conventions. Interviewers want to see that you know React Router is a client library that controls the DOM but does not inherently manage HTTP responses, while Next.js App Router is a full-stack system where file-system conventions carry HTTP semantics.

A GOOD ANSWER COVERS: First, React Router implementation: you add a wildcard route at the bottom of your route configuration so it matches only when no other route matches. This renders a NotFound component purely in the browser. Because it is client-side, the initial document request still returns whatever the server sent, usually HTTP 200, unless you are running React Router with a custom Node server or framework that lets you set status codes. Second, Next.js App Router implementation: you create a not-found.js file inside the app directory. Next.js automatically renders this file when a URL does not match any segment, and it sends a true HTTP 404 status. It can also be triggered programmatically by calling the notFound function from next navigation. Third, key differences: routing paradigm, where React Router uses explicit JavaScript configuration and Next.js uses implicit file-system conventions; server versus client rendering, where Next.js renders on the server by default and React Router renders on the client; HTTP status handling, where Next.js manages the status code automatically and React Router does not unless paired with SSR infrastructure; and layout preservation, where Next.js not-found.js can inherit shared layouts and loading states while a React Router catch-all is just another route leaf.

COMMON WRONG ANSWERS: Claiming that a React Router wildcard route automatically causes the browser or server to return a 404 status code. Confusing the Next.js Pages Router 404.js special file with the App Router not-found.js convention. Saying that not-found.js only works for unmatched paths without mentioning the programmatic notFound API. Asserting that React Router has built-in file-system routing like Next.js. Ignoring the fact that Next.js can preserve root layouts during a 404 while React Router would need manual layout wrapping in the catch-all route.

LIKELY FOLLOW-UPS: How would you return a 404 status code in a React Router application running inside an Express server? Can you trigger a 404 in Next.js from a Server Component or only from a Client Component? What happens to loading.js and layout.js when not-found.js is rendered? How would you track 404 errors in your analytics, and does the HTTP status difference affect that? How does Next.js handle 404s for dynamic segments that fail a data lookup versus truly unmatched routes?

ONE CONCRETE EXAMPLE: Imagine a product detail page at /products/[id]. In React Router, you would define routes for /products/[id] and a final wildcard route. If a user visits /products/99999 and your API returns no data, your component renders the NotFound view, but the network tab shows HTTP 200 for the document. In Next.js App Router, you would place not-found.js at app/products/[id]/not-found.js or call notFound inside the page when the database query returns null. The network tab shows HTTP 404, the shared app layout.js shell is preserved, and any error monitoring tool correctly records a 404 rather than a client-side render of missing content.