はじめに
この記事は、HUITアドベントカレンダー2018 15日目の記事です。
この記事について
前回の記事でNext.jsとFirebase HostingによるSSRを行うWebサイトを作りました。
今回は、このWebサイトにMaterial-UIを導入し、見た目を整えたいと思います。
Materia-UI公式サンプルの機能を、前回作ったWebサイトに適応させるという流れになります。
まだWebサイトをデプロイしていない方は前回の記事を参考にデプロイを完了させておきましょう。
Material-UIとは？
Material-UIはReactでマテリアルデザインを実現するモジュールです。
サクッとイイ感じの見た目を実現するために使っている方も多いかもしれません。
Next.jsでMaterial-UIを使うときの注意点
そんなMaterial-UIですが、通常通り使用するとSSRに対応してくれないため、一瞬スタイルが適用されていない画面が表示されたり、ページ幅がやたら長くなったりします。
この原因は、最初に送られてくるSSRされた静的なhtmlの方にスタイルが適用されないことにあります。
キチンとSSRに対応させる必要がある訳です。
モジュールのインストール
まずは必要なモジュールのインストールを行います。
以下のコマンドを実行します。
$ npm i --save @material-ui/core jss prop-types react-jss
_app.jsと_document.jsを追加する
_app.jsと_document.jsは、ともにNext.jsでSSRするときの設定を定義するためのファイルです。
_app.jsではAppコンポーネントを継承してページ間の遷移に関する挙動を定義します。一方、_document.jsではDocumentコンポーネントを継承してhtml属性を定義します。ここにMaterial-UIの設定を追加することで、Material-UIをSSRに対応させることができます。
その設定方法ですが、それぞれ公式サンプルからコピペするだけでOKです。
pagesフォルダ内にそれぞれのファイルを作り、_app.jsと_document.jsを丸々コピペしましょう。
次に、MyAppコンポーネントが参照するgetPageContext.jsを追加します。
pagesフォルダと同じ階層にsrcフォルダを作り、その中にgetPageContext.jsファイルを作ります。
こちらも公式のgetPageContext.jsの内容をコピペすればOKです。
srcフォルダという名前に抵抗があれば任意のものに変更して問題ありませんが、その場合は_app.jsファイル内のimport文を適切に変更してください。
ここまででNext.jsでMaterial-UIを使う準備が整いました。
ページの見た目を変える
ここからは、React時と同様に好きなコンポーネントにMaterial-UIのコンポーネントを適用させてゆくだけです。
公式サンプルでindex.jsとabout.jsの見た目を変えているので、これもコピペしましょう。
デバッグ
ページにスタイルが適用されているか、以下のコマンドで確認してみます。
$ npm run dev
http://localhost:3000にアクセスします。
下の画像のようにスタイルが適用されていればokです。
お疲れ様でした。
さいごに
はい、というわけで圧倒的コピペ大会でした。
やはりスタイルを適用するとサイトを更新していくモチベがグッと高まって良いですね。
それでは。