サクッとシェアボタンに対応したい！と思い、react-shareなるものを使用してみました。
公式:https://www.npmjs.com/package/react-share

最初はてブがないのかなと思ったけど下記の神がプルリクを出してくれててマージされているので現在ははてブもサクッとreact-shareで作れます…！
https://blog.hellorusk.net/posts/20200618

ソースコードなど

まず、必要なものをインポートします。今回はTwitterとはてブとFacebookを使います。

import {
  TwitterShareButton,
  FacebookShareButton,
  HatenaShareButton,
  TwitterIcon,
  FacebookIcon,
  HatenaIcon,
} from "react-share";

このブログの場合、ブログの動的ルーティングはcontentfulで設定しているスラッグを使用しています。なので、getStaticPaths経由でgetStaticPropsに渡ってきているので、それをコンポーネントに渡します。

export const getStaticProps = async ({ params }) => {
  const post = await client.getEntries({content_type: "blogPost", "fields.slug": params.slug})
  const category = await client.getEntries({content_type: "category"})

  return {
    props: {
      post: post.items[0],
      category: category.items,
      slug: params.slug
    },
  }
}

コンポーネントの引数で受け取り、下記のようにコンポーネントを表示します。

<TwitterShareButton url={`https://type-any.com/blog/${slug}`} title={post.fields.title}>
  <TwitterIcon size={32} round={true} />
</TwitterShareButton>
<FacebookShareButton url={`https://type-any.com/blog/${slug}`} quote={post.fields.title}>
  <FacebookIcon size={32} round={true} />
</FacebookShareButton>
<HatenaShareButton url={`https://type-any.com/blog/${slug}`} title={post.fields.title}>
  <HatenaIcon size={32} round={true} />
</HatenaShareButton>

スタイリングはお好みで。