Next.js

Set up with the CLI

npx @commentkit/cli init

It finds Next.js, writes NEXT_PUBLIC_COMMENTKIT_KEY to .env.local, wraps your next.config in withCommentKit() and adds .commentkit/ to .gitignore.

It asks before each change. --yes applies them all and --install also installs the packages. To do it by hand, follow the steps below. See the CLI guide for the other commands.

Add the widget

npm install @commentkit/comment-kit

import { CommentKit } from "@commentkit/comment-kit/react";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        {children}
        <CommentKit project={process.env.NEXT_PUBLIC_COMMENTKIT_KEY!} />
      </body>
    </html>
  );
}

Place it once, next to {children}. It renders nothing itself; the widget lives in its own Shadow DOM, so your styles stay separate. With the Pages Router, put it in pages/_app.tsx instead.

Build plugin

npm install -D @commentkit/build

import { withCommentKit } from "@commentkit/build/next";

export default withCommentKit({
  reactStrictMode: true,
});

In next dev it marks every element with the file and line it comes from, with Turbopack (the default) and with webpack. next build is never tagged unless you ask. withCommentKit(config, options) accepts an object or a config function.

The plugin also records the branch and commit of every build, so feedback is filed per branch without passing anything to init(). Values you pass yourself always win.

Environment variables

• NEXT_PUBLIC_COMMENTKIT_KEY: your project key (pk_live_…). It is public by design: it identifies the project and unlocks nothing.
• NEXT_PUBLIC_COMMENTKIT_BRANCH and NEXT_PUBLIC_COMMENTKIT_COMMIT: set for every build by the plugin.
• Without the plugin, pass the branch yourself, for example branch={process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF} on Vercel.

The branch and commit come from the first of these that is set: COMMENTKIT_BRANCH / COMMENTKIT_COMMIT (your override), then Vercel, Netlify, Cloudflare Pages, GitHub Actions, GitLab CI and Render’s own variables, then git. Set COMMENTKIT_SOURCE=1 to tag a preview build with source locations too, or COMMENTKIT_SOURCE=0 to turn tagging off. See build plugins.

Server rendering

The CommentKit component works in server layouts: it starts the widget in the browser after hydration. With the plugin, the server-rendered HTML and the hydrated page carry the same source tags, so there is no hydration mismatch.

init() does nothing on the server, so importing it never breaks server rendering. Call it once in the browser and keep the instance; destroy() removes every trace of the widget from the page.