Next App Router使用Emotion Provider遇createContext客户端组件报错

核心原因 #

报错本质是Server Component中不能直接调用仅允许在Client Component中使用的API，但你的Provider已经标记为Client Component，问题通常出在Provider的定义或Layout中的渲染方式上。

解决方案 #

1. 严格保证Provider文件的"use client"指令位置

确保"use client";是Provider文件的第一行有效代码，不能有任何导入、注释（除文件顶部版权注释外）在它之前。示例：

"use client";

import { ReactNode } from 'react';
import { ThemeProvider as EmotionProvider } from '@emotion/react';

// 自定义主题
const appTheme = {
  colors: { primary: '#0070f3' },
  spacing: { xs: 4, sm: 8 }
};

export function ThemeProvider({ children }: { children: ReactNode }) {
  return <EmotionProvider theme={appTheme}>{children}</EmotionProvider>;
}

2. 在Layout中仅渲染Provider，不调用其内部Client API

Root Layout作为Server Component，只需直接渲染Client Component类型的Provider即可，不要在Layout中尝试访问Provider内部的Context或其他Client专属逻辑。正确示例：

// app/layout.tsx（Server Component，无需添加"use client"）
import { ThemeProvider } from './providers/ThemeProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

3. 排查Provider内部的混合代码问题

如果Provider内部嵌套了Server Component，或者错误使用了Server专属API（比如fs、getServerSession等），会导致Client Component的边界失效。确保Provider内部仅包含Client Component允许的逻辑：

• 不要在Provider中导入Server Component
• 不要在Provider中调用仅能在Server端运行的函数

4. 升级Emotion依赖到最新版本

旧版本的Emotion可能对Next.js App Router的支持不完善，执行以下命令升级：

npm update @emotion/react @emotion/styled

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