Ich habe eine brandneue Next.js-Anwendung erstellt, die den Ordnerappverwendet. Dann habe ich Materiel UI installiert und begonnen, die in der Dokumentation aufgeführten Beispiele zu verwenden. Aber ich bekomme diesen Fehler:
Typfehler: createContext funktioniert nur auf Client-Komponenten. Fügen Sie oben in der Datei die Anweisung „Client verwenden“ hinzu, um ihn zu verwenden.
Hier ist ein Beispiel für die Dokumentation in meinem Code:
import Button from "@mui/material/Button"; export default function Home() { return ( ); }
Ich möchte, dass dieser Button auf meiner Seite angezeigt wird. Ich weiß, dass das Hinzufügen von"use client"oben den Fehler behebt, aber ich möchte, dass meine Seite auf dem Server gerendert wird.
要让 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 ( ); }旁注，您在设置上下文时可能会遇到类似的错误。这意味着您正在尝试在服务器组件中设置它。指南是将其添加到其自己的“使用客户端”标记文件中：
// app/theme-provider.tsx "use client"; import { createContext } from "react"; export const ThemeContext = createContext(""); export default function ThemeProvider({ children }) { return ( {children} ); }并从那里导入它：
// app/layout.js import ThemeProvider from './theme-provider'; export default function RootLayout({ children }) { return ({children} ); }要获得更详细的答案，请查看此线程。