此问题已在此处有答案：
You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"（2个答案）
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it（1个答案）
12天前关闭
我刚刚使用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示例从页面路由器移植到应用路由器。但是正在使用的emotion版本支持一个更简单的默认方法，该方法似乎不需要任何设置，因此示例中页面路由跳过的所有环似乎都是不必要的。如果该示例被移植到应用程序路由器将是可怕的！
1条答案
按热度按时间j5fpnvbx1#
错误消息中的指导将解决此问题：
尝试将
'use client'指令添加到app/layout.tsx的顶部。以下是Next.js文档中关于为什么'use client'是必要的解释：大多数React应用程序依赖于上下文来在组件之间共享数据，要么直接通过createContext，要么间接通过从第三方库导入的提供程序组件。
在Next.js 13中，客户端组件完全支持上下文，但不能直接在服务器组件中创建或使用上下文。这是因为服务器组件没有React状态（因为它们不是交互式的），并且上下文主要用于在一些React状态更新后重新渲染树深处的交互式组件。
这里有另一个部分解释您的
app/layout.tsx在默认情况下是一个服务器组件：为了更轻松地过渡到服务器组件，默认情况下，App Router中的所有组件都是服务器组件，包括特殊文件和托管组件。这使您可以自动采用它们，而无需额外的工作，并实现开箱即用的出色性能。您还可以选择使用“use client”指令选择加入客户端组件。