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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
错误消息中的指导将解决该问题：
尝试将
'use client'指令添加到app/layout.tsx的顶部。以下是Next.js 文档关于原因的解释'使用客户端'是必要的：这是另一部分解释您的
app/layout.tsx默认情况下是一个服务器组件：