React + Nextjs + TypeScript でつくったホームページに MUI の Drawer を用いたナビゲーションメニューを導入する

やりたいこと

弊社のホームページのメニューに MUI の Drawer を導入したい。

導入の動機

これまで HTML の nav タグ (navバー) でメニューを表示していました。

これはこれで使いやすいのですが、SPサイズ (375px X 667px) で表示するとレイアウトがくずれてしまいます。

MUI の Drower を使うと SPサイズでもレイアウトを保てそうなので試してみることにしました。

開発環境

• コンテナ: Docker CE + docker-compose
• Dockerイメージ: node:latest
• "react": "18.1.0"
• "typescript": "4.6.4"
• "next": "12.1.6"
• "react-dom": "18.1.0"
• "@mui/material": "5.8.0"
• "@mui/icons-material": "5.8.0"

本番環境

• Vercel CDN (東京エッジロケーション)

インストール

node.js は docker.hub の node:latest イメージを使っています

docker-compose.yml

version: '3'

services:
  hreact:
    image: node:latest
    container_name: 'unrweb-mui'
    hostname: 'unrweb-mui'
    ports:
      - '3000:3000'
    stdin_open: true
    tty: true
    working_dir: '/var/www/html'
    volumes:
      - ./src:/var/www/html
    networks:
      - dumynet
networks:
  dumynet:
    external: true

コンテナ起動

$ docker-compose up
Creating unrweb-mui ... done
Attaching to unrweb-mui
unrweb-mui | Welcome to Node.js v17.8.0.
unrweb-mui | Type ".help" for more information.

$ docker container ls
CONTAINER ID   IMAGE         COMMAND                  CREATED         STATUS         PORTS                    NAMES
30d700d340af   node:latest   "docker-entrypoint.s…"   7 seconds ago   Up 6 seconds   0.0.0.0:3000->3000/tcp   unrweb-mui
$ docker container exec -it unrweb-mui /bin/bash
root@unrweb-mui:/var/www/html#

React + Nextjs + TypeScript　のインストール

root@unrweb-mui:/var/www/html# npx create-next-app . --typescript
Need to install the following packages:
  create-next-app
Ok to proceed? (y) y
Creating a new Next.js app in /var/www/html.

(snip)

[重要!] Vercel デプロイ

ここで一度 Vercel　へデプロイします。2022年5月29日現在、MUI のインストール後に Vercel へデプロイすると、必ずデプロイがエラーになります。理由はわかりませんが、MUI のインストール前に一度、MUI インストール後にも一度デプロイしておくと、以降は問題なく使えます。

ローカル環境での動作確認

root@unrweb-mui:/var/www/html# yarn dev
yarn run v1.22.18
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 3.3s (125 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

• local server は control + c で停止して　yarn build して yarn start

root@unrweb-mui:/var/www/html# yarn build
yarn run v1.22.18
$ next build
info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      6.24 kB        81.2 kB
├   └ css/149b18973e5508c7.css             655 B
├   /_app                                  0 B            74.9 kB
├ ○ /404                                   193 B          75.1 kB
└ λ /api/hello                             0 B            74.9 kB
+ First Load JS shared by all              74.9 kB
  ├ chunks/framework-1f10003e17636e37.js   45 kB
  ├ chunks/main-fc7d2f0e2098927e.js        28.7 kB
  ├ chunks/pages/_app-43ac001d99fedbd3.js  493 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/27d177a30947857b.css               194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Done in 18.65s.
root@unrweb-mui:/var/www/html# yarn start
yarn run v1.22.18
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

git push

$ pwd
/Users/r/Docker/unrweb-mui
$ git status
On branch main
Your branch is up to date with 'origin/main'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	docker-compose.yml
	src/

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   docker-compose.yml
	new file:   src/.eslintrc.json
	new file:   src/.gitignore
	new file:   src/README.md
	new file:   src/next-env.d.ts
	new file:   src/next.config.js
	new file:   src/package.json
	new file:   src/pages/_app.tsx
	new file:   src/pages/api/hello.ts
	new file:   src/pages/index.tsx
	new file:   src/public/favicon.ico
	new file:   src/public/vercel.svg
	new file:   src/styles/Home.module.css
	new file:   src/styles/globals.css
	new file:   src/tsconfig.json
	new file:   src/yarn.lock

$ git commit -m "1st commit"
[main 23b054c] 1st commit
 16 files changed, 2080 insertions(+)
 create mode 100644 docker-compose.yml
 create mode 100644 src/.eslintrc.json
 create mode 100644 src/.gitignore
 create mode 100644 src/README.md
 create mode 100644 src/next-env.d.ts
 create mode 100644 src/next.config.js
 create mode 100644 src/package.json
 create mode 100644 src/pages/_app.tsx
 create mode 100644 src/pages/api/hello.ts
 create mode 100644 src/pages/index.tsx
 create mode 100644 src/public/favicon.ico
 create mode 100644 src/public/vercel.svg
 create mode 100644 src/styles/Home.module.css
 create mode 100644 src/styles/globals.css
 create mode 100644 src/tsconfig.json
 create mode 100644 src/yarn.lock
$ git push https://[e-mail]/unrcom/unrweb-mui.git
Enumerating objects: 24, done.
Counting objects: 100% (24/24), done.
Delta compression using up to 8 threads
Compressing objects: 100% (21/21), done.
Writing objects: 100% (23/23), 45.34 KiB | 9.07 MiB/s, done.
Total 23 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/unrcom/unrweb-mui.git
   59bac2c..23b054c  main -> main
$

Vercel デプロイ

• https://vercel.com/dashboard
• [+ New Project] をクリック
• デプロイ対象のリポジトリの [Import] をクリック
• FRAMEWORK PRESET　に Next.js　を選択
• ROOT DIRECTORY を指定　(上記の手順の場合は unrweb-mui > src) して　[CONTINE] をクリック
• [DEPLOY] をクリック
• Congratulations!　を待つ!

• [Go to Dashboard] をクリック
• ブラウザから DOMAINS にアクセス

MUI　のインストール

• yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

root@unrweb-mui:/var/www/html# yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material
yarn add v1.22.18
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@emotion/react > @emotion/babel-plugin@11.9.2" has unmet peer dependency "@babel/core@^7.0.0".
warning "@emotion/react > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.17.12" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 36 new dependencies.

(snip)

ここでも一度 Vercel へデプロイして動作確認しておく。

コードを配置する

私の場合は ./pages ./components ./styles に必要なコードを配置していきます。ローカルでの動作確認後に無事、Vercel CDN からのコンテンツ配信が確認できました。