NextJs Multi Zones Shared Header

Question

I have 2 apps admin-shell and delivery-management and i am using Multi Zones to handle that in NextJs.

Both these applications use a shared header with navigation links but i'm facing problem navigating from one zone to other zone.

Admin-Shell running on port 4201 with next.config.js file

module.exports = {
basePath: '/main',
rewrites: async() => {
    return [{
            source: '/delivery-management',
            destination: `http://localhost:4202/delivery-management`,
            basePath: false,
        },
        {
            source: '/delivery-management/:path*',
            destination: `http://localhost:4202/delivery-management/:path*`,
            basePath: false,
        },
    ];
},
};

Delivery-Management running on port 4202 with next.config.js file

module.exports = {
basePath: '/delivery-management',
rewrites: async() => {
    return [{
            source: '/main',
            destination: `http://localhost:4201/main`,
            basePath: true,
        },
        {
            source: '/main',
            destination: `http://localhost:4201/main/:path*`,
            basePath: true,
        },
    ];
},
};

The header is a separate shared module with navigation bar. I'm having a problem with relative links. Consider following links:

1- /main/main-dashboard

2- /delivery-management

When i'm in Delivery-Management application it appends the basePath with links like this

"/delivery-management/main/main-dashboard" due to which the page doesnt load. It should be absolute like "/main/main-dashboard".

What could be the possible solution for this? How can i use absolute urls instead of relative urls with Next/Link.

Did you manage to figure this out? – Amos Aug 29 '21 at 19:05 — Amos, Aug 29 '21 at 19:05
@vwos nah man, i shifted to Piral.io – Shahrukh Shahid Sep 05 '21 at 19:57 — Shahrukh Shahid, Sep 05 '21 at 19:57

score 0 · Answer 1 · answered Oct 14 '22 at 15:16

I know it's too late but I came across this problem myself today and I found and experimental configuration features which allows for the Link component not adding the basePath at all so you can control from your components whether you want to include it or not in the href.

The property is called manualClientBasePath and you should add it in under the experimental root property of your next.config.js file.

Here is an example:

score -1 · Answer 2 · answered May 12 '21 at 04:57

-1

One of the base paths must be /. Considering your code, I think you should change your /main to just / and the application should work just fine.

answered May 12 '21 at 04:57

Prasheel

985
5
22

NextJs Multi Zones Shared Header

2 Answers2

Linked