Custom 404 (not-found) not working in production
Answered
Eurasian Bullfinch posted this in #help-forum
Eurasian BullfinchOP
Hi, I have an issue with custom 404 page working locally but not in production.
I tried the catch all with [...not_found] but it does't work - from here https://www.linkedin.com/pulse/add-custom-404-page-found-nextjs-14-app-directory-ali-mirzaei-hyh1e/
It always falls back to the default Next.js 404 in the root of
My setup is using Next.js 14 app router + Headless CMS with middleware handling locale
My project structure is like this:
Are there any other ways how to handle this?
I tried the catch all with [...not_found] but it does't work - from here https://www.linkedin.com/pulse/add-custom-404-page-found-nextjs-14-app-directory-ali-mirzaei-hyh1e/
It always falls back to the default Next.js 404 in the root of
app/not-found.tsx but this happens ONLY in production.My setup is using Next.js 14 app router + Headless CMS with middleware handling locale
My project structure is like this:
app
├── [lang]
│  ├── [...not_found]
│  │  └── page.tsx
│  ├── [uid]
│  │  └── page.tsx
│  ├── blog
│  │  ├── [page]
│  │  │  └── page.tsx
│  │  ├── article
│  │  │  └── [uid]
│  │  │  └── page.tsx
│  │  └── page.tsx
│  ├── features
│  │  └── [uid]
│  │  └── page.tsx
│  ├── layout.tsx
│  ├── not-found.tsx
│  ├── page.tsx
├── api
├── icon.svg
├── layout.tsx
├── not-found.tsxAre there any other ways how to handle this?
Answered by Eurasian Bullfinch
I renamed it to [...notFound] to catch all routes
Inside the [...notFound] page.tsx file:
Inside the [...notFound] page.tsx file:
import {notFound} from 'next/navigation';
const CatchAll = () => notFound();
export default CatchAll;18 Replies
@Eurasian Bullfinch were you able to resolve this?
Eurasian BullfinchOP
@GetPsyched Yes!
Eurasian BullfinchOP
I renamed it to [...notFound] to catch all routes
Inside the [...notFound] page.tsx file:
Inside the [...notFound] page.tsx file:
import {notFound} from 'next/navigation';
const CatchAll = () => notFound();
export default CatchAll;Answer
Eurasian BullfinchOP
and that solved the problem
And that then shows the global
not-found.tsx?Eurasian BullfinchOP
Yes, the custom one I have in [lang] directory:
not-found.tsxI see
I'll try this.
Eurasian BullfinchOP
But as far as I know, there is no way to localise it at the moment, can't really pass anything to notFound() or read params in
not-found.tsx 😦But if
not-found.tsx is inside your [lang] directory, you can read the lang param no?Eurasian BullfinchOP
The thing is, no 😄
Unfortunate
Eurasian BullfinchOP
I tried so many things and also found some stuff on Next.js github and nobody seemed to be able to solve the problem
Best you can do is fallback to the browser's preferred locale then
Eurasian BullfinchOP
Yeah, wish it was just simple of passing lang into notFound or get the param which imo should be available as it is within [lang]
it's not big of a deal for me but would be just nice to have
it's not big of a deal for me but would be just nice to have
Yeah for sure
Bigheaded ant
Is anyone still getting the same result?
@Bigheaded ant Is anyone still getting the same result?
Sun bear
Yes I have had the same issue and fixed it with damyco's solution. not-found in the root was not being triggered.