【Next.js】シェアボタンを設置する

ライブラリ

react-share を使用します。

インストール

yarn add react-share

実装

まずはインポートします。
今回は Twitter, Facebook, Line, Hatenaを使用します。(この記事の下部にあるものと同じ)

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

後は設置したい箇所に、下記のように記載するだけです。

<TwitterShareButton url="https://prism-cube.com" title="ページタイトル">
　　<TwitterIcon size={30} round={true} />
</TwitterShareButton>

<FacebookShareButton url="https://prism-cube.com" quote="ページタイトル">
　　<FacebookIcon size={30} round={true} />
</FacebookShareButton>

<LineShareButton url="https://prism-cube.com" title="ページタイトル">
　　<LineIcon size={30} round={true} />
</LineShareButton>

<HatenaShareButton url="https://prism-cube.com" title="ページタイトル">
　 <HatenaIcon size={30} round={true} />
</HatenaShareButton>