简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment utiliser MUI avec le routeur d'applications Next.js ?
P粉754473468
P粉754473468 2023-12-23 21:56:44
0
1
446

Je viens d'utiliser npx create-next-app 创建了一个 next.js 13 typescript 应用程序。我已经删除了所有示例 css 和 html，并尝试引入 MUI。我的 app/layout.tsx et ça ressemblait à ça : 

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

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

L'ajout du bit CSSBaseline produit un tas d'erreurs sur les éléments manquants dans l'importation React. Lire en ligne En effet, React est accessible à partir d'un composant serveur et le composant de mise en page racine doit être ce composant serveur. Voici le résultat de l'erreur : 

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)

Ne devrais-je pas faire ça ? Qu'est-ce que j'ai raté?

J'ai l'impression qu'une fois cela fait, le reste des choses se mettra en place et je pourrai créer mon application MUI.

Je pense porter l'exemple Material-Next-Ts du routeur de page au routeur d'application. Mais la version d'émotion utilisée prend en charge la méthode par défaut plus simple, qui semble ne nécessiter aucune configuration, de sorte que tous les obstacles par lesquels le routage des pages saute dans l'exemple semblent inutiles. Ce serait formidable si l'exemple était porté sur Application Router !

P粉754473468
P粉754473468

répondre à tous(1)
P粉195402292
P粉1954022922023-12-24 09:29:50 1 plancher

Les conseils contenus dans le message d'erreur résoudront le problème : 

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

Essayez d'ajouter 'use client' 指令添加到 app/layout.tsx 的顶部。以下是Next.js 文档关于原因的解释 '使用客户端' est nécessaire : ​​

C'est une autre partie expliquant comment votre app/layout.tsx est un composant serveur par défaut :

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！