构建Next.js静态页面时出现"navigator is not defined"错误求助

问题根源 #

你使用的react-simplemde-editor依赖在初始化阶段会直接访问浏览器的navigator对象，但Next.js静态构建时会在服务端预渲染页面，服务端环境不存在navigator，因此触发报错。即使页面添加了"use client"指令，Next.js仍会对客户端组件进行服务端预渲染，导致依赖中的浏览器API调用失败。

解决方案 #

方案1：动态导入SimpleMDE并禁用服务端渲染 #

这是最直接有效的办法，通过Next.js的dynamic函数仅在客户端加载编辑器组件，完全避开服务端环境的限制。

修改代码如下：

1. 导入Next.js的dynamic工具：

import dynamic from 'next/dynamic';

2. 替换原有的SimpleMDE导入语句：

// 移除原导入：import SimpleMDE from "react-simplemde-editor";
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false });

3. 保留样式导入不变：

import "easymde/dist/easymde.min.css";

方案2：客户端环境判断后渲染编辑器 #

如果不想用动态导入，可以先判断当前是否处于浏览器环境，再渲染SimpleMDE，避免服务端执行时访问navigator。

修改FormField中description字段的渲染逻辑：

<FormField
  control={form.control}
  name="description"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Description</FormLabel>
      <FormControl>
        {typeof window !== 'undefined' ? (
          <SimpleMDE {...field} />
        ) : (
          <Input placeholder="Loading editor..." disabled />
        )}
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

这种方法会在服务端预渲染时显示占位输入框，客户端加载完成后替换为编辑器，可能会有轻微的界面闪烁。

方案3：替换为服务端兼容的Markdown编辑器 #

如果上述方案仍有问题，可以考虑更换为支持服务端渲染的编辑器，比如@uiw/react-md-editor，它不需要依赖浏览器API即可在服务端预渲染。

安装依赖：

npm install @uiw/react-md-editor

替换组件使用：

import MDEditor from '@uiw/react-md-editor';

// 在FormField中替换为：
<MDEditor {...field} value={field.value} onChange={field.onChange} />

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