Next.js Link Scroll Behavior

January 16, 2024

nextjsreact

<Link> doesn't actually scroll to the top of the next page. It scrolls to the {children} of the layout of the next page.

If your layout has a big header that pushes the {children} below the fold, the <Link> will NOT scroll to the top of the page.

To fix this, the best solution I've found is to move the header bits to the page itself, not the layout. This way, the <Link> will scroll to the top of the page.

What about mdx?

I wrapped my entire .mdx files in <PostLayout post={metadata}> and it works fine. Not sure if this is the best solution, but it's good enough for now.