我創建了一個全新的 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>
);
}
要獲得更詳細的答案，請查看此 線程。