はじめに
開発や検証でNext.jsとMaterial UIを組み合わせた環境を構築することが多いので、
その中で私が行き着いた現時点で最も簡単に環境構築する方法を紹介する。
特にNext.js/MUI/Typescript環境の構築は、MUI V5のexemplesの中にMUI V4にはなかった
Next.js (TypeScript version)を見つけてから劇的に構築が楽になったので、
Official examplesに気づいてない人向けの記事と言っても差し支えないかもしれない。
目次
実行環境
- Windows10
- WSL2:Ubuntu20.04LTS
- VSCode(Remote Development導入済み)
WSL2+docker環境にVSCodeのdevcontainerで開発用コンテナを作る
-
VSCodeでWSLのUbuntuに接続する
-
ターミナルで作業用のフォルダを作成し、作成したフォルダーを開く
こんな感じになってたら成功
-
↓の赤枠の部分をクリックして開いたメニューから下記の順に選択
Reopen in Container
Node.js & Typescript
Node.jsのバージョン（例では14を選択）
追加でインストールしたいもの（例では選択無しだが、Git等の必要なものはここで選択しておくと楽）
-
しばらく待つと下記の状態になって環境構築完了
・作成されたコンテナに接続されている
・.devcontainerというフォルダが作成されている
devcontainerについての詳しい説明は割愛するが、
コンテナへの接続解除、再接続は下記のようにすればOK
接続解除（Reopen Folder in WSL）
再接続（Reopen in COntainer）
Material UIのOfficial examplesを利用して開発環境を作る
構築した環境でターミナルを開き、下記のコマンドを実行する
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=3 material-ui-master/examples/nextjs-with-typescript
インストール＆起動
yarn
yarn dev
※やっていることはexemplesのReadmeと同じですが
カレントディレクトリ直下にソース展開するためにstripの値を2→3に変更してます
最終形
タイトルから話がそれるので詳細は割愛しますが
.devcontainerリポジトリに含めてしまえばコンテナ環境も共有して開発できますし、
.devcontainer内のdevcontainer.json Dockerfileに手を入れれば環境のアレンジも簡単です。