Next.js link doesn't render with page scrolled at the top

Solution 1:

Ended up doing this in the main app.js file:

  componentDidMount() {
    Router.events.on('routeChangeComplete', () => {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    });
  }

Solution 2:

I had this experience and I tried a lot of ways to get it to work but it didn't. This kind of route change behavior is supposed to happen by default except you're doing something different.

I noticed that after I removed overflow-x: hidden from my html/body tag everything started to work normally.

Try not to use this form of styling in your html/body element:

html, body {
- overflow-x: hidden;
}

You can set a wrapper element's (i.e div) maximum width to 100vw and overflow-x:hidden to archive the same thing.