Take control of your blog's comments with a modern, extendable system built using Next.js 15 App Router, React Server…
Get practical Sanity guides with working examples, schema templates, and time-saving prompts. Everything you need to build faster with Sanity CMS.
No spam. Unsubscribe anytime.
I wanted to add commenting functionality to my personal blog. After researching various solutions like Disqus, Giscus, and other third-party services, I decided to build my own commenting system using Sanity CMS and Next.js. This approach gives me complete control over the data, user experience, and styling while keeping everything integrated with my existing tech stack.
In this guide, I'll walk you through building a complete commenting system from scratch. We'll start with basic commenting functionality and progressively enhance it with features like reply threading and persistent user identity across sessions.
By the end of this tutorial, you'll have:
use() hook for data streaminguseActionState for form handlingFirst, we need to define how comments will be stored in Sanity. Our schema will include essential fields like commenter name, email, comment body, and references to the blog post and parent comment for threading. We'll also include moderation fields like approval status and spam detection. You're free to add additional fields like website URL, location, or any other metadata that suits your needs.
Create src/sanity/schemaTypes/commentType.ts:
import {CommentIcon} from '@sanity/icons'
import {defineField, defineType} from 'sanity'
export const commentType = defineType({
name: 'comment',
title: 'Comment',
type: 'document',
icon: CommentIcon,
fields: [
defineField({
name: 'name',
title: 'Name',
type: 'string',
validation: (Rule) => Rule.required().min(2).max(100),
description: 'Commenter\'s name'
}),
defineField({
name: 'email',
title: 'Email',
type: 'string',
validation: (Rule) => Rule.required().email(),
description: 'Commenter\'s email (not displayed publicly)'
}),
defineField({
name: 'body',
title: 'Comment Body',
type: 'text',
validation: (Rule) => Rule.required().min(10).max(2000),
description: 'The comment content'
}),
defineField({
name: 'post',
title: 'Post',
type: 'reference',
to: [{type: 'post'}],
validation: (Rule) => Rule.required(),
description: 'The blog post this comment belongs to'
}),
defineField({
name: 'parent',
title: 'Parent Comment',
type: 'reference',
to: [{type: 'comment'}],
description: 'Reference to parent comment if this is a reply',
validation: (Rule) =>
Rule.custom(async (parent, context) => {
if (!parent) return true; // Top-level comment is fine
const {getClient} = context;
const client = getClient({apiVersion: '2023-01-01'});
try {
const parentComment = await client.fetch(
`*[_type == "comment" && _id == $parentId][0]{_id, parent, post}`,
{parentId: parent._ref}
);
if (!parentComment) {
return 'Parent comment does not exist';
}
// Prevent replies to replies (max 1 level deep)
if (parentComment.parent) {
return 'Replies to replies are not allowed. Maximum nesting depth is 1 level.';
}
return true;
} catch (error) {
return 'Error validating parent comment';
}
})
}),
defineField({
name: 'approved',
title: 'Approved',
type: 'boolean',
initialValue: true,
description: 'Whether this comment is approved for public display'
}),
defineField({
name: 'createdAt',
title: 'Created At',
type: 'datetime',
initialValue: () => new Date().toISOString(),
validation: (Rule) => Rule.required(),
description: 'When the comment was submitted'
}),
defineField({
name: 'isSpam',
title: 'Marked as Spam',
type: 'boolean',
initialValue: false,
description: 'Whether this comment has been marked as spam'
}),
defineField({
name: 'replyCount',
title: 'Reply Count',
type: 'number',
initialValue: 0,
description: 'Number of approved replies to this comment',
readOnly: true
})
],
preview: {
select: {
name: 'name',
body: 'body',
approved: 'approved',
isSpam: 'isSpam',
parent: 'parent',
postTitle: 'post.title',
createdAt: 'createdAt'
},
prepare(selection) {
const {name, body, approved, isSpam, parent, postTitle, createdAt} = selection;
const truncatedBody = body?.length > 100 ? `${body.slice(0, 100)}...` : body;
const status = isSpam ? 'SPAM' : approved ? 'Approved' : 'Pending';
const type = parent ? 'Reply' : 'Comment';
return {
title: `${type}: ${name}`,
subtitle: `${status} • ${postTitle} • ${truncatedBody}`,
media: CommentIcon
};
}
}
})
This schema defines our comment structure with validation rules. Key points:
Don't forget to add this schema to your Sanity configuration and run npm run generate:types to generate the corresponding TypeScript types.
I've written another article here on how to automatically generate TypeScript types using the Sanity V3 CLI—check it out!
Next, we need to create GROQ queries to fetch comment data from Sanity. GROQ is Sanity's query language, similar to GraphQL, that allows us to specify exactly what data we want. The defineQuery function automatically generates TypeScript types based on the query structure, giving us type safety throughout our application.
Create queries to fetch comments in src/sanity/lib/queries.ts:
import {defineQuery} from 'next-sanity'
export const COMMENTS_QUERY = defineQuery(`
*[_type == "comment" && post._ref == $postId && approved == true && parent == null] | order(createdAt desc) {
_id,
name,
body,
createdAt,
replyCount,
"replies": *[_type == "comment" && parent._ref == ^._id && approved == true] | order(createdAt asc) {
_id,
name,
body,
createdAt
}
}
`)
export const COMMENT_COUNT_QUERY = defineQuery(`
count(*[_type == "comment" && post._ref == $postId && approved == true])
`)
These queries handle fetching top-level comments with their nested replies and counting total comments for a post.
Now we'll create server actions to handle comment operations. Server actions are essentially fetch requests in disguise - they allow us to run server-side code directly from client components without creating API routes. We're using server actions because they integrate seamlessly with React 19's useActionState hook and provide better developer experience with automatic form handling and validation.
We'll create several functions: createComment for basic comment creation with validation, getAllComments for fetching comment data, and createCommentAction specifically designed to work with React 19's form handling.
Create src/actions/comments.ts to handle comment operations:
'use server'
import { revalidatePath, revalidateTag } from 'next/cache'
import { sanityFetch } from '@/sanity/lib/client'
import { client } from '@/sanity/lib/client'
import { COMMENTS_QUERY, COMMENT_COUNT_QUERY } from '@/sanity/lib/queries'
// Types
interface CreateCommentData {
postId: string
parentId?: string
name: string
email: string
body: string
}
interface CommentResult {
success: boolean
message: string
commentId?: string
error?: string
}
interface CommentFormState {
success?: boolean
error?: string
message?: string
}
/**
* Create a new comment or reply
*/
export async function createComment(data: CreateCommentData): Promise<CommentResult> {
try {
const { postId, parentId, name, email, body } = data
// Input validation
if (!postId || !name || !email || !body) {
return {
success: false,
message: 'All fields are required'
}
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailRegex.test(email)) {
return {
success: false,
message: 'Please enter a valid email address'
}
}
// Content length validation
if (body.length < 10 || body.length > 2000) {
return {
success: false,
message: 'Comment must be between 10 and 2000 characters'
}
}
// If this is a reply, validate parent comment
if (parentId) {
const parentComment = await sanityFetch({
query: `*[_type == "comment" && _id == $commentId][0]{_id, approved, parent, post}`,
params: { commentId: parentId },
tags: ['comment']
})
if (!parentComment) {
return {
success: false,
message: 'Parent comment not found'
}
}
if (!parentComment.approved) {
return {
success: false,
message: 'Cannot reply to an unapproved comment'
}
}
if (parentComment.parent) {
return {
success: false,
message: 'Replies to replies are not allowed'
}
}
if (parentComment.post?._ref !== postId) {
return {
success: false,
message: 'Parent comment must belong to the same post'
}
}
}
// Create comment document
const commentDoc = {
_type: 'comment',
name: name.trim(),
email: email.toLowerCase().trim(),
body: body.trim(),
post: {
_type: 'reference',
_ref: postId
},
...(parentId && {
parent: {
_type: 'reference',
_ref: parentId
}
}),
approved: true, // Auto-approve comments
createdAt: new Date().toISOString(),
isSpam: false,
replyCount: 0
}
// Create the comment
const result = await client.create(commentDoc)
// If this is a reply, increment parent's reply count
if (parentId) {
await client
.patch(parentId)
.inc({ replyCount: 1 })
.commit()
}
// Revalidate comments cache
revalidateTag(`comments-${postId}`)
return {
success: true,
message: 'Comment submitted successfully!',
commentId: result._id
}
} catch (error) {
console.error('Error creating comment:', error)
return {
success: false,
message: 'Failed to submit comment. Please try again.'
}
}
}
/**
* Get all comments for a post (with replies)
*/
export async function getAllComments(postId: string) {
try {
const comments = await sanityFetch({
query: COMMENTS_QUERY,
params: { postId },
tags: [`comments-${postId}`, 'comment']
})
return comments || []
} catch (error) {
console.error('Error fetching all comments:', error)
return []
}
}
/**
* Modern server action for useActionState
*/
export async function createCommentAction(
prevState: CommentFormState | null,
formData: FormData
): Promise<CommentFormState> {
try {
const postId = formData.get('postId') as string
const parentId = formData.get('parentId') as string || undefined
const name = formData.get('name') as string
const email = formData.get('email') as string
const body = formData.get('body') as string
// Basic validation
if (!postId || !name?.trim() || !email?.trim() || !body?.trim()) {
return {
error: 'All fields are required'
}
}
// Call the existing createComment function
const result = await createComment({
postId,
parentId,
name: name.trim(),
email: email.trim().toLowerCase(),
body: body.trim()
})
if (result.success) {
// Revalidate the current page to show new comment
revalidatePath(`/blog/[slug]`, 'page')
revalidateTag(`comments-${postId}`)
return {
success: true,
message: result.message
}
} else {
return {
error: result.message
}
}
} catch (error) {
console.error('Error in createCommentAction:', error)
return {
error: 'Failed to submit comment. Please try again.'
}
}
}
The server actions handle comment creation with validation and use Next.js cache revalidation to update the UI. The createCommentAction function is specifically designed to work with React 19's useActionState hook.
Now we move to the frontend to connect everything together. We'll create a comment form component that uses React 19's useActionState hook to handle form submission, validation, and loading states. This component will integrate with our server actions and provide a smooth user experience with real-time feedback.
comment form
Create src/components/comments/CommentForm.tsx:
'use client'
import React, { useActionState, useRef, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { createCommentAction } from '@/actions/comments'
import { cn } from '@/lib/utils'
import { Loader2, MessageSquare, Reply, CheckCircle } from 'lucide-react'
interface CommentFormProps {
postId: string
parentId?: string
parentAuthor?: string
onSuccess?: () => void
onCancel?: () => void
className?: string
}
export function CommentForm({
postId,
parentId,
parentAuthor,
onSuccess,
onCancel,
className
}: CommentFormProps) {
const [state, action, pending] = useActionState(createCommentAction, null)
const formRef = useRef<HTMLFormElement>(null)
const router = useRouter()
const isReply = !!parentId
// Reset form and call onSuccess when comment is successfully created
useEffect(() => {
if (state?.success) {
formRef.current?.reset()
// Force immediate refresh to show the new comment
setTimeout(() => {
router.refresh()
}, 100)
onSuccess?.()
}
}, [state?.success, onSuccess, router])
const handleCancel = () => {
formRef.current?.reset()
onCancel?.()
}
return (
<Card className={cn('w-full', className)}>
<CardHeader className="pb-4">
<CardTitle className="flex items-center gap-2 text-lg">
{isReply ? (
<>
<Reply className="h-4 w-4" />
Reply to {parentAuthor}
</>
) : (
<>
<MessageSquare className="h-4 w-4" />
Leave a Comment
</>
)}
</CardTitle>
</CardHeader>
<CardContent>
{/* Success Message */}
{state?.success && (
<Alert className="mb-6 border-green-200 bg-green-50 text-green-800">
<CheckCircle className="h-4 w-4" />
<AlertDescription>{state.message}</AlertDescription>
</Alert>
)}
{/* Error Message */}
{state?.error && (
<Alert variant="destructive" className="mb-6">
<AlertDescription>{state.error}</AlertDescription>
</Alert>
)}
<form ref={formRef} action={action} className="space-y-6">
{/* Hidden Fields */}
<input name="postId" value={postId} type="hidden" />
{parentId && <input name="parentId" value={parentId} type="hidden" />}
{/* Name and Email Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">
Name <span className="text-red-500">*</span>
</Label>
<Input
id="name"
name="name"
type="text"
placeholder="Your name"
required
disabled={pending}
className="transition-colors"
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">
Email <span className="text-red-500">*</span>
</Label>
<Input
id="email"
name="email"
type="email"
placeholder="your@email.com"
required
disabled={pending}
className="transition-colors"
/>
<p className="text-xs text-gray-500">
Your email will not be published
</p>
</div>
</div>
{/* Comment Body */}
<div className="space-y-2">
<Label htmlFor="body">
Comment <span className="text-red-500">*</span>
</Label>
<Textarea
id="body"
name="body"
placeholder={isReply ? `Reply to ${parentAuthor}...` : "Share your thoughts..."}
rows={4}
required
disabled={pending}
className="resize-none transition-colors"
/>
<p className="text-xs text-gray-500">
10-2000 characters
</p>
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-3 pt-2">
<Button
type="submit"
disabled={pending}
className="flex-1 sm:flex-none"
>
{pending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Submitting...
</>
) : (
<>
{isReply ? 'Post Reply' : 'Post Comment'}
</>
)}
</Button>
{onCancel && (
<Button
type="button"
variant="outline"
onClick={handleCancel}
disabled={pending}
className="flex-1 sm:flex-none"
>
Cancel
</Button>
)}
</div>
{/* Guidelines */}
<div className="text-xs text-gray-500 space-y-1">
<p>• Comments are automatically approved and will appear immediately</p>
<p>• Be respectful and constructive in your feedback</p>
<p>• No spam, self-promotion, or off-topic content</p>
</div>
</form>
</CardContent>
</Card>
)
}
This form uses React 19's useActionState hook for modern form handling. Key features:
Now we need to build components to display these comments. So far we've handled comment creation, but now we need to show existing comments and replies in a user-friendly way. We'll create two main components: CommentItem for individual comments with reply functionality, and Comments as the main container that uses React 19's use() hook to handle streamed data.
Commnet example
Create src/components/comments/Comments.tsx:
'use client'
import React, { use, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { CommentForm } from './CommentForm'
import { cn, formatDate } from '@/lib/utils'
import { MessageSquare, Reply, User, Clock, ChevronDown, ChevronUp } from 'lucide-react'
interface CommentsProps {
postId: string
commentsPromise: Promise<any[]>
className?: string
}
interface CommentItemProps {
comment: any
postId: string
}
function CommentItem({ comment, postId }: CommentItemProps) {
const [showReplyForm, setShowReplyForm] = useState(false)
const [showReplies, setShowReplies] = useState(true)
const handleReplyClick = () => {
setShowReplyForm(!showReplyForm)
}
const handleReplySuccess = () => {
setShowReplyForm(false)
// Page will automatically refresh due to revalidatePath in server action
}
const handleReplyCancel = () => {
setShowReplyForm(false)
}
const hasReplies = comment.replies && comment.replies.length > 0
const replyCount = comment.replyCount || 0
return (
<div className="space-y-4">
{/* Main Comment */}
<Card className="w-full">
<CardContent className="pt-6">
{/* Comment Header */}
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10">
<User className="h-4 w-4 text-primary" />
</div>
<div>
<div className="font-medium text-sm">{comment.name}</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Clock className="h-3 w-3" />
<time dateTime={comment.createdAt}>
{formatDate(comment.createdAt)}
</time>
</div>
</div>
</div>
</div>
{/* Comment Body */}
<div className="mb-4">
<p className="text-sm leading-relaxed whitespace-pre-wrap">
{comment.body}
</p>
</div>
{/* Comment Actions */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Button
variant="ghost"
size="sm"
onClick={handleReplyClick}
className="h-8 px-3 text-xs"
>
<Reply className="h-3 w-3 mr-1" />
Reply
</Button>
{replyCount > 0 && (
<Badge variant="secondary" className="text-xs">
{replyCount} {replyCount === 1 ? 'reply' : 'replies'}
</Badge>
)}
</div>
{hasReplies && (
<Button
variant="ghost"
size="sm"
onClick={() => setShowReplies(!showReplies)}
className="h-8 px-3 text-xs"
>
{showReplies ? (
<>
<ChevronUp className="h-3 w-3 mr-1" />
Hide replies
</>
) : (
<>
<ChevronDown className="h-3 w-3 mr-1" />
Show replies
</>
)}
</Button>
)}
</div>
</CardContent>
</Card>
{/* Reply Form */}
{showReplyForm && (
<div className="ml-8">
<CommentForm
postId={postId}
parentId={comment._id}
parentAuthor={comment.name || 'Anonymous'}
onSuccess={handleReplySuccess}
onCancel={handleReplyCancel}
className="border-l-2 border-primary/20 pl-4"
/>
</div>
)}
{/* Replies */}
{hasReplies && showReplies && (
<div className="ml-8 space-y-3">
<Separator className="my-2" />
{comment.replies?.map((reply: any) => (
<Card key={reply._id} className="bg-muted/30">
<CardContent className="pt-4">
{/* Reply Header */}
<div className="flex items-center gap-3 mb-3">
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10">
<User className="h-3 w-3 text-primary" />
</div>
<div>
<div className="font-medium text-xs">{reply.name}</div>
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Clock className="h-2 w-2" />
<time dateTime={reply.createdAt}>
{formatDate(reply.createdAt)}
</time>
</div>
</div>
</div>
{/* Reply Body */}
<p className="text-xs leading-relaxed whitespace-pre-wrap pl-9">
{reply.body}
</p>
</CardContent>
</Card>
))}
</div>
)}
</div>
)
}
export function Comments({ postId, commentsPromise, className }: CommentsProps) {
// Use React 19's use() hook to unwrap the promise
const comments = use(commentsPromise)
const commentCount = comments?.length || 0
return (
<div className={cn('w-full space-y-8', className)}>
{/* Header */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<MessageSquare className="h-5 w-5" />
<h2 className="text-xl font-semibold">Comments</h2>
{commentCount > 0 && (
<Badge variant="secondary">
{commentCount}
</Badge>
)}
</div>
</div>
{/* Comment Form */}
<CommentForm postId={postId} />
{/* Comments List */}
{comments && comments.length > 0 ? (
<div className="space-y-6">
<Separator />
<div className="space-y-6">
{comments.map((comment) => (
<CommentItem
key={comment._id}
comment={comment}
postId={postId}
/>
))}
</div>
</div>
) : (
<div className="space-y-4">
<Separator />
<Card className="border-dashed">
<CardContent className="pt-6">
<div className="text-center py-8">
<MessageSquare className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
<h3 className="text-lg font-medium mb-2">No comments yet</h3>
<p className="text-muted-foreground">
Be the first to share your thoughts!
</p>
</div>
</CardContent>
</Card>
</div>
)}
</div>
)
}
This component uses React 19's use() hook to handle the streamed data. This is a powerful new feature that allows components to unwrap promises directly, enabling true streaming from server to client.
The use() hook is a React 19 feature that allows you to read the value of a promise inside a component. Instead of managing loading states manually, React handles the suspense boundary automatically. When the promise resolves, the component re-renders with the data.
Now comes the exciting part - integrating our comment system into actual blog posts! We'll modify the blog post page to include our comments component. We're adding a Suspense boundary around the comments to enable React 19's streaming capabilities, and creating a comments promise that starts loading immediately without blocking the page render.
Update your blog post page to include comments. In src/app/blog/[slug]/page.tsx:
import { Suspense } from 'react'
import { Comments } from '@/components/comments/Comments'
import { CommentsSkeleton } from '@/components/comments/CommentsSkeleton'
import { getAllComments } from '@/actions/comments'
export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params
// Fetch your blog post here
const post = await getPost(slug)
// Create comments promise for React 19 streaming (don't await it)
const commentsPromise = getAllComments(post._id)
return (
<article>
{/* Your blog post content */}
{/* Comments Section */}
<div className="mt-12 pt-8 border-t">
<Suspense fallback={<CommentsSkeleton />}>
<Comments
postId={post._id}
commentsPromise={commentsPromise}
/>
</Suspense>
</div>
</article>
)
}
The key here is creating the commentsPromise without awaiting it. This allows React to start streaming the comments data while the rest of the page renders.
This next feature is an optional enhancement that significantly improves user experience. Now let's enhance our commenting system to remember users across sessions using server-side cookies. This eliminates the need for users to re-enter their information on subsequent visits.
In Next.js, cookies can only be read and written on the server side. This means:
Important note: When we introduce cookies, we lose the ability to statically render pages since cookies require a server environment to read and write. This means our blog post pages will need to be dynamically rendered, but the trade-off is worth it for the improved user experience.
Create src/actions/commenter-identity.ts:
'use server'
import { cookies } from 'next/headers'
export interface CommenterIdentity {
name: string
email: string
lastUsed: string
commentCount?: number
}
const COMMENTER_COOKIE = 'commenter-identity'
const COOKIE_MAX_AGE = 365 * 24 * 60 * 60 // 1 year in seconds
/**
* Get the saved commenter identity from cookies
*/
export async function getCommenterIdentity(): Promise<CommenterIdentity | null> {
try {
const cookieStore = await cookies()
const identityCookie = cookieStore.get(COMMENTER_COOKIE)
if (!identityCookie?.value) {
return null
}
const identity = JSON.parse(identityCookie.value) as CommenterIdentity
// Validate the data structure
if (!identity.name || !identity.email || !identity.lastUsed) {
return null
}
return identity
} catch (error) {
console.error('Error reading commenter identity:', error)
return null
}
}
/**
* Save commenter identity to cookies
*/
export async function saveCommenterIdentity(
name: string,
email: string,
incrementCount: boolean = true
): Promise<void> {
try {
const cookieStore = await cookies()
// Get existing identity to preserve comment count
const existing = await getCommenterIdentity()
const currentCount = existing?.commentCount || 0
const identity: CommenterIdentity = {
name: name.trim(),
email: email.trim().toLowerCase(),
lastUsed: new Date().toISOString(),
commentCount: incrementCount ? currentCount + 1 : currentCount
}
cookieStore.set(COMMENTER_COOKIE, JSON.stringify(identity), {
maxAge: COOKIE_MAX_AGE,
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
path: '/'
})
} catch (error) {
console.error('Error saving commenter identity:', error)
}
}
/**
* Clear the saved commenter identity
*/
export async function clearCommenterIdentity(): Promise<void> {
try {
const cookieStore = await cookies()
cookieStore.delete(COMMENTER_COOKIE)
} catch (error) {
console.error('Error clearing commenter identity:', error)
}
}
We need to modify our existing comment creation action to save the commenter's identity after successfully creating a comment. Specifically, we're adding a call to saveCommenterIdentity() right after a successful comment creation, before the cache revalidation.
Modify src/actions/comments.ts to save identity when comments are created:
import { saveCommenterIdentity } from './commenter-identity'
export async function createCommentAction(
prevState: CommentFormState | null,
formData: FormData
): Promise<CommentFormState> {
try {
// ... existing validation code ...
const result = await createComment({
postId,
parentId,
name: name.trim(),
email: email.trim().toLowerCase(),
body: body.trim()
})
if (result.success) {
// Save commenter identity for future use
await saveCommenterIdentity(name.trim(), email.trim().toLowerCase(), true)
// ... existing revalidation code ...
return {
success: true,
message: result.message
}
}
// ... rest of function ...
}
}
Since we're now using cookies, we need to make the blog post page dynamic:
// Force dynamic rendering for cookie support
export const dynamic = 'force-dynamic'
export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params
const post = await getPost(slug)
// Create comments promise for React 19 streaming
const commentsPromise = getAllComments(post._id)
// Get saved commenter identity for form pre-filling
const commenterIdentity = await getCommenterIdentity()
return (
<article>
{/* Your blog post content */}
{/* Comments Section */}
<div className="mt-12 pt-8 border-t">
<Suspense fallback={<CommentsSkeleton />}>
<Comments
postId={post._id}
commentsPromise={commentsPromise}
defaultIdentity={commenterIdentity}
/>
</Suspense>
</div>
</article>
)
}
We're modifying the comment form to accept and handle pre-filled identity data. Specifically, we're adding a defaultIdentity prop, updating the interface to include this new prop, implementing logic to pre-fill form fields when identity data exists, adding a clear identity feature with a visual indicator, and updating form placeholders to show when data is saved.
Saved identity for commenting
Update src/components/comments/CommentForm.tsx to handle pre-filled identity:
import { clearCommenterIdentity, type CommenterIdentity } from '@/actions/commenter-identity'
interface CommentFormProps {
postId: string
parentId?: string
parentAuthor?: string
defaultIdentity?: CommenterIdentity | null
onSuccess?: () => void
onCancel?: () => void
className?: string
}
export function CommentForm({
postId,
parentId,
parentAuthor,
defaultIdentity,
onSuccess,
onCancel,
className
}: CommentFormProps) {
const [state, action, pending] = useActionState(createCommentAction, null)
const [identityCleared, setIdentityCleared] = useState(false)
const formRef = useRef<HTMLFormElement>(null)
const router = useRouter()
const isReply = !!parentId
const isPreFilled = !identityCleared && !!defaultIdentity
// ... existing useEffect ...
const handleClearIdentity = async () => {
await clearCommenterIdentity()
setIdentityCleared(true)
// Clear the form fields
if (formRef.current) {
const nameInput = formRef.current.querySelector('input[name="name"]') as HTMLInputElement
const emailInput = formRef.current.querySelector('input[name="email"]') as HTMLInputElement
if (nameInput) nameInput.value = ''
if (emailInput) emailInput.value = ''
}
}
return (
<Card className={cn('w-full', className)}>
{/* ... existing header ... */}
<CardContent>
{/* ... existing alerts ... */}
<form ref={formRef} action={action} className="space-y-6">
{/* Hidden Fields */}
<input name="postId" value={postId} type="hidden" />
{parentId && <input name="parentId" value={parentId} type="hidden" />}
{/* Name and Email Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">
Name <span className="text-red-500">*</span>
</Label>
<Input
id="name"
name="name"
type="text"
placeholder={isPreFilled ? "Your name (saved)" : "Your name"}
defaultValue={isPreFilled ? defaultIdentity?.name || '' : ''}
required
disabled={pending}
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">
Email <span className="text-red-500">*</span>
</Label>
<Input
id="email"
name="email"
type="email"
placeholder={isPreFilled ? "Email (saved)" : "your@email.com"}
defaultValue={isPreFilled ? defaultIdentity?.email || '' : ''}
required
disabled={pending}
/>
<p className="text-xs text-gray-500">
Your email will not be published
</p>
</div>
</div>
{/* Identity Status */}
{isPreFilled && (
<div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-md">
<div className="flex items-center gap-2 text-sm text-green-700">
<CheckCircle className="h-4 w-4" />
<span>
Welcome back! Using saved identity from {defaultIdentity?.commentCount || 0} previous comment{(defaultIdentity?.commentCount || 0) !== 1 ? 's' : ''}
</span>
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={handleClearIdentity}
disabled={pending}
className="h-auto p-1 text-green-700 hover:text-green-800"
>
<X className="h-4 w-4" />
<span className="sr-only">Clear saved identity</span>
</Button>
</div>
)}
{/* ... rest of form ... */}
{/* Updated Guidelines */}
<div className="text-xs text-gray-500 space-y-1">
<p>• Comments are automatically approved and will appear immediately</p>
<p>• Your name and email will be saved for future comments</p>
<p>• Be respectful and constructive in your feedback</p>
<p>• No spam, self-promotion, or off-topic content</p>
</div>
</form>
</CardContent>
</Card>
)
}
We need to update the Comments component to accept the identity data and pass it down to both the main comment form and reply forms. Specifically, we're adding defaultIdentity to the component props interface, passing it to the main CommentForm, and ensuring it's passed to the CommentItem components so reply forms can also benefit from pre-filled data.
Update src/components/comments/Comments.tsx to pass the identity to forms:
interface CommentsProps {
postId: string
commentsPromise: Promise<any[]>
defaultIdentity?: CommenterIdentity | null
className?: string
}
export function Comments({ postId, commentsPromise, defaultIdentity, className }: CommentsProps) {
const comments = use(commentsPromise)
const commentCount = comments?.length || 0
return (
<div className={cn('w-full space-y-8', className)}>
{/* ... existing header ... */}
{/* Comment Form */}
<CommentForm postId={postId} defaultIdentity={defaultIdentity} />
{/* Comments List */}
{comments && comments.length > 0 ? (
<div className="space-y-6">
<Separator />
<div className="space-y-6">
{comments.map((comment) => (
<CommentItem
key={comment._id}
comment={comment}
postId={postId}
defaultIdentity={defaultIdentity}
/>
))}
</div>
</div>
) : (
// ... existing empty state ...
)}
</div>
)
}
npm run dev
Commenting admin
This basic commenting system provides a solid foundation for further enhancements:
Add email notifications when replies are posted:
// In createComment function
if (parentId) {
const parentComment = await getParentCommentWithEmail(parentId)
await sendReplyNotification(parentComment.email, commentData)
}
Upgrade from plain text to markdown or rich text:
// Add to comment schema
defineField({
name: 'bodyRich',
title: 'Comment Body',
type: 'array',
of: [{type: 'block'}]
})
Integrate OAuth providers for easier sign-in:
// Optional user reference
defineField({
name: 'user',
title: 'User',
type: 'reference',
to: [{type: 'user'}]
})
While we removed CAPTCHA for simplicity, consider adding:
We've built a complete commenting system that provides a great user experience while maintaining simplicity. The system features:
The combination of Sanity CMS for data storage and Next.js for the frontend provides a powerful, scalable solution for adding comments to any blog or content site.
I hope this guide helps you implement your own commenting system. If you have questions or run into issues, please leave a comment below. This is the first article using this commenting system, so your feedback will help improve both the implementation and this documentation.
Thanks, — Matija