如何在Next.js App Router中使用Material UI？解决服务端组件报错

算力阿峰

2026-7-19

Next.js 13 App Router + Material UI: 解决createContext only works in Client Components报错

问题核心原因

你遇到的问题本质是Next.js 13 App Router的组件执行环境差异：

根布局app/layout.tsx默认是服务端组件（Server Component），这类组件无法调用依赖客户端环境的API（比如React的createContext）。
Material UI的CssBaseline内部依赖React Context管理全局样式状态，属于必须在客户端运行的组件，因此直接在服务端组件中引入会触发报错。

快速解决方案

给app/layout.tsx添加客户端组件标识，在文件最顶部加上'use client'指令即可：

'use client';
import { CssBaseline } from '@mui/material';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <CssBaseline />
        {children}
      </body>
    </html>
  )
}

可选优化方案（保持根布局为服务端组件）

如果你不想把整个根布局转为客户端组件，可以单独封装一个承载CssBaseline的客户端组件：

创建app/components/ClientCssBaseline.tsx：

'use client';
import { CssBaseline } from '@mui/material';

export default function ClientCssBaseline() {
  return <CssBaseline />;
}

在根布局中引入这个组件（根布局仍保持服务端组件属性）：

import ClientCssBaseline from './components/ClientCssBaseline';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ClientCssBaseline />
        {children}
      </body>
    </html>
  )
}