简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何将 MUI 与 Next.js 应用程序路由器结合使用？
P粉754473468
P粉754473468 2023-12-23 21:56:44
0
1
444

我刚刚使用 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示例从页面路由器移植到应用程序路由器。但是正在使用的情感版本支持更简单的默认方法，该方法似乎需要零设置，因此示例中页面路由跳过的所有环路似乎都是不必要的。如果将示例移植到应用程序路由器，那就太棒了！

P粉754473468
P粉754473468

全部回复(1)
P粉195402292
P粉1954022922023-12-24 09:29:50 1 楼

错误消息中的指导将解决该问题：

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

尝试将 'use client' 指令添加到 app/layout.tsx 的顶部。以下是Next.js 文档关于原因的解释 '使用客户端'是必要的：

这是另一部分解释您的app/layout.tsx 默认情况下是一个服务器组件：

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！