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 !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les conseils contenus dans le message d'erreur résoudront le problème :
Essayez d'ajouter
'use client'指令添加到app/layout.tsx的顶部。以下是Next.js 文档关于原因的解释'使用客户端'est nécessaire : C'est une autre partie expliquant comment votre
app/layout.tsxest un composant serveur par défaut :