next.js: Internationalization and not-found page not render

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.17.1
      npm: N/A
      Yarn: N/A
      pnpm: 8.6.7
    Relevant Packages:
      next: 13.4.20-canary.26
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which example does this report relate to?

app-dir-i18n-routing

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

When following the Internationalization example, with dynamic lang routing and a middleware, the not-found.tsx file is not render but he NextJs default one. My no-found.tsx file is located under the dynamic lang (or locale) segment because I want to be able to translate it.

I moved all my root file under the dynamic segment as the instruction describe it:

Of course, when I have a root layout and a no-found.tsx files under /app, it is working as expected but without the lang parameter available.

Expected Behavior

The not-found.tsx file must be render with the lang props.

To Reproduce

Clone the app-dir-i18n-routing repo, add a simple not-found.tsx file under [lang] repository.

import Link from 'next/link'

export default function NotFound() {
  return (
      <div>
        <h2>Not Found</h2>
        <p>Could not find requested resource</p>
        <Link href="/">Return Home</Link>
      </div>
  )
}

Then trigger any route, for example : http://localhost:3000/en/foo. It is the default 404 page invoked not the previous created one.

About this issue

Original URL
State: closed
Created 10 months ago
Comments: 15 (1 by maintainers)

Most upvoted comments

Sorry @AlexandreMouyen , my bad 😕

It’s not the best solution, but I found a way around the problem.

You can create a Catch-all Segment, called [...notFound], in which you have the lang (in your case the locale) coming from the query params, this way you can pass the props to the NotFound component and use the dictionary inside it.

I’ll put below how I did it to better illustrate:

The folder tree:

app/[lang]/not-found.tsx

import { Locale } from '../../i18n-config'
import { getDictionary } from '../../get-dictionary'

export default async function NotFound({ params: { lang } }: { params: { lang: Locale } }) {
  const dictionary = await getDictionary(lang)
  return (
    <div>
      {/* Using the dictionary by selected language: */}
      <h2>{dictionary['server-component'].welcome}</h2>
      <h2>Not Found</h2>
    </div>
  )
}

app/[lang]/[...notfound]/page.tsx

import NotFound from '../not-found'

export default async function Page(props: any) {
  return <NotFound {...props} />
}

Maybe not the best solution, but it solves the problem

htkimura on Sep 13, 2023

My domain name is not good and I do not have description (TODO) but for me it is looks like to work:

My default locale is en-US

AlexandreMouyen on Sep 23, 2023

Dude thank you so much! It is working fine!

Very good workaround.

AlexandreMouyen on Sep 13, 2023