Add Comments to Your Next.js Site
No npm package needed. DropComments loads from a script tag, so it works in any Next.js project — App Router, Pages Router, static export, or SSR.
How to add comments to Next.js
Step 1: Create a free DropComments account
Sign up at dropcomments.net and register your domain. You'll get a unique Site ID.
Step 2: Add the embed snippet to your blog post component
Add the two-line snippet to any page or layout component where you want comments. Use Next.js Script for better performance, or a plain <script> tag inside a useEffect:
app/blog/[slug]/page.tsx
import Script from 'next/script'
// Inside your component's JSX:
<div id="dropcomments"></div>
<Script
src="https://dropcomments.net/embed.js"
data-site-id="your-site-uuid"
strategy="lazyOnload"
/>
// Inside your component's JSX:
<div id="dropcomments"></div>
<Script
src="https://dropcomments.net/embed.js"
data-site-id="your-site-uuid"
strategy="lazyOnload"
/>
Step 3: Deploy
Deploy as usual (Vercel, Netlify, or self-hosted). Comments load asynchronously and don't affect your Core Web Vitals.
Static export support
Using output: 'export'? No problem. DropComments is a hosted service — it works identically on statically exported Next.js sites.
Why Next.js developers choose DropComments
- Zero npm dependencies to add or maintain
- Works with App Router, Pages Router, and static exports
- Loads asynchronously — no Core Web Vitals impact
- No ads, no tracking — free forever