Docs — Integrations

Add comments to Next.js

Works with App Router and Pages Router. Drop in a script, mount a container, and you are live — with moderation, translation and AI replies.

01

Install & create a site

Create a site in Admin, verify your domain, copy the Site ID and Google Client ID.

02

Add the widget

In your layout or page, load the stylesheet and initialize the widget. No extra backend required.

03

Mount and go live

Place <div id="comment"></div> where you want comments. Each page auto-uses its pathname as the thread key.

App Router example (app/layout.tsx)

Replace YOUR_GOOGLE_CLIENT_ID and YOUR_SITE_ID. For Pages Router, move the same script to _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>
  );
}

Tips

  • • Use postId to scope threads (default: location.pathname). For i18n sites, include locale in postId.
  • • App Router: prefer loading the script in a Client Component to avoid SSR mismatch.
  • • Set locale to navigator.language for auto translation.

FAQ

Does it work with static export?

Yes. The widget is pure client-side and fetches from https://awesomecomment.org. Static pages (next export) work fine.

How to avoid layout shift?

Reserve min-height for #comment (e.g. 360px) and style with our CSS. See Examples for a live demo.

View ExamplesCompare vs Disqus