Cant get 404 working from the documentation example

[Tomekmularczyk]

Description

I'm trying to create a not-found page but cannot access it. I tried stable and beta configuration steps.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/Tomekmularczyk/next-intl-404

Reproduction description

Steps to reproduce:

1. Open reproduction
2. yarn install && yarn dev
3. go to /abc (random URL)
4. See that not-found.tsx page is not render but a default 404 page

Expected behaviour

I should see a page from not-found.tsx file

[amannn]

This is quite strange.

I see that /abc (which uses the default locale) results in the root not-found page being rendered, but /de/abc is handled by the not-found page within [locale].

If you debug the request like so:

import createMiddleware from "next-intl/middleware";

const middleware = createMiddleware({
  // A list of all locales that are supported
  locales: ["en", "de"],

  // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
  defaultLocale: "en",
});

export default function handler(request) {
 const response = middleware(request);
 console.log(response);
 return response
}

export const config = {
  // Skip all paths that should not be internationalized. This example skips the
  // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

You see this on the console:

x-middleware-rewrite: 'http://localhost:3001/en/abc'

Something seems fishy here, quite possibly on the Next.js side, as this used to work in earlier versions. Maybe you can further reduce the example, possibly by removing next-intl and if the bug persists open an issue in the Next.js repo?

Note that there is generally a bug with not-found pages currently in Next.js: #423

As a temporary workaround, you might want to downgrade Next.js to the latest version that has been tested in this repo (13.4.7).

[Tomekmularczyk]

This is quite strange.

I see that /abc (which uses the default locale) results in the root not-found page being rendered, but /de/abc is handled by the not-found page within [locale].

If you debug the request like so:

import createMiddleware from "next-intl/middleware";

const middleware = createMiddleware({
  // A list of all locales that are supported
  locales: ["en", "de"],

  // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
  defaultLocale: "en",
});

export default function handler(request) {
 const response = middleware(request);
 console.log(response);
 return response
}

export const config = {
  // Skip all paths that should not be internationalized. This example skips the
  // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

You see this on the console:

x-middleware-rewrite: 'http://localhost:3001/en/abc'

Something seems fishy here, quite possibly on the Next.js side, as this used to work in earlier versions. Maybe you can further reduce the example, possibly by removing next-intl and if the bug persists open an issue in the Next.js repo?

Note that there is generally a bug with not-found pages currently in Next.js: #423

As a temporary workaround, you might want to downgrade Next.js to the latest version that has been tested in this repo (13.4.7).

Thank for looking at it. I removed the next-intl and then opened /en/abc URL. The custom [locale]/not-found.tsx gets rendered - which the expected behavior. If I try simply /abc then [locale]/page.tsx gets rendered

[amannn]

If I try simply /abc then [locale]/page.tsx gets rendered

Why does the page get rendered when a not-found page should match?

Did you add a middleware with a rewrite to a localized path, so that the x-middleware-rewrite: /en/abc header value gets set from Next.js when you request /abc?

With next@13.4.12, directly visiting /en/abc from browser (not navigating from within the application) renders the non-found page without any Layout. Everything works with 13.4.7, as long as the path is matched by the middleware to set the language (or with a default)

[minkesh-pidilite]

Do we have any update on this ? I am facing the same issue.

[amannn]

I just looked at the reproduction from @Tomekmularczyk and was able to fix it with the most recent Next.js version. It seems like the issue could be resolved by removing the root layout: amannn/next-intl-404@8abfbc2

The issue in the example was that both the root layout, as well as the nested layout tried to render html tags.

Do note though that newer Next.js versions have a related issue for not found pages though: #423 (this needs to be fixed on their end).

[mbret]

Problem is still here with very latest version

[Tomekmularczyk]

Actually this seems to be fixed for me with the latest version of me the 13.5.2