HTTP status code is 200 instead of 404 when using notFound() in dynamic routes with loading.tsx

[hamzamongam]

Link to the code that reproduces this issue

https://github.com/hamzamongam/nextjs-bug-example

To Reproduce

1. Set up a Next.js project with the App Router.
2. Create a dynamic route: app/[slug]/page.tsx
3. Add a loading.tsx file in app/[slug]/
4. In page.tsx, use notFound() when the slug is invalid:

 import { notFound } from "next/navigation";

export default async function Page({ params }) {
  const { slug } = params;
  if (slug !== "valid") {
    notFound();
  }
  return <h1>Welcome to {slug}</h1>;
} 

5. Create a custom not-found.tsx in app/[slug]/

   export default function NotFound() {
           return <h1>404 - Slug not found</h1>;
   }

6. Visit /invalid and observe that the custom 404 page is rendered, but the HTTP status code is 200.

Current vs. Expected behavior

When notFound() is called in a dynamic route, the HTTP status code should be 404, indicating that the resource was not found.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #53-Ubuntu SMP PREEMPT_DYNAMIC Sat Jan 11 00:06:25 UTC 2025
  Available memory (MB): 6753
  Available CPU cores: 12
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.0 // An outdated version detected (latest is 15.1.7), upgrade is highly recommended!
  eslint-config-next: 14.2.0
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Dynamic Routes

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Actual Behavior:

The HTTP status code is 200, even though the custom 404 page is rendered.

Impact:

This issue can lead to incorrect indexing by search engines and confusion for client-side tools that rely on accurate status codes.

Possible Solution:

Next.js should natively support setting the HTTP status code to 404 when notFound() is used in dynamic routes, especially in the presence of loading.tsx.

Additional Context:

This issue has been discussed in various forums, but there is no clear solution or workaround that doesn't involve switching to the Pages Router or using experimental middleware setups. It persists across different versions of Next.js, including the latest stable release.

[arjunbhatt670]

with loading.tsx, you are sort of wrapping it inside suspense, and stream the component. Next returns 200 for streamed responses.

Ref: https://nextjs.org/docs/app/api-reference/file-conventions/not-found

[hamzamongam]

I am using generateMetadata based on API data, so it cannot be placed inside Suspense.

[samcx]

As mentioned in other threads, this does not lead to incorrect indexing.

• notFound returns a 200 when loading.tsx is used #45801 (comment)