ブログ等に簡単にコメント機能がつけれる「giscus」をNext.jsで使ってみた

giscusとは

GithubのDiscussion機能を用いたコメントシステムです。Githubのアカウントがあれば簡単に使えてコメントも出来るようになります。

Next.jsで使ってみる

Next.jsで作成したサイトやブログに導入することがあると思います。
実際にNext.jsで使ってみたので、その手順を紹介します。

Demo

1. giscusの設定

1. リポジトリを作成します。
2. 作成したリポジトリにgiscusをインストールします。

1. リポジトリのSettingsからDiscussionsを有効にします。

2. Next.jsで使う

App Routerで構築されたNext.jsのページにgiscusを埋め込みます。
全体のコードはこのリポジトリにあります。

app/giscus.tsx

export const Giscus = () => {
  return (
    <>
      <div className="giscus"></div>
      <script
        src="https://giscus.app/client.js"
        data-repo="EveSquare/giscus-test"
        // ...(1.)で作成したscriptタグを貼り付けます。
      ></script>
    </>
  );
};

3. 動作確認

そのままコンポーネントを表示するとHydration Errorが発生するので、Dynamic Importを使ってコンポーネントを読み込むようにします。

pages.tsx

import dynamic from "next/dynamic";

const Giscus = dynamic(() => import("@/app/giscus").then((m) => m.Giscus), {
  ssr: false,
});

export default function Home() {
  return (
    <main>
      <Giscus />
    </main>
  );
}

ローカルでコメントをしたら....

Github Discussionsの方でも反映されています✨

まとめ

Next.jsでgiscusを使う手順を紹介しました。
簡単にコメント機能を追加できるので、ぜひ使ってみてください。