我創建了一個全新的 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" 將修復錯誤，但我希望我的頁面在伺服器上渲染。
要讓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> ); }要獲得更詳細的答案，請查看此 線程。