nested not-found.tsx is not used for 404

[zartinn]

Summary

My Environment:

 Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.3.0
      npm: 9.2.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

I have the following folder structure:

📦app
 ┗ 📂[lang]
      ┣ 📂 ...
      ┣ 📜 ...
      ┣ 📜globals.css
      ┣ 📜layout.tsx
      ┣ 📜not-found.tsx
      ┗ 📜page.tsx

and I want that my not-found.tsx is used as 404 page. This not-found.tsx page as well as the layout with header and footer is depending on the lang param therefore I cannot put them in the root of the app folder. But NextJS is not recognizing this nested not-found.tsx page.

Does anybody has an idea how I can use my not-found page as 404 page?

Additional information

No response

Example

No response

[Hamzi-SE]

To use a custom 404 page in Next.js, you can create a file named 404.tsx in the pages directory. However, in your case, you want to use the not-found.tsx file in the [lang] directory as the 404 page, which is not recognized by Next.js.

To make Next.js recognize the not-found.tsx file as the 404 page, you can create a custom _error.tsx file in the pages directory, and then render the not-found.tsx component inside it when the statusCode is 404.

Here's how you can do it:

• Create a new file named _error.tsx in the pages directory.
• Import the NextPageContext type from the next package.
• Define a functional component that takes the statusCode and the message as props.
• If the statusCode is 404, render the not-found.tsx component.
• Otherwise, render a generic error message.
• Export the component as the default export.

import { NextPageContext } from 'next';
import NotFound from '../lang/not-found';

type Props = {
  statusCode: number;
  message?: string;
};

const ErrorPage = ({ statusCode, message }: Props) => {
  if (statusCode === 404) {
    return <NotFound />;
  }

  return (
    <div>
      <h1>
        Error {statusCode}: {message || 'Something went wrong'}
      </h1>
    </div>
  );
};

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res?.statusCode || err?.statusCode || 500;
  const message = err?.message || undefined;

  return { statusCode, message };
};

export default ErrorPage;

In this example, we define a functional component named ErrorPage that takes the statusCode and message props. Inside the component, we check if the statusCode is 404, and if so, we render the NotFound component. Otherwise, we render a generic error message that includes the statusCode and message.

We also define a getInitialProps function that gets the statusCode and message from the server response or error object, and returns them as props.

With this code in place, Next.js should recognize the not-found.tsx component as the 404 page for your app.

[zartinn]

Thanks for your detailed answer @Hamzi-SE

I tried couple of things out with your approach. The main problem I see here is that your tutorial is written for the "old" pages directory.
But I tried to adapt with the app directory by creating an error.tsx file. The main problem I had was, that I had no access to the statusCode in the error.tsx. I think this is because the error.tsx is used for runtime errors and not for 404/not-found problems.

[zartinn]

Related issue I found to this: #48763

[REDAMANS]

I've been facing the same issue while using the app router, not only the 404 page will not render, a 404 error is logged in the console of the browser, it seems like a request to get the file on-demand-entries-client.js is not working.

As long as i stay in the 404 page, the error keeps being logged like a loop. I've tried something like creating a not-found.tsx file in the root of the app directory, it also requires a layout so what i did was to create a layout.tsx in the root of the app directory.

//app/layout.tsx
const RootLayout = ({children}: {children: React.ReactNode}) => {
    return children;
}

export default RootLayout;

//app/not-found.tsx
//html tag is needed because only children is included in the root layout, and the nested layout already has a
//html tag that depends on the language parameter
const NotFound = () => {
    return (
        <html lang="en">
            <body>
                <div className="flex flex-col gap-10">
                    <h1>Oops</h1>
                    <p>The requested page does not exist</p>
                </div>
            </body>
        </html>
    );
}

export default NotFound;

When i tried this, the custom not found page was rendered correctly and the previous logged 404 error was gone, however i got another 404 error logged in the console, looped in the same way as the previous, but the requested file is the only different thing

I realized that both the errors only occur in the dev environment, in the production environment they don't occur.
The not found page does not depend on the language params in this case.

[cloetensbrecht]

It took me a while to find a solution, but within the App Router, you can use the following to make the 404 translatable:

📦app
┣ 📂[lang]
      ┣ 📂 ...
      ┣ 📂 [...not-found]
            ┗ 📜page.tsx
      ┣ 📜 ...
      ┣ 📜globals.css
      ┣ 📜layout.tsx
      ┗ 📜page.tsx
┣ 📜layout.tsx
┗ 📜not-found.tsx

Notice the layout.tsx and the not-found.tsx at root level. The [lang]/not-found.tsx has been removed and replaced by a [lang]/[...not-found]/page.tsx file.

/layout.tsx
This will be your main layout, just containing the <html> and the <body> tags:

import './globals.css' // import your global css here

type Lang = 'en' | 'fr' | 'nl' // all the possible languages, better to define it in a separate file and import it here
const defaultLang: Lang = 'en' // the default language, better to define it in a separate file and import it here

export default function RootLayout({
	params: {lang = defaultLang},
	children
}: {
	params: {lang?: Lang} // all the possible languages
	children: React.ReactNode
}) {
	return (
		<html lang={lang}>
			<body>
				{children}
			</body>
		</html>
	)
}

/not-found.tsx
This will be your main not-found page where you can define the layout, depending of the received lang param:

type Lang = 'en' | 'fr' | 'nl' // all the possible languages, better to define it in a separate file and import it here
const defaultLang: Lang = 'en' // the default language, better to define it in a separate file and import it here

export default async function NotFound({params}: {params?: {lang?: Lang}}) {
	const currentLang: Lang = params?.lang || defaultLang
	return <div>
		{currentLang === 'en' && "We have an error"}
		{currentLang === 'fr' && "Nous avons une erreur"}
		{currentLang === 'nl' && "Er is een fout opgetreden"}
	</div>
}

/app/[lang]/layout.tsx

type Lang = 'en' | 'fr' | 'nl' // all the possible languages, better to define it in a separate file and import it here
const defaultLang: Lang = 'en' // the default language, better to define it in a separate file and import it here

export default async function RootLayout({
	params: {lang= defaultLang},
	children
}: {
	params: {lang?: Lang}
	children: React.ReactNode
}) {
	return (
		<>
			<header><nav>
				{`My nav, depending on the lang param: ${lang}`}
			</nav></header>
			<main>This [lang]/layout.tsx will be loaded inside the root layout.tsx, which will wrap the html and body tags around it.</main>
			<footer>
				{`My footer, depending on the lang param: ${lang}`}
			</footer>
		</>
	)
}

/app/[lang]/[...not-found]/page.tsx
We'll import the root not-found.tsx and pass the current language to it:

import {default as DefaultNotFound} from '@/app/not-found'

type Lang = 'en' | 'fr' | 'nl' // all the possible languages, better to define it in a separate file and import it here

export default async function NotFound({
	params: {lang}
}: {
	params: {lang: Lang, , 'not-found': string[]}
	searchParams?: {[key: string]: string | string[]}
}) {
	return await DefaultNotFound({params: {lang}})
}

Related issues:
#48763 #49095

[drnpol]

Hi, thanks for this, currently this worked for me. I thought that the dashboard will render the [...not-found]/page.tsx but it didnt .

[janpaepke]

This worked for me, too, but I modified it.

I don't have a global not-found or layout.txt - only within my lang folder.
Since my middleware is ensuring a rewrite to a language anyway, this works fine.
The key was the [...not-found]/page.tsx trick.