One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page:
<Link href={`/products/${id}`} key={id}>
<a>
{/* other components */}
</a>
</Link>
I believe the problem lies in the fact that the link is positioned in the center of the page. When clicked, it remains at the same position instead of scrolling to the top. It may sound odd, but that seems to be what's happening.
I've attempted various solutions such as including scroll={true} or scroll={false} in the <Link> tag. I've also tried applying height: 100% to html and body in CSS. Additionally, I experimented with scroll-behavior: smooth; and other methods, yet the issue persists.
Here's a video demonstrating the problem: https://drive.google.com/file/d/1CCgFCJb1fl9RRYmW5yp41US-0yuSqpfj/view?usp=sharing
A temporary workaround is to avoid using <Link> and stick to the traditional <a> tag. Unlike <Link>, the <a> tag triggers a page reload when navigating to another page, always starting at the top.
Please note that I have tried all of the solutions mentioned above.