Ich habe gerade eine next.js13typescript-Anwendung mit npxcreate-next-app erstellt. Ich habe alle Beispiel-CSS und HTML entfernt und versucht, MUI einzuführen. Meine app/layout.tsx sieht so aus: import{CssBaseline}from'@mui/material';exportdefaultfunctionRootLayout({children,}:{children:Reac

Wie verwende ich MUI mit Next.js Application Router?

Ich habe gerade npx create-next-app 创建了一个 next.js 13 typescript 应用程序。我已经删除了所有示例 css 和 html，并尝试引入 MUI。我的 app/layout.tsx verwendet und es sah so aus:

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

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

Das Hinzufügen des CSSBaseline-Bits führt zu einer Reihe von Fehlern bezüglich Dingen, die beim React-Import fehlen. Online lesen Dies liegt daran, dass auf React von einer Serverkomponente aus zugegriffen wird und die Root-Layoutkomponente diese Serverkomponente sein muss. Dies ist die Fehlerausgabe:

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)

Sollte ich das nicht tun? Was habe ich verpasst?

Ich habe das Gefühl, sobald ich das erledigt habe, werden sich die restlichen Dinge von selbst ergeben und ich kann meine MUI-App erstellen.

Ich denke darüber nach, das Material-next-ts-Beispiel vom Page-Router auf den Application-Router zu portieren. Die verwendete Emotionsversion unterstützt jedoch die einfachere Standardmethode, die anscheinend keine Einrichtung erfordert, sodass alle Rahmen, durch die das Seitenrouting im Beispiel springt, unnötig erscheinen. Es wäre toll, wenn das Beispiel auf Application Router portiert würde!

P粉754473468325 Tage vor464

Wie verwende ich MUI mit Next.js Application Router?

Antworte allen(1)Ich werde antworten