简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie verwende ich MUI mit Next.js Application Router?
P粉754473468
P粉754473468 2023-12-23 21:56:44
0
1
414

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!

P粉754473468
P粉754473468

Antworte allen(1)
P粉195402292
P粉1954022922023-12-24 09:29:50 1 Etage

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

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 默认情况下是一个服务器组件：

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！