How to Resolve NextJS Not Returning Correct Status for 404 Pages

My issue

For example, a page for displaying car models under a specific brand.

export default async function Home({
  searchParams,
  params,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
  params: Promise<{ brand: string }>;
}) {
  const queryParams = await searchParams;
  const { brand } = await params;
  const brandName = await getBrandNameBySlug(brand);

  if (!brandName) {
    return notFound();
  }

  return (
    <div>
     Some content
    </div>
  );
}

This should be simple and straight forward, but looking in the browsers network response, I noticed that the response code was always 200. This confuses Google for example, which reports that I have a bunch of pages that has a noindex hint, when in reality, these pages should be 404s since they do not exist.

The solution

I searched a lot to find a solution for this, and after going through some Github issues which I mentioned that NextJS does not return 404 for streaming responses, it finally hit me.