How to Add Comments and Reactions to Your Next.js SaaS -- Build Engagement Features Without Disqus or Circle

When your SaaS needs social features

You launched your product. Users are signing up. Then the question arrives: "Can other users see my posts?" or "Can I comment on this?" You hit a fork -- reach for Disqus, Circle, or a community tool that costs $50 a month and owns your user data, or build it yourself and spend two weeks on it.

There is a third path.

The Next.js SaaS Boilerplate ships with comment and like modules already built. This post walks through what you get out of the box and how to put it in front of your users in an afternoon.

Who actually needs this

Not every SaaS needs comments. But if your product is any of these, you probably do:

• A course platform where students ask questions under lessons
• A community tool where members post and discuss
• A content SaaS where users share work and get feedback
• A directory where visitors leave reviews on listings

If you recognize your product in that list, adding comments and reactions takes a few hours -- not two weeks.

What the boilerplate ships

The comment and like modules follow the same architecture as every other feature in the codebase: schema, relations, types, validation, repo, service, index. Everything is wired to Drizzle ORM and registered in db/drizzle.ts, so it works immediately with your Neon database.

Comments give you:

• A postId and authorId on every record
• Timestamp-ordered threads on any content type
• Service-layer ownership checks so users can only delete their own comments

Likes give you:

• A toggle -- liking the same item twice removes the like
• A per-post like count query
• Attribution to the signed-in user, no anonymous reactions

Adding a comment section in practice

Here is the four-step path:

1. Fetch comments server-side. On your content page, call commentService.getByPostId(postId) in a Server Component and pass the list as props. No loading spinner on the initial render.

2. Wire the submit form. The comment form is a single textarea with a Zod schema -- body: z.string().min(1).max(2000). Use React Hook Form and your existing poster utility from lib/fetcher.ts to POST to /api/comments.

3. Render the like button as a Client Component. It reads the current like count from props, calls the toggle endpoint on click, and updates the count optimistically. One useState for the count, one useSWRMutation call.

4. Add the API routes. Comment and like routes follow the standard pattern: validate the body with Zod, call the service, return 201. The service reads authorId from getUserFromRequest -- the same JWT helper every other route uses.

No new infrastructure. No third-party account. No webhook.

The decision: build or buy?

Disqus is free until you look at what it costs you. It embeds third-party scripts, targets your users with ads, and gives you a widget that does not match your brand. Circle and Tribe charge $49-99 a month for features you will use 10% of.

If you are pre-product-market fit, build it. You own the data. The UI matches your product. You can add per-comment email notifications, threaded replies, or moderation tools later without retrofitting a third-party embed.

If discussion is not your core product -- you are not building a forum -- owning comments almost always costs less than renting them, in money and in flexibility.

One thing founders skip

Comments without moderation become a liability. Before you ship to real users, add two things:

1. A deleted_at column so you can soft-delete content without losing audit history.
2. A report endpoint that drops a flag into an admin queue.

Both are a single Drizzle migration and one API route. If you want to take this further and let users upvote feature requests, the feature voting board guide covers the full engagement loop.

Ship it this weekend

Get the Next.js SaaS Boilerplate and build your comment system as your next weekend feature. The modules are already there -- wire the UI, add the routes, and your users can start talking.