文档 — 接入

为 Next.js 接入评论

同时支持 App Router 与 Pages Router。引入脚本、放一个容器即可上线，审核/翻译/AI 回复齐全。

创建站点并验证域名

在后台创建站点、验证域名，复制 Site ID 与 Google Client ID。

引入组件

在 layout 或页面中加载样式并初始化组件，无需额外后端。

挂载容器

在需要评论的位置放 <div id="comment"></div>，每页自动以 pathname 作为 thread 标识。

App Router 示例（app/layout.tsx）

把 YOUR_GOOGLE_CLIENT_ID / YOUR_SITE_ID 换成你的。Pages Router 同理放到 _app.tsx。

app/layout.tsx

// app/layout.tsx — load once
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <div id="comment" style={{ minHeight: 360 }} />
        <link rel="stylesheet" href="https://unpkg.com/@roudanio/awesome-comment@latest/dist/style.css" />
        <Script type="module" strategy="afterInteractive">{`
          import { getInstance } from 'https://unpkg.com/@roudanio/awesome-auth@latest/dist/awesome-auth.js';
          import Comment from 'https://unpkg.com/@roudanio/awesome-comment@latest/dist/awesome-comment.js';
          const auth = getInstance({ googleId: "YOUR_GOOGLE_CLIENT_ID", root: "https://awesomecomment.org/api/site/auth" });
          Comment.init(document.querySelector('#comment'), {
            siteId: "YOUR_SITE_ID",
            apiUrl: "https://awesomecomment.org",
            awesomeAuth: auth,
            postId: location.pathname,
            locale: navigator.language,
          });
        `}</Script>
      </body>
    </html>
  );
}

小技巧

• 用 postId 精确控制 thread（默认 location.pathname）。多语言站建议把 locale 拼进 postId。
• App Router 建议在 Client Component 中加载脚本，避免 SSR 水合不一致。
• 把 locale 设为 navigator.language 可自动翻译。

常见问题

支持静态导出吗？

支持。组件纯客户端，从 https://awesomecomment.org 拉数据，next export 静态页可直接用。

如何避免布局抖动？

给 #comment 预留 min-height（如 360px），示例页有在线演示。

查看示例对比 Disqus