`<Link prefetch={false}>` in multiple root layouts just fetch, no transition

[wonu]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Tue Apr 18 2023 19:37:14 GMT+0900
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 8.2.0
    Relevant packages:
      next: 13.3.1-canary.12
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-8g3pxu

To Reproduce

1. Group routes with root layout, like multiple root layouts.

app
└── (group)
    ├── bar
    │   └── page.tsx
    ├── foo
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx

2. Click <Link href='/foo'>go to /foo</Link>, then page moves to /foo.
3. Click <Link href='/bar' prefetch={false}>go to /bar</Link>, then only fetch /bar, no page move.
4. And once that happened, clicking foo does the same thing as bar.

Describe the Bug

Clicking <Link> doesn't work as expected as above.

Expected Behavior

Clicking <Link> should make page transition, not just fetching.

If add root layout outside of route group or allow prefetch then the issue is not be reproduced.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[astateful]

I have the exact same issue! I have implemented my app in the same way as https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing, however if I add prefetch={false} to the links they stop transitioning, only a fetch is triggered.

[astateful]

Ok, I was able to solve my issue by including a root layout.js file, i.e. app/layout.js. The layout.js should do nothing except return the children. Probably the example https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing needs to updated as well to contain this root layout.js file. @wonu maybe would be good to try? Here are the contents of the root layout.js file I am using:

export default function RootLayout({ children }) { return children; }

[wonu]

@astateful You're right, I also wrote it in Expected Behavior with that meaning. I should have written more clearly :)

FYI, the official docs for multiple root layouts says

To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each route groups.

I'm lost and wandering :(

[astateful]

@wonu Wow I understand how you feel now, especially when the docs also write https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts

The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.

I do not have experience with using groups however, maybe my suggestion only works for dynamic routing. Either way it seems like the documentation should be more clear about when a root layout.js is required vs not.

[ekrembk]

I have the same problem. Layout re-renders (and re-fetches) if I group things and have multiple root layouts and I have prefetch={false}. With prefetch it doesn't re-fetch but I don't want prefetch, I think this is unexpected behaviour unless I am missing something.

[ekrembk]

#51292 fixed the issue on my end. It is available in canary

[huozhi]

#51292 Closes this, please upgrade to latest canary to try it again, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.