Seo – Handling 404 Page with Correct HTTP Status in Next.js 14

I’m working on a project using Next.js 14 and I’ve encountered a challenge with handling 404 pages, particularly in terms of returning the correct HTTP status code.

In earlier versions of Next.js, I could use getServerSideProps to ensure that a custom 404 page would return directly a 404 status code. However, with the App router, I’m unsure how to replicate this behavior.

I’ve created a custom 404 page (app/not-found.tsx), but it seems to be returning a 200 status code, which is not ideal for SEO and user experience :

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
    </div>
  );
}

I’m aware that Next.js 14 has a new architecture and possibly different methods for handling such cases, but I haven’t been able to find a clear solution.

My Question: How can I ensure that my custom 404 page returns directly a 404 status code? Is there a specific method or practice recommended in the new version to handle such scenarios effectively, especially for SEO and user experience?

I haven’t tried any specific solutions yet, mainly because I’m not entirely sure what the best approach would be with Next.js 13’s new architecture