logo image

Next.jsでMUIを使用時に表示されるエラー(Warning: Prop className did not match.)

Icon representing a data.
2021-12-21
Icon show updated_at
2021-12-21
1
Twitter icon.
Next.js
Vercel
MUI
TypeScript

前提条件

  • Next.jsでMUIをインストール済みの状態
  • ローカル環境でも同様

現象

  • ビルド時に以下のようなエラーが発生する。
  • MUIのタグが使用できない。

エラーログ・エラーメッセージ

Warning: Prop className did not match. Server: "xxxxxx" Client: "xxxxxxxxxxxx"

原因

_app.ts及び_document.tsにMUIを適用させるためのソースコードを付与していなかった。

対応

公式のサンプルソースコードを参考に以下のソースコードを変更する。

  • _app.ts
  • _document.ts

https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

Next.js
Vercel
MUI
TypeScript
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。