next.js: [NEXT-877] Link not working when deployed to Vercel

Verify canary release

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 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.6.0
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.8
      eslint-config-next: 13.2.1
      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-q4mphh?file=app/page.tsx

To Reproduce

Press the “Go to blog” link
Press the “Go to post” link

Describe the Bug

Pressing on the “Go to post” link after pressing on the “Go to blog” link will never perform a navigation even though the data is seemingly fetched fine from the server when looking at dev tools.

This seemingly only happens for me in the reproduction and when deploying on Vercel. It does not however happen locally on my machine on my own project using “next dev”.

Also worth noting, this is a regression and has worked before. I believe is started occurring somewhere around 13.2.x

Expected Behavior

The navigation should occur.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

_NEXT-877

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 31 (18 by maintainers)

Commits related to this issue

Add dynamic parameter marker to router cache key (#47957) ### What? Took a bit to investigate this one, eventually found that the case where it broke is this one: ``` app ├── [slug] // This ... — committed to vercel/next.js by timneutkens a year ago

Most upvoted comments

Here is the project @JesseKoldewijn https://github.com/leandromatos/next-link-fetch-error.

Try to change the language, and navigate between the home page, about page, or privacy policy page. You’ll see the fetch happing on the network tab, but the route doesn’t change.

leandromatos on Mar 21, 2023

Here is the project @JesseKoldewijn https://github.com/leandromatos/next-link-fetch-error.

Try to change the language, and navigate between the home page, about page, or privacy policy page. You’ll see the fetch happing on the network tab, but the route doesn’t change.

That might be a combination of the link component acting up with nested dynamic paths already. I don’t see anything weird in your repo tho so I think this might have to get pushed to some of the maintainers/vercel squad.

Btw, what you could try is throw a middleware in your appDir root and log the req and res. Maybe that coupd give ya some more info in your usecase.

JesseKoldewijn on Mar 21, 2023

Sorry but I can’t really reproduce the issue at hand. Checked just about the same code as you had in your stackblitz deployed on vercel and it works just fine both on windows 10/11 and linux. repo: https://github.com/JesseKoldewijn/next.js-link-test-deployed deployed: https://next-js-link-test-deployed.vercel.app/

@leandromatos if you take a look inside of this repo every page works just fine. But the page apparently is needed in the root of the [someSlug] directory to allow the route to work. Which is not really (probably) what should happen.

Unfortunately, in my project, the problem still happens. I’ll prepare a repository to share with you.

leandromatos on Mar 21, 2023