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の読み込みもついでに。

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collect(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      ctx.renderPage(sheet);
    }
  }
  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" href="/favicon.ico" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

import Document, { Html, Head, Main, NextScript } from "next/document";

import { ServerStyleSheets } from "@material-ui/styles";

class MyDocument extends Document {

static async getInitialProps(ctx) {

const sheet = new ServerStyleSheets();

const originalRenderPage = ctx.renderPage;

try {

ctx.renderPage = () =>

originalRenderPage({

enhanceApp: App => props => sheet.collect(<App {...props} />)

});

const initialProps = await Document.getInitialProps(ctx);

return {

...initialProps,

styles: (

{initialProps.styles}

{sheet.getStyleElement()}

</>

)

};

} finally {

ctx.renderPage(sheet);

}

render() {

return (

<Html>

<Head>

<meta

name="viewport"

content="width=device-width, initial-scale=1.0"

<link

rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

<link

rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons"

</Head>

<body>

</body>

</Html>

);

}

export default MyDocument;

これで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を使うサンプルがありました。こっちの方がわかりやすい。

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

Tips

追記：Examples in material ui

One thought on “Next.jsで外部ライブラリのスタイルシート適応”

コメントを残すコメントをキャンセル

Tips

追記：Examples in material ui

One thought on “Next.jsで外部ライブラリのスタイルシート適応”

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル