MUI 公式 Example の改造その 3 -- nextjs-with-typescript 導入

概要

MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造する 3 回目です。公式サイトの How to use に従って、作業を進めます。

github.com

前回の Node.js インストールについては以下の記事をご参照ください。

MUI の公式 Example の改造その 2 -- Node.js インストール - Depending on the Time and Situation

数回に分けて連載する MUI に関連する記事の全体像

その 1 -- anyenv インストール
その 2 -- Node.js インストール
その 3 -- nextjs-with-typescript 導入 ← 今ココ

ホスト

Mac

MacBook Pro (13-inch, Early 2011) - 技術仕様 (日本) 魔改造済みの骨董品
メモリ: 16 GB
ストレージ: SSD 512 GB
OS: macOS High Sierra 10.12.6

作業ディレクトリ作成

% pwd
% /Users/ユーザー/
% mkdir React && cd $_

ダウンロード

% curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript
% mv nextjs-with-typescript school-test
% cd school-test

作業ディレクトリの Node.js バージョンを固定

% nodenv local 17.1.0
% nodenv rehash

インストール

% npm install
% npm run dev

ブラウザで確認

% open http://localhost:3000

ブラウザに以下のような画面が表示されたら成功です！