nextjs - 💡(How to fix) Fix Broken Homepage when using App Router + Middleware + i18n config + trailingSlash config [2 comments, 2 participants]

Link to the code that reproduces this issue

https://github.com/heymath/nextjs-bug-homepage-i18n-trailingslash-middleware

To Reproduce

📝 Add dev domains in your /etc/hosts file:

127.0.0.1 www.dev.fr www.dev.es www.dev.it www.dev.de www.dev.ch www.dev.nl

• Go to: http://www.dev.fr
• See broken homepage (white screen) with logs:

  inject.bundle.js:1 Uncaught Error: Automatic publicPath is not supported in this browser
    at inject.bundle.js:1:12813
    at inject.bundle.js:1:12976
    at inject.bundle.js:1:271814
  (anonymous)	@	inject.bundle.js:1
  (anonymous)	@	inject.bundle.js:1
  (anonymous)	@	inject.bundle.js:1

You can test the following cases:

Middleware

(revert any changes)

• Rename ./src/midleware.ts into ./src/__middleware.ts for instance
• Refresh http://www.dev.fr : the Home page is working.
• Go to http://www.dev.fr/test/ : the Test page is working also.

Trailing slash

(revert any changes)

• Comment the trailinSlash: true line in next.config.ts.
• Refresh http://www.dev.fr : the Home page is working.
• Go to http://www.dev.fr/test/ : the Test page is working also.

i18n config

(revert any changes)

• Comment the i18n config in next.config.ts.
• Refresh http://www.dev.fr : the Home page is working.
• Go to http://www.dev.fr/test/ : the Test page is working also.

When it breaks with a white screen on home page, you can see that it breaks "immediately", you don't even go through the middleware where you would like to try to patch something 😬

Current vs. Expected behavior

Current behavior: white screen with error logs on homepage

Expected behavior: homepage working correctly

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:17:54 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6041
  Available memory (MB): 49152
  Available CPU cores: 12
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.5.4 // Latest available version is detected (15.5.4).
  eslint-config-next: N/A
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.9.2
Next.js Config:
  output: 22.14.0

Which area(s) are affected? (Select all that apply)

Middleware, Internationalization (i18n), Not Found, Route Handlers, Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

We are migrating the homepage of our website to be routed to our Next.js server, but when developing it in local environment we have a broken homepage with a white screen.

We were very confused to have a routing issue with the homepage which seems the easiest one.

So we started a new repo to try to reproduce our problem. And it seems that this problem appears when you use the App Router with a i18n config + a middleware + the trailingSlash config.

We are using Docker, we have pages running on the Pages Router, API routes, etc. but as you can see in the bug reproduction repository, it does not matter, a minimal config already breaks the homepage.

_NEXT-4735