目次
Next.js で個人ブログやドキュメントサイトを運営していて、コメント機能を入れたいけれど サーバーやデータベースの管理は避けたい 人向けの記事です。GitHub Discussions をバックエンドにする Giscus[1] を使えば、無料・サーバー不要・GitHub認証つきでコメント機能が実装できます。Next.js への組み込み方と、ハマりがちなトラブルへの対処までまとめます。
Giscusとは
Giscus は GitHub Discussions をデータ保管場所として使うコメントシステムです。記事ごとに対応する Discussion スレッドが自動で作られ、そこにコメントが溜まる仕組みです[1:1]。主な特徴は次の通りです。
- 無料で使える
- サーバー・データベース不要（GitHubがホスティング）
- ログインは GitHub アカウント
- Markdown と絵文字リアクションに対応
- ライセンスは MIT
「コメント機能のためだけにDBを立てるのは面倒」という個人ブログの悩みを、GitHub のインフラで肩代わりしてもらうイメージです。
セットアップ手順
Giscus 導入の流れは「Discussions有効化 → アプリインストール → 設定値取得 → Next.js に組込」の4段階です。順に進めます。
GitHub Discussionsを有効化する
まず、コメントを保存するリポジトリで Discussions 機能を有効にします。GitHub CLI を使うと一発です。
gh repo edit your-username/your-repo --enable-discussions
ブラウザから設定する場合は、リポジトリの「Settings」→「Features」→「Discussions」にチェックを入れます。
Giscusアプリをインストールする
GitHub Apps の Giscus ページ から Giscus アプリを自分のアカウントにインストールし、対象リポジトリへのアクセスを許可します。
設定値を取得する
giscus.app の設定ジェネレータにアクセスして、以下を入力すると設定値が出力されます。
- リポジトリ:
your-username/your-repo - ページ ↔ Discussion マッピング:
pathnameまたはtitleを選ぶ（記事URLに連動するかタイトルに連動するか） - Discussion カテゴリー: 通常は
GeneralでOK - テーマ: 好みで（後でコード側から動的に変更も可能）
出力例:
{
repo: "your-username/your-repo",
repoId: "R_kgDOxxxxxx",
category: "General",
categoryId: "DIC_kwDOxxxxxx",
}
repoId と categoryId は実装時に必須なので控えておきます。
Next.jsに実装する
公式の React 用パッケージ @giscus/react[2] を使うのが最短です。
npm install @giscus/react
コメントコンポーネントを作成します（next-themes でダークモード対応する場合の例）。
// components/Comments.tsx
import Giscus from "@giscus/react";
import { useTheme } from "next-themes";
export default function Comments() {
const { theme } = useTheme();
return (
<Giscus
repo="your-username/your-repo"
repoId="R_kgDOxxxxxx"
category="General"
categoryId="DIC_kwDOxxxxxx"
mapping="title"
strict="0"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="bottom"
theme={theme === 'dark' ? 'dark' : 'light'}
lang="ja"
loading="lazy"
/>
);
}
記事ページ側に組み込みます。
// pages/posts/[slug].tsx
import Comments from '../../components/Comments';
export default function Post({ post }) {
return (
<article>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
<div className="mt-10">
<Comments />
</div>
</article>
);
}
これでビルドすると、記事ページの末尾にコメント欄が表示されます。
トラブルシューティング
セットアップでつまずきやすい代表的なケースを紹介します。
コメントが表示されない
最も多い原因は リポジトリ名やIDの間違い です。GitHub CLI の GraphQL でリポジトリIDとカテゴリIDを正しく取得できます。
gh api graphql -f query='
{
repository(owner: "your-username", name: "your-repo") {
id
discussionCategories(first: 10) {
nodes {
id
name
}
}
}
}'
返ってきた id を repoId に、対応するカテゴリの id を categoryId に貼り直します。
ダークモード対応
next-themes のテーマ状態と Giscus のテーマを連動させる場合、system テーマを考慮した分岐が必要です。
import { useTheme } from "next-themes";
export default function Comments() {
const { theme, systemTheme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
return (
<Giscus
// ...他の設定
theme={currentTheme === 'dark' ? 'dark' : 'light'}
/>
);
}
特定の記事でコメントを無効化
frontmatter に comments: false のような項目を持たせて、ページ側で分岐します。
{post.comments !== false && (
<div className="mt-10">
<Comments />
</div>
)}
セキュリティとプライバシー
実運用前に確認しておきたい点をまとめます。
- コメントは公開: GitHub Discussions に保存されるため誰でも読めます
- GitHubアカウント必須: 匿名コメントはできません（スパム対策にもなる）
- コメント専用リポジトリの選択肢: ブログ本体と分離したい場合は、コメント保管用に別リポジトリを切るのも有効
gh repo create my-blog-comments --public --enable-discussions
カスタマイズ
軽い見た目調整やUI挙動を変える場合の例です。
<Giscus
inputPosition="top" // コメント入力欄を上に
lang="ja" // 日本語UI
/>
iframe にカスタムCSSを当てる場合:
.giscus-frame iframe {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
まとめ
Giscus は「サーバーレスでコメント機能を入れたい個人ブログ」に最適な選択肢です。導入のポイントは、正確な repoId/categoryId の取得、Discussions の有効化、テーマ連動の実装 の3つ。GitHub のインフラに乗っかれるので、自分ではほぼ何もメンテナンスせずに信頼性の高いコメントシステムが手に入ります。
参考文献
Giscus 公式サイト (2026-05-10 アクセス) ↩︎ ↩︎
@giscus/react - GitHub (2026-05-10 アクセス) ↩︎