我刚刚使用 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示例从页面路由器移植到应用程序路由器。但是正在使用的情感版本支持更简单的默认方法，该方法似乎需要零设置，因此示例中页面路由跳过的所有环路似乎都是不必要的。如果将示例移植到应用程序路由器，那就太棒了！
错误消息中的指导将解决该问题：
尝试将
'use client'指令添加到app/layout.tsx的顶部。以下是Next.js 文档关于原因的解释'使用客户端'是必要的：这是另一部分解释您的
app/layout.tsx默认情况下是一个服务器组件：