在NextJS14中集成twikoo评论系统

创建于：2024/9/22发布于：2024/9/22文集：随笔

某天邮件收到了ElephantSQL即将停止服务的通知，博客的评论系统可能要没有数据库用了，加上在用的评论系统本身的开发也陷入了停滞状态，于是就打算物色个新的支持自己部署的评论系统。最终选择了使用twikoo，+因为可以暂时不用花钱+。

Twikoo官网提供了CDN引入的方式，在NextJS中，可以通过Script来加载twikoo的JS：

'use client'
 
import Script from 'next/script'
 
export default function Comment() {
  return (
    <div>
      <div id="tcomment"></div>
      <Script
        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
        onReady={() => {
          window.twikoo.init({
            envId: '', // 根据后端部署方式不同
            el: '#tcomment',
          })
        }}
      />
    </div>
  )
}

目前NextJS似乎在notFound这个API上有点bug，如果你的页面组件使用了notFound，并且出现了类似NotFoundError: Failed to execute 'removeChild' on 'Node'的错误，检查一下Comment组件，是否用了<div>将<Script>包裹在内了。