How to fix, Next.js link doesn’t render with the page scrolled at the top

By default next js scroll at the top when navigating to another page or link, there is also a way by which you can stop scrolling when navigating to another page or URL.

Solution

Check whether your layout is not set to overflow:auto or max-height : 100vh something due to which it’s not scrolling to the top because the content is just set to max height 100vh.

join WhatsApp group

Next js Link component

there are the following props for the link component in next js which can be used

href

Href is the path of the page or which you want to navigate.

scroll

This is used to set whether the page should be scrolled at the top or not after navigating

shallow

Shallow is used to update the path of the current page without rerunning getStaticProps, getServerSideProps, or getInitialProps. its default value is false.

prefetch

You can add a prefetch prop if you want to prefetch that page in the background. The link is by default prefetched.

Alternate methods to solve scrolling problem

You can also use the following ways to solve this scrolling problem.

scroll top after on routeChangeComplete

Use router events to scroll the content to the top of the navigation complete.

import "@/styles/globals.css";

import { useRouter } from 'next/router'
export default function App({ Component, pageProps }) {

  const router=useRouter()
  useEffect(()=>{
   Router.events.on("routeChangeComplete", () => {
    window.scrollTo(0,0)
    });
   },[])
  return <Component {...pageProps} />;
}