Multi Zone Relative Routing

[rcronin]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:25 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T8110 Binaries: Node: 16.16.0 npm: 8.11.0 Yarn: 1.22.19 pnpm: N/A Relevant packages: next: next@canary eslint-config-next: 12.2.5 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Using a Multi-Zone setup like the example (home and blog). The blog app needs to link back to the home application. This is done by using either a Link our router referencing the following path: ../. When using the newest version of Next, this will route to the basePath of the application. So when using it in the blog app, it routes to the root of the blog app and not the home app.

Expected Behavior

In the ideal scenario, we'd wish the blog app when referencing the parent app (home == ../) would route to the home app.

Link to reproduction

https://github.com/techomoro/multi-zone-nextjs-example

To Reproduce

Pull the above repository and upgrade to the latest version of Next. The routing will no longer work. It seems this commit possible broke the functionality?

https://github.com/vercel/next.js/commit/87826ee186fc65c0b3b4288791f4b575158371c9

[ronaldsutantio-acn]

I am facing same issue too. After upgrade to 12.3.1 from 12.1.6. redirect from http://example.com/a/a1 to http://example.com/b via router.push('../../b', undefined, { shallow: true }); is no longer work.

[ronaldsutantio-acn]

hi,

any update on this? the issue seems still there even in the latest 12 version (v12.3.3)

[jhchill666]

Same issue here

Operating System:
Platform: MacOS
Binaries:
Node: 18
Yarn: 1.22.19
Relevant packages:
next: [email protected]
react: 18.2.0
react-dom: 18.2.0

[alanjonesa4]

Saw this issue as well. That repo is wrapping <a> tags in Link components from next/link, which isn't compatible with the latest versions of Nextjs. I removed the <a> tags thinking they were superfluous, but it seems that you can't use routing with next/link between zones. You need to use an the native anchor tag.

Change the header components in each app to this and it works fine:

function Header() {
  return (
    <nav>
      <a href="/">
        Home
      </a>
      <a href="/blog">
        Blog
      </a>
    </nav>
  );
}

export default Header;

But also continue to use Link from next/link on the Posts component

[rcronin]

@alanjonesa4 - I’m not proud of this solution, but I ended up overriding the next router to handle multi zone routing for our app. I can send you over our solution if you’d like.

[alanjonesa4]

@rcronin Don't know if you saw the edit, but I figured it out eventually! Thanks!

[andre-muller]

Same issue here, relative routing is not working using NextJS Zones.

[DakotaWray2]

Issue still exists with current example.