Next.jsで個人サイトをリニューアルするにあたり、MUIのテンプレートがFreeかつ便利そうであったため、これを採用することにした。WEBデザインまでは手が回らない自分にとり、テンプレートはありがたい存在である。自前で一からデザインするより早いし高クオリティなのだから使わない手はない。
とにもかくにも動作させるまで
- 使うのはここ。
- そこでgitから一度まとめてダウンロードし、該当のディレクトリをNext.jsのプロジェクト内にあるpagesに*.tsxだけコピーする。
ライブラリをインストール
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react-final-form
npm run devで起動し、初期ページに手打ちで飛ぶと、無事画面が表示される。画像のリンク切れが発生しているが、これは修正前なのである意味当然。
修正
不要な部品を削除
自分の場合コンテンツはブログメインで行くつもりなので、個人サイトはリンクと問い合わせフォームがあればひとまず事足りる。
というわけで、index.tsxを残し、後は全て部品も含めて削除する。
コードを追加・修正
問い合わせフォームを追加するとともに、個人用サイトに合わせてindex.tsxおよびその部品も修正。
細かい内容は逐一書いているとキリがないので省略するが、モノはこちらに置く予定。
