Hi everyone,
I'm facing an issue with my Next.js project hosted on Vercel. I’m using Next.js 14.2.3 with the new app directory and trying to trigger a 404 HTTP status using the notFound() function from next/navigation. However, instead of returning a 404 status code, the page still returns a 200.
Here’s a simple example to reproduce the issue:
import { notFound } from "next/navigation";
export default function TestPage() { console.log("404 Test: notFound is being called"); notFound();}When I visit the route /test, the log is correctly displayed in the terminal (404 Test: notFound is being called), but the HTTP status code remains 200 instead of 404. Testing with curl gives the following result:
curl -I http://localhost:3000/test# Result:HTTP/1.1 200 OKHere’s what I’ve tried so far:
- I excluded potential middleware issues by completely removing any middleware from the project.
- I simplified my
next.config.jswith no custom changes - Tested the behavior both in the development environment (
npm run dev) and the production build (npm run build && npm start). - Ensured there are no header manipulations, redirects, or caching issues in my Vercel setup.
Despite all this, the status code remains 200 even when notFound() is called. This behavior is unexpected, and I’m unsure if it’s related to the use of withBuilderDevTools or something else in my environment.
Has anyone else encountered this issue or might know what could be causing it? Could this be related to Vercel’s hosting environment or my configuration?
Any help or suggestions would be greatly appreciated—thank you so much in advance!