How to Create a Commenting Engine with Next.js and Sanity

This article demonstrates building a commenting engine for a Jamstack website using Next.js and Sanity.io, addressing the complexity often associated with adding commenting features to Jamstack sites. Instead of relying on third-party solutions with potential drawbacks like ads or limitations on content ownership, this approach integrates comments directly into the same database and CMS as the main content.

The choice of Next.js leverages its API routes for serverless functions and static site generation capabilities, streamlining development. Sanity.io provides a flexible platform for structured content, ensuring seamless integration of user-generated comments with existing content.

The tutorial utilizes a simplified repository combining Next.js frontend and Sanity Studio, eliminating the need to start from scratch. After cloning the repository, the process involves setting up Sanity and Next.js locally, including installing dependencies and configuring the Sanity project. This includes creating an API token with read/write access and configuring CORS origins to allow communication between the localhost server and Sanity.

A crucial step is defining the comment schema in comment.js within the /studio/schemas directory. This schema outlines the structure of comment data, including fields for name, email, comment text, post reference, and an approval boolean. A custom preview is also added for improved visibility in the Sanity Studio's list view.

The data fetching process is enhanced by modifying the getPostAndMorePosts function in /blog-frontend/lib/api.js. A GROQ query is integrated to retrieve comments associated with a specific post, filtering by approval status. The retrieved comments are then incorporated into the post display using a Comments component.

A comment form, built with react-hook-form, is added to allow users to submit comments. This form submits data to a Next.js API route (/api/createComment) which, using a Sanity client with write permissions, creates a new comment document in Sanity. Error handling and success messages are included.

The article concludes by suggesting enhancements, such as email notifications, improved Sanity Studio organization, spam protection, and Gravatar integration, showcasing the extensibility of this custom commenting solution.

The above is the detailed content of How to Create a Commenting Engine with Next.js and Sanity. For more information, please follow other related articles on the PHP Chinese website!