如何使用Next.js和理智创建评论引擎

本文展示了使用next.js and Sanity.io为Jamstack网站构建评论引擎，以解决与jamstack网站添加评论功能相关的复杂性。该方法并没有依靠具有广告或内容所有权限制的潜在缺点的第三方解决方案，而是将注释直接集成到与主要内容的同一数据库和CMS中。

Next.js的选择利用其API路由来实现无服务器功能和静态站点生成功能，并简化开发。 SANITY.IO为结构化内容提供了一个灵活的平台，以确保用户生成的注释与现有内容的无缝集成。

该教程利用简化的存储库结合了Next.js Frontend和Sanity Studio，无需从头开始。克隆存储库后，该过程涉及在本地设置理智和下一步。包括安装依赖项和配置理智项目。这包括创建一个具有读/写入访问和配置CORS起源的API令牌，以允许Localhost服务器和理智之间的通信。

至关重要的一步是在/studio/schemas comment.js中定义评论架构。此模式概述了评论数据的结构，包括名称，电子邮件，评论文本，帖子参考和批准布尔值的字段。还添加了自定义预览，以提高Sanity Studio列表视图中的可见性。

通过在/blog-frontend/lib/api.js中修改getPostAndMorePosts函数来增强数据获取过程。集成了一个GROQ查询以检索与特定帖子相关的注释，并通过批准状态过滤。然后，使用Comments组件将检索到的注释合并到帖子显示中。

添加了用react-hook-form构建的评论表格，以允许用户提交评论。此表格将数据提交到Next.js API路由（ /api/createComment ），该路由使用具有写入权限的理智客户端，在理智上创建了一个新的评论文档。包括错误处理和成功消息。

本文结论是提出增强功能，例如电子邮件通知，改进的理智工作室组织，垃圾邮件保护和Gravatar集成，展示了此自定义评论解决方案的可扩展性。

以上是如何使用Next.js和理智创建评论引擎的详细内容。更多信息请关注PHP中文网其他相关文章！