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

この記事は公開から2年以上経過しています。内容が古くなっている可能性があります。

giscusとは

https://giscus.app/ja

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

Next.jsで使ってみる

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

Demo

Create Next App

Generated by create next app

https://giscus-test-liard.vercel.app/

1. giscusの設定

リポジトリを作成します。
作成したリポジトリにgiscusをインストールします。
リポジトリのSettingsからDiscussionsを有効にします。

スクリーンショット

https://giscus.app/jaにアクセスしてステップバイステップで設定できます。

2. Next.jsで使う

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

GitHub - evesquare/giscus-test

Contribute to evesquare/giscus-test development by creating an account on GitHub.

https://github.com/EveSquare/giscus-test

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を使ってコンポーネントを読み込むようにします。

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>
  );
}