not-found not working with dynamic routing

[johnny-prescott]

hi,

I've been trying to implement not-found wiht my routing but have been unable to do so properly so far.

Here's what my routing look like:

Since I'm using dynamic-config, it seems that I can't put it in the root or it'll require a root-layout, which makes everything bugs out.

I've tried to put it (like it is now) int he [locale] folder, and then calling notFound() to trigger the closesy not-found.tsx but it doesn't work. I get a 404 but the default one and not mine. Each of the page at the end of the dynamic routes call notFound() if not data is found for the route it is calling. Simple, but can't have it render my own not-found.

I tried a solution from a githuub issue where they create a global one using [[...not-found]] bu then I get an error saying I can't have a catch-all and a dynamic path at the same times.

Not sure what to do exactly to make it work.

If anyone knows, that'd be great.

[ukcw]

+1 on this issue.

[Emiliano-Bucci]

@johnny-prescott Hi, did you find a solution for this? I'm having a similar issue where the layout of a dynamic catch all folder is still rendered even if the page inside the dynamic catch folder call the notFound()

[suskull]

i found a solution here. not official but working.
#12477 (comment)

[mhfaust]

I really needed to find a solution to get 404s working properly with Next's recommended routing pattern for internationalization. They recommend you place everything to be localized in a dynamic [locale] route at the root and that its layout should pass the captured locale string into the html tag. Now that means there cannot be a layout at the actual root level, because the root-level layout requires its own html and body tags, so you would have 2 of each of those rendered in your localized pages, one set nested inside the other -- not good.

I worked out an approach that does not require redirects. I noticed that layouts in catchall routes are working, despite them not working in dynamic routes. So my solution was to place a catchall route as a sibling to the dynamic route:

[...404]/
    page.tsx
    layout.tsx
    not-found.tsx
[locale]/

The contents of [...404]/page.tsx should be simply:

import { notFound } from 'next/navigation';
export default notFound;

...which sets up the routes so that anything having at least one segment, but not caught by any route within [locale] or elsewhere gets picked up by the "404" route and returned with a genuine 404 response, with no re-direction, and the contents of [...404]/not-found.tsx

You can import and re-export the locale route's layout for not-found, or make a custom layout.

[himrocks33]

I was unable to get the notFound() function to work... but I just used the catch all with a page.tsx and layout.tsx file and it seems to work perfectly.

Also, my layout.tsx file just imports my layout file from within [locale] folder. Would be nice if we could just put the not-found.tsx file in the [locale] directory to begin with. But nice work around.

[sadhik-mehraj-shaik]

Two dynamic routes at same level shouldn't work right?

[tshmieldev]

Just experienced it, can confirm it's bugged

[geoffreygarrett]

still bugged 👋🏻

[geoffreygarrett]

Can't hit app/[locale]/not-found.tsx, no matter what I try, it just hits the top level not-found.tsx

import ErrorPage from 'next/error';
import { Locale } from '@@/i18n/config';
import initTranslations from '@/app/i18n';

export default async function NotFound({ locale }: { locale: Locale }) {
  console.log('locale:', locale);
  const { t } = await initTranslations(locale, ['www']);
  return <ErrorPage statusCode={404} title={t('ERROR_PAGE.NOT_FOUND.TITLE')} />;
}

[salos1982]

Agree, looks buggy that not found page does not show which one is not found

[jkiss]

notFound() still trigger default 404 page... I use redirect('/not-found') to make thing good, but url will be changed to */not-found

[sankaSanjeeva]

Creating a catch-all route works for me. app/[locale]/[...rest]/page.tsx

import { notFound } from 'next/navigation'

export default function CatchAllPage() {
  notFound()
}