Missing 404 Pages in Vibecoded Apps

Type a random nonexistent URL path into the browser and see what happens. Try /asdfghjkl, /admin/nonexistent, and /user/99999999 with an ID that does not exist. Each should display a user-friendly 404 page with navigation back to working parts of the app.

Check the HTTP status code in the Network tab. The response should be a 404 status, not a 200. Many vibecoded apps return 200 OK for nonexistent routes because the client-side router catches everything and renders a component without setting the proper status code. This confuses search engines and caching layers.

Test both nonexistent routes (paths the router does not recognize) and nonexistent resources (valid routes with invalid IDs). These are different failure modes — the router handles unknown paths, but the data layer handles missing resources. AI-generated apps often handle one but not the other.

Check what happens when you delete a resource and then visit its URL. If you delete a post and visit /posts/deleted-post-id, you should see a 404, not a crash or a blank page. Also test deeply nested invalid paths like /valid-section/nonexistent/another-level to ensure catch-all routes work at every depth.

Create a custom 404 page that includes navigation elements, a search bar, and a friendly message explaining that the page was not found. In Next.js, create a not-found.tsx file at the app root and use the notFound() function in server components when data is not found.

Ensure the 404 page returns an actual 404 HTTP status code, not a 200. This is critical for SEO — search engines need the correct status code to remove dead pages from their index. Implement 404 handling at both the route level (unknown paths) and the resource level (valid paths with missing data).