在Next.js中使用react-quill与react-hook-form时form标签报错问题

核心问题是react-quill依赖浏览器环境的document对象，Next.js服务端渲染阶段没有这个对象，直接加载会报错。之前加document判断没用是因为组件已经在服务端被实例化了，得从加载阶段就避免服务端渲染。

直接用form标签的可行方案如下：

1. 动态导入react-quill（关键步骤） #

用Next.js的next/dynamic动态导入组件，强制只在客户端渲染：

import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false, loading: () => <p>加载编辑器...</p> });
import 'react-quill/dist/quill.snow.css'; // 别忘了导入编辑器样式

2. 用react-hook-form的Controller包裹编辑器 #

通过Controller把react-quill和form的状态绑定，避免直接操作DOM导致的服务端不兼容：

import { useForm, Controller } from 'react-hook-form';

export default function EditorForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      content: ''
    }
  });

  const onSubmit = (data) => {
    console.log('提交的编辑器内容:', data.content);
    // 这里写你的提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="content"
        control={control}
        rules={{ required: '内容不能为空' }}
        render={({ field }) => (
          <div>
            <ReactQuill
              value={field.value}
              onChange={field.onChange}
              theme="snow"
            />
            {errors.content && <p style={{ color: 'red' }}>{errors.content.message}</p>}
          </div>
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

3. 额外注意事项 #

• 确保样式文件react-quill/dist/quill.snow.css正确导入，不然编辑器样式会错乱。
• 如果还是有服务端报错，可以尝试把整个表单组件也用动态导入包裹，确保完全在客户端渲染：

const EditorForm = dynamic(() => import('./EditorForm'), { ssr: false });

这样就能正常用form标签配合react-hook-form和react-quill，不会出现服务端渲染的报错，提交和刷新都能正常工作。

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