Search code examples
next.jshttp-status-code-404

NextJS not-found.tsx returns HTTP 200 Status Code

When I use NextJS's not-found.tsx file, it renders fine but it returns a 200 status code instead of 404. Any idea why? How can I fix this?

Solution

  • I think since you are returning a valid custom component, it sets it as 200.

    If you delete not-found.tsx and use this

    import { notFound } from 'next/navigation'

    inside the component

    if(true) notFound()

    if you hover over notFound

    When used in a React server component, this will set the status code to 404. When used in a custom app route it will just send a 404 status.