简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何將 MUI 與 Next.js 應用程式路由器結合使用？
P粉754473468
P粉754473468 2023-12-23 21:56:44
0
1
447

我剛剛使用 npx create-next-app 建立了一個 next.js 13 typescript 應用程式。我已經刪除了所有範例 css 和 html，並嘗試引入 MUI。我的 app/layout.tsx 看起來像這樣：

import { CssBaseline } from '@mui/material';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <CssBaseline />
        {children}
      </body>
    </html>
  )
}

新增 CSSBaseline 位元會產生一大堆關於 React 匯入中缺少的內容的錯誤。線上閱讀這是因為 React 是從伺服器元件存取的，而根佈局元件必須是該伺服器元件。這是錯誤輸出：

Server Error
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
React
node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41)
(sc_server)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js
file:///[...]/.next/server/app/page.js (1724:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (8:72)
(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js
file:///[...]/.next/server/app/page.js (1768:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js (5:95)
(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js
file:///[...]/.next/server/app/page.js (1779:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
require
node_modules/@mui/styled-engine/node/index.js (46:37)

我不應該這樣做嗎？我錯過了什麼？

我覺得一旦我完成了這項工作，其餘的事情就會落實到位，我將能夠建立我的 MUI 應用程式。

我考慮將material-next-ts範例從頁面路由器移植到應用程式路由器。但是正在使用的情緒版本支援更簡單的預設方法，該方法似乎需要零設置，因此範例中頁面路由跳過的所有環路似乎都是不必要的。如果將範例移植到應用程式路由器，那就太棒了！

P粉754473468
P粉754473468

全部回覆(1)
P粉195402292
P粉1954022922023-12-24 09:29:50 1樓

錯誤訊息中的指導將解決該問題：

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

嘗試將 'use client' 指令新增到 app/layout.tsx 的頂部。以下是Next.js 文件關於原因的解釋 '使用客戶端'是必要的：

這是另一部分解釋您的app/layout.tsx 預設是一個伺服器元件：

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！