Next.jsで外部ライブラリのスタイルシート適応


ReactでUIコンポーネントを使う時にMaterial-UIは一番有力な選択肢だと思います。

Next.jsでも同じように使いたいところですが、サーバーサイドレンダリング(SSR)時にcss modulesによるクラス名付与が合わなくなる問題が起きました。

index.js:1 Warning: Prop className did not match. Server: "MuiBox-root...

これによって一部スタイルが崩れてしまう。

devでの再コンパイルや内部遷移によって直ることもあるがproductionでも問題が起きるので使い物にならない状態なので対策します。

 

対策方法ですがMaterialUIのSSRが用意されています。

これをNext.jsに取り入れるために_documsnt.jsをカスタムします。

Material icons<Typography>のためのRobotoの読み込みもついでに。

これでWarningは消え正しく表示されるようになりました。

 

一息ついたところですがreact-custom-scrollbarsを導入したところ、同様のエラーが出ました。

これはuniversalプロパティを付けるだけで解決しましたが、コンポーネントライブラリを追加するとまた出てきそうな感じがします。

調べつつ色々とconfigをいじったりもしましたが根本解決はできなかったので、現状ではライブラリ側でSSR適応されていることを期待するしかないです。問題が起きたら再度取り組むか。

Tips

nextの中にこんなのがありました。:next-plugin-material-ui

ソースを見ると今回のコードと同様の感じですね。

現在は実験的だからまだ使うなという状態ですが、そのうち使えるようになるかも。

こんなのがあるあたりMaterial UIはnext.jsで何か作るときのデファクトスタンダードだと思ってもよさそうな感じです。

追記:Examples in material ui

Material UI側にもnext.jsを使うサンプルがありました。こっちの方がわかりやすい。


コメントを残す

メールアドレスが公開されることはありません。