简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk menggunakan MUI dengan Penghala Aplikasi Next.js?
P粉754473468
P粉754473468 2023-12-23 21:56:44
0
1
415

Saya baru sahaja menggunakan npx create-next-app 创建了一个 next.js 13 typescript 应用程序。我已经删除了所有示例 css 和 html，并尝试引入 MUI。我的 app/layout.tsx dan ia kelihatan seperti ini: 

import { CssBaseline } from '@mui/material';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <CssBaseline />
        {children}
      </body>
    </html>
  )
}

Menambah bit CSSBaseline menghasilkan banyak ralat tentang perkara yang hilang daripada import React. Baca dalam talian Ini kerana React diakses daripada komponen pelayan, dan komponen susun atur akar mestilah komponen pelayan tersebut. Ini adalah output ralat: 

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)

Bukankah saya patut melakukan ini? Apa yang saya terlepas?

Saya rasa sebaik sahaja saya menyelesaikan perkara ini, perkara yang lain akan terlaksana dan saya akan dapat membina aplikasi MUI saya.

Saya sedang berfikir untuk mengalihkan contoh material-next-ts dari penghala halaman ke penghala aplikasi. Tetapi versi emosi yang digunakan menyokong kaedah lalai yang lebih mudah, yang nampaknya memerlukan persediaan sifar, jadi semua gelung yang dilalui penghalaan halaman dalam contoh nampaknya tidak perlu. Alangkah baiknya jika contoh itu dialihkan ke Penghala Aplikasi!

P粉754473468
P粉754473468

membalas semua(1)
P粉195402292
P粉1954022922023-12-24 09:29:50 Tingkat 1

Panduan dalam mesej ralat akan menyelesaikan isu: 

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

Cuba tambah 'use client' 指令添加到 app/layout.tsx 的顶部。以下是Next.js 文档关于原因的解释 '使用客户端' perlu:

Ini ialah bahagian lain menerangkan bagaimana app/layout.tsx anda ialah komponen pelayan secara lalai:

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！