react-shareでSNSシェアボタンを作る

公開日時

Next.jsアプリにSNSシェアボタンを追加する際に、react-shareを使うと手軽に導入できた。

↓のようなShareボタン用のコンポーネントを作り、呼び出し元からシェア文言とURLを渡すようにすればOK.

// components/Share.tsx
import React from 'react'
import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton } from 'react-share'

type Props = {
  text: string
  url: string
}

export const Share = ({ text, url }: Props) => {
  return (
    <ul className="flex justify-center list-none">
      <li className="mr-8">
        <TwitterShareButton url={url} title={text}>
          <TwitterIcon size={32} round={true} />
        </TwitterShareButton>
      </li>
      <li>
        <FacebookShareButton url={url}>
          <FacebookIcon size={32} round={true} />
        </FacebookShareButton>
      </li>
    </ul>
  )
}

今回はTwitter, Facebookのサンプルにしたが、react-shareはLINEやHatenaブックマークなど様々なSNSに対応している。


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった