目次
ブログにコメント機能を追加したいけど、サーバーやデータベースの管理は避けたい。そんな時に便利なのがGiscusです。GitHub Discussionsを使ったコメントシステムで、Next.jsブログへの導入方法と、実際に遭遇したトラブルの解決方法を紹介します。
Giscusとは
GiscusはGitHub Discussionsを利用したコメントシステムです。主な特徴：
- 無料で利用可能
- サーバー不要（GitHubがホスティング）
- 認証はGitHubアカウント
- Markdownサポート
- リアクション機能（👍 👎 😄 など）
セットアップ手順
1. GitHub Discussionsを有効化
まず、コメントを保存するリポジトリでDiscussionsを有効にします。
# GitHub CLIを使う場合
gh repo edit your-username/your-repo --enable-discussions
または、GitHubのリポジトリ設定から「Features」→「Discussions」にチェックを入れます。
2. Giscusアプリをインストール
giscus.appからGiscusアプリをインストールし、対象リポジトリへのアクセスを許可します。
3. 設定値を取得
giscus.appにアクセスして、必要な設定値を取得します：
- リポジトリ:
your-username/your-repo - ページ ↔ Discussionマッピング:
pathnameまたはtitleを選択 - Discussion カテゴリー:
Generalなど - テーマ: お好みで選択
設定後、以下のような値が生成されます：
{
repo: "your-username/your-repo",
repoId: "R_kgDOxxxxxx",
category: "General",
categoryId: "DIC_kwDOxxxxxx",
// その他の設定
}
4. Next.jsに実装
必要なパッケージをインストール：
npm install @giscus/react
コメントコンポーネントを作成：
// 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" // or "pathname"
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>
);
}
トラブルシューティング
コメントが表示されない
最も多い原因はリポジトリ名の間違いです。
// ❌ 間違い（ユーザー名が違う）
repo="wrong-username/your-repo"
// ✅ 正しい
repo="your-username/your-repo"
GitHub CLIで正しい値を確認：
# リポジトリIDとカテゴリーIDを取得
gh api graphql -f query='
{
repository(owner: "your-username", name: "your-repo") {
id
discussionCategories(first: 10) {
nodes {
id
name
}
}
}
}'
ダークモード対応
Next.jsのテーマと連動させる場合：
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'}
/>
);
}
特定の記事でコメントを無効化
フロントマターで制御する場合：
// pages/posts/[slug].tsx
export default function Post({ post }) {
return (
<article>
{/* 記事本文 */}
{/* commentsがfalseでない場合のみ表示 */}
{post.comments !== false && (
<div className="mt-10">
<Comments />
</div>
)}
</article>
);
}
セキュリティとプライバシー
考慮すべき点
- GitHubアカウントが必要: 匿名コメントは不可
- 公開情報: コメントはGitHub Discussionsで公開される
- スパム対策: GitHubの仕組みを利用
リポジトリの選択
コメント専用のリポジトリを作成することも可能：
# コメント専用リポジトリを作成
gh repo create my-blog-comments --public --enable-discussions
これにより、ブログのソースコードとコメントを分離できます。
カスタマイズ
表示位置の調整
<Giscus
// ...
inputPosition="top" // コメント入力欄を上に
/>
言語設定
<Giscus
// ...
lang="ja" // 日本語UI
/>
カスタムCSS
Giscusのiframeにカスタムスタイルを適用：
.giscus-frame {
margin-top: 2rem;
}
.giscus-frame iframe {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
まとめ
Giscusを使えば、サーバー管理なしで高機能なコメントシステムを実装できます。設定のポイント：
- 正確なリポジトリ名を使用する
- Discussionsを有効化する
- テーマ連動でユーザー体験を向上
- 適切なマッピング方法を選択（titleまたはpathname）
GitHubのインフラを活用することで、スケーラブルで信頼性の高いコメントシステムを簡単に実現できます。
