Fix Next Link Scroll Up in production environment
The problem
I recently encountered an issue in NextJS 13, when using the Next Link component. I have an article page that links to other article pages using ArticleCards at its end. When reading a blog entry and scrolling down to the "Recommended Articles" section with the ArticleCards, upon touching the ArticleCard with the mouse, the application would instantly and unexpectedly scroll up to the top of the page. This behavior would only occur in the production environment.
Reproduction Environment
Next 13
Emotion v11
production environment (npm run build && npm run start)
How to fix
I found a quick fix by adding the prefetch={false} flag to the Next Link component like this.
I spent some time finding similar issues online to understand why this was happening. But in the end, I just went with this quick fix. If you know why this is happening, feel free to contact me.
I hope this helped!
Thank you for reading :)
