我创建了一个全新的 Next.js 应用程序，它使用 app 文件夹。然后我安装了 Materiel UI 并开始使用文档中给出的示例。但我收到此错误：
类型错误：createContext 仅适用于客户端组件。在文件顶部添加“use client”指令以使用它。
这是我的代码中文档的示例：
import Button from "@mui/material/Button";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
我希望该按钮显示在我的页面上。我知道在顶部添加 "use client" 将修复错误，但我希望我的页面在服务器上渲染。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
要让 MUI 与 SSR 完美配合，您需要做一些调整：https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts 。
注意：即使您配置正确，按钮也可以在服务器端呈现，但您无法分配 onClick 处理程序（如果我没记错的话）
显然，您要导入的按钮正在使用客户端挂钩，在本例中为
createContext。为此，您需要在文件顶部添加“use client”。但这意味着该页面成为客户端组件，并且没有不再是服务器组件。如果这让您烦恼，您可以在与
app同一级别创建一个lib文件夹，在其中添加mui.js 文件，如下所示：然后您从那里导入它（这样，页面的其他部分仍然是服务器组件）：
// app/page.js import { Button } from "../lib/mui"; export default function Home() { return ( <div> <Button variant="contained">Hello World</Button> </div> ); }旁注，您在设置上下文时可能会遇到类似的错误。这意味着您正在尝试在服务器组件中设置它。 指南是将其添加到其自己的“使用客户端”标记文件中：
// app/theme-provider.tsx "use client"; import { createContext } from "react"; export const ThemeContext = createContext(""); export default function ThemeProvider({ children }) { return ( <ThemeContext.Provider value="dark"> {children} </ThemeContext.Provider> ); }并从那里导入它：
// app/layout.js import ThemeProvider from './theme-provider'; export default function RootLayout({ children }) { return ( <html> <body> <ThemeProvider>{children}</ThemeProvider> </body> </html> ); }要获得更详细的答案，请查看此 线程。