Next.js App目录使用MUI遇createContext错误，需服务端渲染

问题根源在于Next.js App Router默认组件为服务端组件，而Material UI的按钮组件内部依赖React Context（createContext），该API仅能在客户端组件中使用，直接在服务端组件内导入会触发错误。

要同时保留服务端渲染特性并正常使用MUI组件，你可以将MUI组件封装为独立的客户端组件，再在服务端页面中引入：

1. 创建客户端组件文件（比如app/components/ClientButton.js）：

"use client";

import Button from "@mui/material/Button";

export default function ClientButton() {
  return <Button variant="contained">Hello World</Button>;
}

2. 在你的服务端页面（app/page.js）中导入该组件使用：

import ClientButton from "./components/ClientButton";

export default function Home() {
  // 页面本身仍为服务端组件，支持SSR
  return (
    <div>
      <ClientButton />
    </div>
  );
}

这样处理后，整个Home页面依然保持服务端渲染，仅ClientButton部分为客户端组件，既满足了MUI按钮的显示需求，又保留了服务端渲染的优势。

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