Next.js 13部署Vercel遇@tiptap/react useEditor错误求助

问题根源 #

Next.js 13 App Router 默认采用服务器组件，而 useEditor 是客户端专属 React Hook，直接在服务器组件中调用会触发构建或运行时错误。

修复步骤 #

1. 标记 Editor 组件为客户端组件 #

在你的 Editor 组件文件顶部添加 'use client' 指令，强制组件在客户端运行：

'use client';

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

export default function Editor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>编辑你的内容...</p>',
    // 其他自定义配置
  });

  return <EditorContent editor={editor} />;
}

2. 正确在 Create 页面引入 Editor #

如果 Create 页面是服务器组件，直接引入上述客户端组件即可，无需额外处理：

// app/create/page.js
import Editor from '@/components/Editor';

export default function CreatePage() {
  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">创建内容</h1>
      <Editor />
    </div>
  );
}

3. 校验依赖版本兼容性 #

确保 @tiptap 相关依赖与 Next.js 13 适配，推荐使用最新稳定版，示例 package.json 配置：

{
  "dependencies": {
    "@tiptap/react": "^2.0.4",
    "@tiptap/starter-kit": "^2.0.4",
    "next": "13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.8.0",
    "@types/react": "^18.2.27",
    "typescript": "^5.2.2"
  }
}

4. 检查 Vercel 构建配置 #

无需特殊配置，但确保 next.config.js 未禁用客户端组件支持：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig;

额外提示 #

• 所有依赖客户端 Hook 的组件都需要添加 'use client' 指令
• 若需在服务器端处理编辑器内容，建议通过客户端收集内容后调用 API 路由提交

内容的提问来源于stack exchange，提问作者mahdi zangeneh