如何使用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中文網其他相關文章！