我创建了一个全新的 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" 将修复错误，但我希望我的页面在服务器上渲染。
P粉6424362822023-10-26 13:18:31
要让 MUI 与 SSR 完美配合，您需要做一些调整：https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts 。
注意：即使您配置正确，按钮也可以在服务器端呈现，但您无法分配 onClick 处理程序（如果我没记错的话）
P粉5026087992023-10-26 00:38:54
显然，您要导入的按钮正在使用客户端挂钩，在本例中为createContext。为此，您需要在文件顶部添加“use client”。但这意味着该页面成为客户端组件，并且没有不再是服务器组件。
如果这让您烦恼，您可以在与 app 同一级别创建一个 lib 文件夹，在其中添加 mui.js< /code> 文件，如下所示：
// lib/mui.js
"use client";
export * from "@mui/material";
然后您从那里导入它（这样，页面的其他部分仍然是服务器组件）：
// 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>
);
}
要获得更详细的答案，请查看此 线程。