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

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-a