NextJS 13.4.7 (app routes) Dynamic routes 404 status code

Question

I'm currently building a NextJS 13.4.7 application with dynamic routes and a Headless cms coming from Contentful. All routes are open to use, as you can see in the screenshot below.

We want to get the data from the CMS. If there is no data for this page (slug) we need to throw a Notfound(). Until this point everything works fine. However the Notfound() wont trigger a statuscode 404 on the server which will result in loss of SEO. The Notfound() custom page is triggered but no 404 status code is returned.

Is there a possibility to throw the notFound() with a 404 status code?

*edit added code

/app/[...slug]/page.tsx

export default async function ContentPageRoute({ params }) {
  const pathname = `/${params.slug.join("/")}`;

  const { pageCollection } = await getPageBySlug({
    slug: pathname,
  });

  const page = pageCollection?.items[0];

  if (!isDefined(page)) notFound();

  return (
    <Suspense fallback="Loading">
      <ContentPage
        breadcrumbs={
          <Breadcrumbs style="containerWithSpaceBottom" pathname={pathname} />
        }
        page={page}
      />
    </Suspense>
  );
}

/app/notfound.tsx

export default function NotFound() {
  return (
    <p className="mt-5 mb-3 container-padding text-center">
      De pagina kon helaas niet worden gevonden
    </p>
  );
}

With resulting in this request:

Can you edit your post to include your code? – Audun Hilden Aug 15 '23 at 07:54 — Audun Hilden, Aug 15 '23 at 07:54
@AudunHilden Will this do? – Ivo Brands Aug 15 '23 at 08:11 — Ivo Brands, Aug 15 '23 at 08:11

score 1 · Accepted Answer · answered Aug 15 '23 at 08:20

1

You need to rename your notfound.tsx file to not-found.tsx.

You didn't show how you import notFound in your code, but make sure it's matching the one below:

import { notFound } from 'next/navigation'

answered Aug 15 '23 at 08:20

Audun Hilden

330
3
13

I renamed the file notfound.tsx to not-found.tsx and imported the notFound like above. Unfortunately still no status code. The not-found.tsx is correctly loaded but the status code is still a 200 message. – Ivo Brands Aug 15 '23 at 08:27
Can you try renaming it to `not-found.js`? – Audun Hilden Aug 15 '23 at 08:34
I just found the solution, Thanks for helping me. I had a suspense in the rootlayout which will result in rendering the page before the notFound could be triggered. So removing the suspense fixed the issue. – Ivo Brands Aug 15 '23 at 10:04
Mind checking if it still works if you name your file `notfound.tsx` as you originally had? – Audun Hilden Aug 15 '23 at 10:06
Correct, notfound.tsx is not working, not-found.tsx is working IF i dont use the suspense function. Thanks! – Ivo Brands Aug 15 '23 at 11:57

NextJS 13.4.7 (app routes) Dynamic routes 404 status code

1 Answers1