next-intl: Unable to use next-intl with parallel or intercepted routes (from App router)

I used interception routing in next14.0.4 and next-intl3.4.1, but it still doesn’t work. I found that interception routing works in the development environment, but it doesn’t work in the production environment (next build).

Intercepting routes functions properly in Next.js version 14.0.5-canary.39 when used in conjunction with next-intl. If you are using this setup with Parallel Routes, please ensure that a default.tsx file is present in the Parallel Routes directory.

Works for me with 14.0.4 now as well 👍

I think it might be more an issue with Next’s support for parallel routes; my understanding is you can’t use (.)[dynamic] currently (issue here). Since this library (and even Next’s docs on adding intl) requires a top-level dynamic [locale] path, parallel routes doesn’t work.

If you add the parallel route inside the [locale] directory, Next does perform the route interception, but it replaces the whole layout which defeats the point.

The less-than-ideal workaround I’m using is to add the parallel routes into the app directory and duplicate them for every language, eg. src/app/@authModal/(.)en/login/page.tsx (using (.)en instead of (.)[locale]). My app only has a limited number of locales so it’s currently manageable, but hopefully they’ll add support for that soon.

Edit: actually, it looks like this doesn’t work either. It works fine in development but upon building, it errors with

Support for static rendering is under consideration, please refer to the roadmap: https://next-intl-docs.vercel.app/docs/next-13/server-components#roadmap

Regardless of whether 'use client' is used.

Not much. I’ve pointed them to these existing GHIs so they are aware of them: https://github.com/vercel/next.js/issues?q=is:issue+is:open+rewrite+intercepting+route. No timeline on a fix though.

I’m also facing issues when dealing with intercepted routes, I managed to reproduce the bug in a modified version of nextgram (the demo app vercel made to showcase intercepted routes).

I created a copy of nextgram and simply set up next-intl for it, it’s available here: https://github.com/ClementDreptin/next-intl-intercepted-routes

I don’t have the errors described above by @ReesMorris but sometimes the modal doesn’t open. If I click on the first photo, it opens in a modal, but if I close this modal and try to open another photo, it goes the dedicated page instead of opening the modal (if I click on the first photo again, the modal opens as expected).

I also tried to remove the next-intl middleware and simulated its behavior by explicitely adding the locale in each link and everything works as expected, it’s available in the next-intl-simulated branch.

I suspect a problem in the middleware config matcher because the name of the route contains a dot ((.)photos). I tried to add another matcher that matches with the route but everything broke and I kept getting a ChunkLoadError when loading the home page. You can see this problem in the intercepted-routes-matcher branch.

It’s hard to tell if the problem comes from next-intl or next itself.

I hope this mimimal example will help us find a solution.

https://github.com/vercel/next.js/pull/51526 was merged, but not released yet in a stable version AFAIK. Once it is, it would be helpful if someone could confirm that this fixes this issue discussed in this thread. My impression is that there’s nothing that next-intl needs to handle in regard to parallel/intercepted routes.