Next.js multi zones with i18n and shared components

[amosbastian]

I am using Next.js' multi zone feature with a blog and web app so I can develop and deploy both apps independently. It was easy to set up by following the with zones example and I have set up a blog app at port 4200 and a web app at port 3000, which is working fine. Unfortunately I am encountering some problems that aren't described anywhere in Next.js' documentation (as far as I can tell).

First of all, I am also using internationalised routing which is working fine, however when going to my blog app it appends the locale to the end of the URL. Imagine I am on localhost:3000/en and navigate to the blog app, then it will show localhost:4200/blog/en instead of localhost:4200/en/blog. Is there any way around this (e.g. by using rewrites)?

Secondly, I am working in a monorepo and have shared components between both apps, such as the header and footer, which obviously includes navigation. When I am on the blog and want to navigate to e.g. the /about page, then it will obviously navigate to localhost:4200/blog/about instead of localhost:3000/about. One solution is to check the base path in the navigation component and then prepend e.g. localhost:3000 to the href if the base path equals blog, but that refreshes the entire app and does not result in smooth navigation, so it's not really ideal. Is there anything else can I do about this?

It seems others also have the same problem, and I can't find anything about this in Next.js' documentation, so any help would be appreciated 😁

[tth-nine]

Did you solve this ? (:

[HECHONG999]

Did you solve this ? i need your hand

[brunoslash76]

Any solution found?

Thanks ;)