我創(chuàng)建了一個(gè)全新的 Next.js 應(yīng)用程序，它使用 app 文件夾。然后我安裝了 Materiel UI 并開始使用文檔中給出的示例。但我收到此錯(cuò)誤：
類型錯(cuò)誤：createContext 僅適用于客戶端組件。在文件頂部添加“use client”指令以使用它。
這是我的代碼中文檔的示例：
import Button from "@mui/material/Button";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
我希望該按鈕顯示在我的頁面上。我知道在頂部添加 "use client" 將修復(fù)錯(cuò)誤，但我希望我的頁面在服務(wù)器上渲染。
2
0
0
要讓 MUI 與 SSR 完美配合，您需要做一些調(diào)整：https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts 。
注意：即使您配置正確，按鈕也可以在服務(wù)器端呈現(xiàn)，但您無法分配 onClick 處理程序（如果我沒記錯(cuò)的話）
顯然，您要導(dǎo)入的按鈕正在使用客戶端掛鉤，在本例中為createContext。為此，您需要在文件頂部添加“use client”。但這意味著該頁面成為客戶端組件，并且沒有不再是服務(wù)器組件。
如果這讓您煩惱，您可以在與 app 同一級(jí)別創(chuàng)建一個(gè) lib 文件夾，在其中添加 mui.js 文件，如下所示：
// lib/mui.js "use client"; export * from "@mui/material";
然后您從那里導(dǎo)入它（這樣，頁面的其他部分仍然是服務(wù)器組件）：
// app/page.js
import { Button } from "../lib/mui";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
旁注，您在設(shè)置上下文時(shí)可能會(huì)遇到類似的錯(cuò)誤。這意味著您正在嘗試在服務(wù)器組件中設(shè)置它。 指南是將其添加到其自己的“使用客戶端”標(biāo)記文件中：
// 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>
);
}
并從那里導(dǎo)入它：
// app/layout.js
import ThemeProvider from './theme-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
要獲得更詳細(xì)的答案，請(qǐng)查看此 線程。
