在 Next.js 博客中添加 Giscus 评论区（完整指南）

前言

在尝试了 Hugo 与 Notion 的博客方案后，我决定自己动手搭建一个博客项目。
项目仓库地址 👉 https://github.com/836108186/blog_zxyj

基于 Tailwind + Next.js Starter Blog 完成基础功能后，我发现：

没有评论区的博客，总感觉少了点交流的温度。

于是我对比了多种评论系统（如 Disqus、Utterances、Gitalk 等），最终选择了 Giscus —— 一个基于 GitHub Discussions 的无后端评论方案。 以下是我为博客启用 Giscus 的完整记录与避坑指南。

一、创建支持 Giscus 的 GitHub 仓库

使用 Giscus 前，你需要先有一个 GitHub 仓库。 如果你和我一样使用 Next.js Starter Blog，可以直接点击仓库右上角的 “Use this template” 来快速创建自己的博客仓库。如果没有的话就只能动动大家的小手创建一下了。

二、安装 Giscus App

要让访客能发表评论，必须先在 GitHub 上安装 Giscus App。

1. 打开链接：https://github.com/apps/giscus
2. 点击 Install（若已安装则显示 Configure）
3. 选择：
   • 仅安装在指定仓库（推荐：选择你的博客仓库）
   • 或 安装在所有仓库（如果有多个博客项目）
4. 安装后，可在 GitHub → Settings → Applications 中重新配置。

三、生成并嵌入 Giscus 脚本

1. 访问 https://giscus.app/zh-CN；
2. 选择仓库；
3. 选择 Discussion 分类（如 “General”）；
4. 复制自动生成的 <script> 代码；
5. 将其粘贴进博客模板底部

示例代码：

<script src="https://giscus.app/client.js"
        data-repo="你的GitHub用户名/博客仓库名"
        data-repo-id="仓库ID"
        data-category="Github Discussions分类"
        data-category-id="分类ID"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

保存部署后，你的博客页面将自动出现一个漂亮的评论区

排查常见问题