Add Custom 404 (Page Not Found) to Next.js 14 App Directory + Next-intl

Recently I wanted to add a custom 404 not found page to one of my Next.js 14 projects with the app directory which had Next-intl for handling localization. But unfortunately, in these recent versions of Next.js (from 13), there is no official document for adding a custom 404 not found page, only some old boring API references.

So here we are:

For adding a new custom 404 not found page to your Next.js 14 projects you need to do 2 things:

1. Create a not-found.tsx component and put it in your root project under [locale]. This will be your custom 404 not found page.
2. Create a page called [...not_found] in the root project under [locale] and add notFound() from next/navigation to it.

So now your root directory should look like this:

app
└── [locale]
├── [...not_found]
│ └── page.tsx
├── global.css
├── layout.tsx
├── not-found.tsx
└── page.tsx

Your custom 404 page (you can add anything you want to it):

// not-found.tsx
export default function NotFound() {
  return <div>404 not found</div>;
}

General 404 route handler on every 404 action this page would be called:

// app/[locale]/[...not_found]/page.tsx
import { notFound } from 'next/navigation';
 
export default function NotFoundCatchAll() {
  notFound();
}

That's it! Now you have a custom 404 not found page in your Next.js 14 app directory with Next-intl.