i18n for not-found page

[simpel]

Hi all!

I'm using the new app router and the described way of doing i18n, it works fine, I get the locale passed as a param to all pages, except the root not-found page. How can I localize that page? And also, is there a way of having differend not-found pages? I have one at app/ that gets shown all the time, when I add a not-found.tsx at /[locale]/ its not used?

The selected not-found.tsx never gets used.

[devjiwonchoi]

It is natural that your root not-found.tsx is not affected by localization since it is out of the /locale folder.
Since you already have another not-found.tsx inside your /locale folder, that can be your "Localized" Not Found page.

Note that you need to call notFound() function if you want to use the not-found.tsx on the same directory.

The notFound function allows you to render the not-found file within a route segment...

Example code:

import { notFound } from 'next/navigation';
 
async function fetchUsers(id) {
  const res = await fetch('https://...');
  if (!res.ok) return undefined;
  return res.json();
}
 
export default async function Profile({ params }) {
  const user = await fetchUser(params.id);
 
  if (!user) {
    notFound();
  }
 
  // ...
}

Then your "Localized Not Found" page could be used.

// [locale/not-found.tsx]

import Link from 'next/link';
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  );
}

[simpel]

Thanks for answering! But I would expect the not-found.tsx in [locale] to be rendered when I visit /en_GB/some/dir/that/does/not/exist but it does not, it only renders the not-found.tsx at the root level. Any ideas why?

[devjiwonchoi]

When you set your [locale] folder, it means that the route catches only /something.
If you want to set the route as /en_GB/some/dir/that/does/not/exist,
you need to change your locale folder name as Catch-all Segments, which is [...locale].

Since the notFound() function renders within a route segment, your /en_GB/some/dir/that/does/not/exist is technically out of range of your [locale] folder, which is why the root not-found.tsx is being rendered.

In conclusion, change your [locale] folder name to [...locale].

UPDATE

@simpel @nikkizol Apologies for providing an inefficient answer.

I have to update the answer since setting the locale to catch all segments is not the best practice & experience for developers.

/[locale]/login - notFound

/[locale]/catch-all/segments - notFound

/ - notFound (outside locale)

[simpel]

jesus... can't believe i didnt see that.... thanks!

[nikkizol]

@simpel have the same structure but I am getting - Error: Catch-all must be the last part of the URL.

[devjiwonchoi]

@nikkizol I'm assuming that you've tried to set more route segments after [...slug]?

/[...slug]/another-route/page.tsx is invalid.

[nikkizol]

@devjiwonchoi here is my structure

[MasteringBOX]

Hi!

This solution works to render the not-found located in the catch-all segment. However, how do we get the params in the NotFound function? In the docs it says it doesn't accept any props so I can't get the locale in the NotFound function, how I'm I supposed to localize the text?

Any help would be appreciated.

[oemer-aran]

Did you find a solution?

[devjiwonchoi]

Hey everyone I'm trying to open a feature request for this issue and work on it, and just to confirm, how are you guys currently translating the not-found page?

[foadtkf]

I created a page.jsx inside a folder [...rest] which is located in the [lang] folder. The translation is working though but sometimes it shows an error that error.js should be a client component. Do you have any better solution bro?

[MasteringBOX]

I do the same thing. The problem is that this doesn't throw a 404 to the browser, it sends a 200 code.

@foadtkf if you get that error is because you have an error.js file, that file has to be a client component and you have to add the "use client" directive.

[foadtkf]

No, it's not bcz of that. As i'm using server side translation, and nextjs somehow automatically declaring this page.tsx as error.tsx. do you have any better approach for that? It's working fine though but showing error in the terminal

[PxlSyl]

Hi! Tried a lot of things, but still unable to translate the not-found page

[blame2020]

@MasteringBOX

The problem is that this doesn't throw a 404 to the browser, it sends a 200 code.

I have same problem..
Have you already solved this problem?

[arthurpolon]

What worked for me was to create a 'Catch all route' inside '[locale]' and simply return 'notFound'

This way if the route does not match any other route inside '[locale]' It will match this 'Catch all route' and return 'notFound'

[MasteringBOX]

Yeah but that 404 page will not be localized

[vrushank]

@MasteringBOX You are right. Facing the same issue where i tried to print params or pathname using following code:

const pathName = usePathname()

console.log(pathName)

it prints following:

/fr/asdf
/_next/static/css/app/[lang]/styles.css.map

Same thing happens with page params as well. I get _next in the lang param.

I have also defined following in middleware

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ]
}

It looks like due to catching all the routes it catches the css route. Do you face the same issue? Have you found any solution to this?

[GuillaumeCode17]

Like Magic... thank you a lot.

here's my structure for further reference....

[Minf97]

it does work, but remain some problem ...

I set proxy in my middleware.js so that when it matches URL and proxy to the destination. But as the result of [...notFound] , my middleware doesn't work

Have any solution to this problem? Thanks a lot.

[lohnsonok]

I solved this by making a redirect in the app/not-found.tsx (output: 'export' support)

And have a not-found page.tsx localized:

app/not-found/page.tsx

Be sure to process paths that don't return a valid locale at level 1 to redirect to your default locale.

[PPHelios]

I found a solution that worked for me on https://next-intl-docs.vercel.app/docs/environments/error-files , I'm not using the same i18n library but the solution provided is global.

[foadtkf]

But it wont work if the translation uses server-side-rendering.

[eivindml]

Any progress on this? Seems like a reasonable thing to expect. To get the locale as a prop to NotFound route.

[iamrenejr]

Tossing my hat into the ring. Regardless of the means to redirect to it, if what we return is the not-found.tsx page, it will not have access to the locale, meaning the error page cannot be localised server side. This forces me to render the error page client side since I need to be able to localise my error page.

[jbukuts]

Came up with a somewhat elegant fix for my use case. For some context, I'm exporting the site as static assets currently.

What I did was create a new page next to the catch-all segment called not-found within the [locale] segment. So it's understood as /[locale]/not-found.

This page is created as a static asset and can be localized for every locale at build as a server component.

I then created a top-level not-found.tsx. However instead of this page rendering anything it will look at the current pathname and extract the locale from it (I have a list of valid locales so non-existent ones fallback to en) and redirect. So something like /en/im-not-real would redirect to /en/not-found and so on.

Downside to this approach is of course you will no longer see the original URL since it redirects.

Upside is you get server components for your not found page and inheritance from the layout.

Structure for reference:

Top-level not-found.tsx:

export default function NotFound() {
  const pathName = usePathname();
  const locale = pathName.split('/')[1];
  const finalLocale = locales.includes(locale) ? locale : DEF_LOCALE;
  return redirect(`/${finalLocale}/not-found`, RedirectType.replace);
}

Also, for this site every page will have a locale. That's why I make the assumption I can extract it from the pathname.

[foadtkf]

what if the default locale is excluded from the URL...?

[krckyboy]

What do your layout.tsx files look like? I get hydration errors for lang.

[jbukuts]

@foadtkf If no locale can be found in the URL than a fallback is used. In my case en.

[jbukuts]

@krckyboy Top level does nothing but return children. Just for metadata. The one within [locale] looks like:

export default function LocaleLayout({
  children,
  params: { locale }
}: Readonly<LocaleLayoutProps>) {
  unstable_setRequestLocale(locale);

  const messages = useMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider
          messages={pick(messages, ['UIShell', 'components'])}>
          <UIShell>
            {children}
          </UIShell>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

This is for static asset generation so unstable_setRequestLocale is used.
https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-unstable_setrequestlocale-to-all-layouts-and-pages

[lorenzo-dallamuta]

I read through the whole thread without seeing mention of a possible hack which pieces together the other solutions while having a localized custom error page and returning a 404 status code:

the idea is still to have a catch-all route inside the [locale] dynamic route segment which should only return the notFound() function from next/navigation, at that point the not-found.tsx page from the root folder is going to be rendered, but since it's being rendered through the components inside the [locale] path segment the original url will be maintained

from there you can detect the locale however you prefer (I'm doing it with next-intl), but the point is that the url will be something like https://my-site/**en**/unknown-page, you'll be responding to the browser with a 404 and the jsx will be whatever you specified in your root level not-found.tsx which is gonna have access to the current locale

obviously this looks and feels like a hack, a proper solution with the possibility to set a custom error code would be greatly welcome

[lorenzo-dallamuta]

mind that this works for me because I'm redirecting all routes to a localized path with next-intl at the middleware layer (so that the not found page will always be rendered through the [locale] path segment)

[salman486]

Below is the solution that is neat and clean and worked for me.

Make sure to put layout and not-found.tsx outside of [locale] directory

middleware.ts // make sure matcher has /((?!_next|_vercel|.*\\..*).*) to redirect URLs with that does not have locales to with locales

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["en", "fr"],

  defaultLocale: "fr",
});

export const config = {
  matcher: ["/", "/(fr|en)/:path*", "/((?!_next|_vercel|.*\\..*).*)"],
};

i18n.ts

import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";
import { locales } from "./config";

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`./messages/${locale}.json`)).default,
  };
});

next.config.mjs

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin("./src/i18n.ts");

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

[aapostolou]

For anyone looking for a solution for this on NextJS 15+, i have found a solution

First off, on the middleware i added the current path to the headers in order to use it later to get the locale

// middleware.ts
...
const headers = new Headers(request.headers)
headers.set('x-current-path', request.nextUrl.pathname)
...

After setting the headers i created a function called getLocaleFromPathname, which checks the path for the locale or uses the default one if it doesn't exists. (similar to what you are probably doing on your middleware)

// utils/getLocaleFromPathname.tsx
import { headers } from 'next/headers'

import { DictionaryLanguages } from '@/dictionaries/dictionaries' // This is just the type of the locales - 'en' | 'gr'

export const locales: string[] = ['en', 'gr'] as const
export const defaultLocale: (typeof locales)[number] = 'en'

export const getLocaleFromPathname = async (): Promise<DictionaryLanguages> => {
  const headerList = await headers()
  const pathname = headerList.get('x-current-path') ?? ''

  const locale =
    locales.find(
      (locale) =>
        pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    ) ?? defaultLocale

  return locale as DictionaryLanguages
}

I move both layout.tsx and not-found.tsx to the root (under /app)

Now on both of them you can just run the getLocaleFromPathname function instead of getting the locale from the params prop

// layout.tsx
import { getLocaleFromPathname } from '@/utils/getLocaleFromPathname'

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const locale = await getLocaleFromPathname()

  return (
    <html lang={locale}>
      <body>
        {children}
      </body>
    </html>
  )
}

// not-found.tsx
import { getDictionary } from '@/dictionaries'
import { getLocaleFromPathname } from '@/utils/getLocaleFromPathname'

export default async function NotFound() {
  const locale = await getLocaleFromPathname()
  const dict = await getDictionary(locale)

  return (
    <div>
      <h1>{dict['not-found'].title}</h1>
    </div>
  )
}

Hope this helps. Happy Coding !