Next.jsプロジェクトでMaterial UIを使う方法

「Material UIで楽にスタイリングしたい」
「Next.jsでMaterial UIを使いたい」
「いつも通りimportしてもMaterial UIを使えない」

といった状況の方向けの記事です。

Reactの超便利ライブラリとして有名なMaterial UIを、Next.jsプロジェクト内で使うには設定が必要です。

ということでその設定方法を解説します。

なお、サンプルコードは全てTypeScriptで記述しているのでご了承ください。

手順は以下の通りです。

なぜNext.jsのデフォルト設定ではMaterial UIを使えないのか

そもそもの話ですが、Next.jsのデフォルト設定でMaterial UIを使えない理由は、Material UIがサーバーサイドレンダリング（SSR）に対応できないからです。

ということで、Material UIをSSRに対応させる設定が必要です。

今回参考にした記事は以下となります。

Next.jsの_appファイルを編集しよう

先ほどの参考記事のソースコードを丸っとコピペでも良いのですが、重要な部分は以下です。

pages/_app.tsx

import React from 'react'
import {Container, AppProps} from 'next/app';
import { MuiThemeProvider } from '@material-ui/core/styles'
import {theme} from "styles/theme";

const App = ({Component, pageProps}: AppProps) => {
  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);
  
  return (

  )
}

export default App

続いて_document.tsxを編集していきます。

Next.jsの_documentファイルを編集しよう

_document.tsxではgetInitialProps()を使います。

pages/_document.tsx

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

class CustomDocument extends Document {
  static async getInitialProps (ctx) {
    const sheets = new ServerStyleSheets()

    const originalRenderPage = ctx.renderPage({
      enhanceApp: App => props => sheets.collect()
    })

    const initialProps = await Document.getInitialProps(ctx)

    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
    }
  }
  render() {
    return (
      // 省略
    );
  }
}
export default CustomDocument;

これでMaterial UIが綺麗にrenderingされるはず！

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。