Ma-Kas
Ma-Kas

Reputation: 1

Next.js link prefetch causes scroll to top

I have a page to view a blog post, that is fetched from the cms. At the very bottom of the page I have an info section for the blog post with its categories, tags, and related posts. Those are all link components to the respective page.

When scrolling down the blog post, at some point the scroll just jumps back to the top of the page. Managed to figure out through DevTools it happens the moment any of those link components come into view and get prefetched.

const BlogPostView = ({ postData }: { postData: Post }) => {
  return (
    <>
      <article className={classes['blog_post_main']}>
        <h1 className={classes['blog_post_title']}>{postData.title}</h1>
        <UserInformation user={postData.user} postDate={postData.updatedAt} />
        {constructComponentTree(JSON.parse(postData.content))}
        <footer className={classes['blog_post_footer']}>
          <section className={classes['blog_post_categories']}>
            <span>Categories:</span>
            <div className={classes['post_category_link_container']}>
              {postData.categories.map((category, index, arr) => {
                return (
                  <Fragment key={category.id}>
                    <Link
                      href={`/blog/categories/${category.categorySlug}?page=1`}
                      aria-label={`Category: ${category.categoryName}`}
                    >
                      {category.categoryName}
                    </Link>
                    {index + 1 !== arr.length && <span>&#183;</span>}
                  </Fragment>
                );
              })}
            </div>
          </section>
          <section className={classes['blog_post_tags']}>
            Tags:
            <div className={classes['post_tag_link_container']}>
              {postData.tags.map((tag, index, arr) => {
                return (
                  <Fragment key={tag.id}>
                    <Link
                      href={`/blog/tags/${tag.tagSlug}?page=1`}
                      aria-label={`Tag: ${tag.tagName}`}
                    >
                      {tag.tagName}
                    </Link>
                    {index + 1 !== arr.length && <span>&#183;</span>}
                  </Fragment>
                );
              })}
            </div>
          </section>
        </footer>
      </article>
      {postData.relatedPosts && postData.relatedPosts.length !== 0 && (
        <RelatedPostGridSection posts={postData.relatedPosts}>
          <SectionHeading>
            <span>related</span>&nbsp;posts
          </SectionHeading>
        </RelatedPostGridSection>
      )}
    </>
  );
};

Not really sure where to even start, as prefetching links shouldn't cause scrolling, and doesn't on any other page. The other strange thing, it doesn't happen locally, only after deploying, so a bit annoying to debug.

Upvotes: 0

Views: 49

Answers (0)

Related Questions