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

Precondition

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

Fact

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

Error log or Error Massage

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

Cause

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

Method

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

  • _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
There are no comments on this article yet.

Environment Library tools

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