Saya mencipta aplikasi Next.js serba baharu yang menggunakan folder app. Kemudian saya memasang UI Materiel dan mula menggunakan contoh yang diberikan dalam dokumentasi. Tetapi saya mendapat ralat ini:
Ralat jenis: createContext hanya berfungsi pada komponen klien. Tambahkan arahan "gunakan klien" di bahagian atas fail untuk menggunakannya.
Berikut ialah contoh dokumentasi dalam kod saya:
import Button from "@mui/material/Button";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
Saya mahu butang ini dipaparkan pada halaman saya. Saya tahu menambahkan "use client" di bahagian atas akan membetulkan ralat, tetapi saya mahu halaman saya dipaparkan pada pelayan.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk menjadikan MUI berfungsi dengan sempurna dengan SSR, anda perlu membuat beberapa pelarasan: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.
Nota: Walaupun anda mengkonfigurasinya dengan betul, butang itu boleh dipaparkan di sebelah pelayan, tetapi anda tidak boleh menetapkan pengendali onClick (jika saya ingat dengan betul)
Nampaknya butang yang anda import menggunakan cangkuk pelanggan, dalam kes ini
createContext。为此，您需要在文件顶部添加“use client”. Tetapi ini bermakna halaman itu menjadi komponen pelanggan dan tidak berhenti menjadi komponen pelayan.Jika ini mengganggu anda, anda boleh menambah fail
app同一级别创建一个libmui.jsdalam folder yang sama seperti seperti ini:Kemudian anda mengimportnya dari sana (dengan cara ini seluruh halaman masih merupakan komponen pelayan):
// app/page.js import { Button } from "../lib/mui"; export default function Home() { return ( <div> <Button variant="contained">Hello World</Button> </div> ); }Nota sampingan, anda mungkin menghadapi ralat yang sama semasa menyediakan konteks. Ini bermakna anda cuba untuk menetapkannya dalam komponen pelayan. Garis Panduan ialah menambah ini pada fail tag "Use Client" sendiri:
// 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> ); }dan import dari sana:
// app/layout.js import ThemeProvider from './theme-provider'; export default function RootLayout({ children }) { return ( <html> <body> <ThemeProvider>{children}</ThemeProvider> </body> </html> ); }Untuk jawapan yang lebih terperinci, lihat benang ini.