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 their 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 their documentation (as far as I can tell).

First of all, I am also using their 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 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?

Seemingly the multi zone feature is really only suitable for very small apps or I'm missing something. It seems others also have the same problem, if I am missing something, then the documentation could definitely be at the least.