How to Add Comments to a Next.js Site (App Router and Pages Router)

[MyrinNew]

Next.js gives you so many ways to render a page that the answer to "how do I add comments" depends on which version you're on and which architecture you've chosen. Here's a single approach that works for both the App Router and the Pages Router: a small client component that wraps the EchoThread widget (privacy-first, no ads, under 15 KB gzipped, free during beta).


1. Get an API key

Sign up at echothread.io, add your domain, copy the key.


2. Add to .env.local





NEXT_PUBLIC_ECHOTHREAD_API_KEY=YOUR_API_KEY







The NEXT_PUBLIC_ prefix is mandatory for client-side access.


3. Create components/EchoThread.tsx





"use client";

import Script from "next/script";

export default function EchoThread({ theme = "auto" }: { theme?: string }) {
const apiKey = process.env.NEXT_PUBLIC_ECHOTHREAD_API_KEY;
if (!apiKey) return null;

return (
section
className="echothread-wrapper"
style={{ marginTop: "4rem", paddingTop: "2rem", minHeight: 400 }}
>
div id="echothread" data-api-key={apiKey} data-theme={theme}>div>
Script src="https://cdn.echothread.io/widget.js" strategy="lazyOnload" />
section>
);
}







The lazyOnload strategy ensures the widget never blocks LCP.


4. Use it in your post page

App Router (app/blog/[slug]/page.tsx):






import EchoThread from "@/components/EchoThread";

export default async function Post({ params }) {
const post = await getPost(params.slug);
return (
article>
h1>{post.title}h1>
div dangerouslySetInnerHTML={{ __html: post.content }} />
EchoThread />
article>
);
}







Pages Router is essentially identical — same component, just imported into your pages/blog/[slug].tsx.


5. Handle soft navigation

Next.js does client-side navigation between routes. To make sure the widget refreshes when readers click between posts, force a remount with a key prop:






"use client";
import { usePathname } from "next/navigation";
import EchoThread from "@/components/EchoThread";

export default function Wrapper() {
const pathname = usePathname();
return EchoThread key={pathname} />;
}







For Pages Router, use useRouter().asPath instead.


Done

The widget identifies threads by page URL automatically. Server components stay server components — only the comment island hydrates.


Full guide with troubleshooting and CSP notes: echothread.io/docs/guides/nextjs




More...