解决 Next.js 的 createContext is not a function 报错

在 Next.js App Router 中使用依赖 React Context 的组件库时，可能遇到：

createContext is not a function

需要检查组件是否处于正确的服务端与客户端边界中，不能简单地把所有原因都归为“组件库不支持 SSR”。

为什么会出现

App Router 的页面和布局默认是 Server Component。React Context 的创建和消费需要放在客户端组件中；第三方组件如果依赖这些能力，却从服务端组件进入错误的执行路径，就可能触发报错。

建立客户端边界

可以单独创建包装组件，在文件顶部、导入语句之前写入 'use client'：

// components/client-button.tsx
'use client';

import { Button } from 'antd';

export default function ClientButton() {
  return <Button onClick={() => console.log('clicked')}>点击按钮</Button>;
}

然后在服务端页面中使用：

// app/page.tsx
import ClientButton from '@/components/client-button';

export default function Page() {
  return (
    <main>
      <h1>示例页面</h1>
      <ClientButton />
    </main>
  );
}

这样把客户端边界放在需要交互的局部。示例要求已安装 antd；具体项目还应遵循组件库自己的 Next.js 接入说明。

仍然报错时检查

确认实际执行 createContext 的模块位于客户端组件的依赖链中，以及是否混入服务端专用模块。只在无关文件中加声明，不会改变出错模块的边界。

跨边界传给客户端组件的 props 还需要满足 React 的可序列化要求。普通事件处理函数可以在客户端组件内部定义，不应随意从服务端页面作为普通 props 传入。

'use client' 不等于完全关闭服务端预渲染。是否需要禁用某个组件的 SSR，需要另外根据组件行为判断。

参考：Next.js use client 文档及Server and Client Components。