使用"use client"指令在文件頂部添加，TypeError: createContext僅適用於客戶端元件

Question

我創建了一個全新的Next.js應用程序，它使用app資料夾。然後我安裝了MaterielUI並開始使用文件中給出的範例。但我收到此錯誤：類型錯誤：createContext僅適用於客戶端元件。在檔案頂部新增“useclient”指令以使用它。這是我的程式碼中文件的範例：importButtonfrom"@mui/material/Button";exportdefaultfun

P粉642436282 · Answer

要讓MUI 與SSR 完美配合，您需要做一些調整：https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts 。

注意：即使您配置正確，按鈕也可以在伺服器端呈現，但您無法指派 onClick 處理程序（如果我沒記錯的話）

P粉502608799 · Answer

顯然，您要匯入的按鈕正在使用客戶端掛鉤，在本例中為createContext。為此，您需要在文件頂部添加“use client”。但這意味著該頁面成為客戶端元件，並且沒有不再是伺服器元件。

如果這讓您煩惱，您可以在與app 同一級別創建一個lib 資料夾，在其中添加mui.js 文件，如下所示：

// lib/mui.js

"use client";

export * from "@mui/material";

然後您從那裡導入它（這樣，頁面的其他部分仍然是伺服器元件）：

// 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}
      
    
  );
}

要獲得更詳細的答案，請查看此線程。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學