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!
