Ajoutez la directive "use client" en haut du fichier, TypeError : createContext ne fonctionne que pour les composants clients

Question

J'ai créé une toute nouvelle application Next.js qui utilise le dossier app. Ensuite, j'ai installé Material UI et commencé à utiliser les exemples donnés dans la documentation. Mais j'obtiens cette erreur :

Erreur de type : createContext ne fonctionne que sur les composants clients. Ajoutez une directive "use client" en haut du fichier pour l'utiliser.

Voici un exemple de documentation dans mon code :

import Button from "@mui/material/Button";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

Je souhaite que ce bouton apparaisse sur ma page. Je sais que l'ajout de "use client" en haut corrigera l'erreur, mais je veux que ma page s'affiche sur le serveur.

P粉642436282 · Answer

Pour que MUI fonctionne parfaitement avec SSR, vous devez effectuer quelques ajustements : https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.

Remarque : même si vous le configurez correctement, le bouton peut être rendu côté serveur, mais vous ne pouvez pas attribuer le gestionnaire onClick (si je me souviens bien)

P粉502608799 · Answer

Apparemment, le bouton que vous importez utilise un hook client, dans ce cas createContext。为此，您需要在文件顶部添加“use client”. Mais cela signifie que la page devient un composant client et ne cesse d'être un composant serveur.

Si cela vous dérange, vous pouvez ajouter le fichier app 同一级别创建一个 libmui.js dans le même dossier que comme ceci :

// lib/mui.js

"use client";

export * from "@mui/material";

Ensuite, vous l'importez à partir de là (de cette façon, le reste de la page est toujours un composant serveur) :

// app/page.js

import { Button } from "../lib/mui";

export default function Home() {
  return (
    
      
    
  );
}

Remarque, vous pouvez rencontrer une erreur similaire lors de la configuration du contexte. Cela signifie que vous essayez de le définir dans le composant serveur. La ligne directrice consiste à ajouter ceci à son propre fichier de balises « Utiliser le client » :

// app/theme-provider.tsx

"use client";

import { createContext } from "react";

export const ThemeContext = createContext("");

export default function ThemeProvider({ children }) {
  return (
    
      {children}
    
  );
}

et importez-le à partir de là :

// app/layout.js

import ThemeProvider from './theme-provider';
 
export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    
  );
}