如何將 MUI 與 Next.js 應用程式路由器結合使用？

我剛剛使用 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粉754473468342 天前492

如何將 MUI 與 Next.js 應用程式路由器結合使用？

全部回覆(1)我來回復