MUI 公式 Example の改造 その 3 -- nextjs-with-typescript 導入
概要
MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造する 3 回目です。 公式サイトの How to use に従って、作業を進めます。
前回の Node.js インストールについては以下の記事をご参照ください。
MUI の公式 Example の改造 その 2 -- Node.js インストール - Depending on the Time and Situation
数回に分けて連載する MUI に関連する記事の全体像
- その 1 -- anyenv インストール
- その 2 -- Node.js インストール
- その 3 -- nextjs-with-typescript 導入 ← 今ココ
この記事の目次
- 概要
- 数回に分けて連載する MUI に関連する記事の全体像
- この記事の目次
- ホスト
- 作業ディレクトリ作成
- ダウンロード
- 作業ディレクトリの Node.js バージョンを固定
- インストール
- ブラウザで確認
ホスト
Mac
メモリ: 16 GB
ストレージ: SSD 512 GB
作業ディレクトリ作成
% 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
ブラウザに以下のような画面が表示されたら成功です！
MUI 公式 Example の改造 その 2 -- Node.js インストール
概要
MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造する 2 回目です。 前回の anyenv インストールについては以下の記事をご参照ください。
今回は、まず、anyenv で nodenv をインストールします。次に、nodenv で Node.js をインストールします。 以前は、ndenv を使っていて、以下の記事を数年前にアップしました。
開発が止まっていたようなので、ここ数年は nodenv に鞍替えしていました。
数回に分けて連載する MUI に関連する記事の全体像
- その 1 -- anyenv インストール
- その 2 -- Node.js インストール ← 今ココ
この記事の目次
ホスト
Mac
- MacBook Pro ( 13-inch, Early 2011 ) 魔改造済みの骨董品
nodenv
nodenv インストール
Windows の WSL Ubuntu の場合は .bash_profile ではなく .profile で。
% anyenv install -l % anyenv install nodenv % source ~/.bash_profile % anyenv version
Node.js
17.1.0 インストール
% nodenv install -l % nodenv install 17.1.0 % nodenv rehash % nodenv versions % nodenv global 17.1.0 % node -v % npm version
MUI 公式 Example の改造 その 1 -- anyenv インストール
概要
以前は Material UI といっていた CSS のフレームワークが新しくなり MUI というものに変わりました。
MUI 公式 Example の中から Next.js (TypeScript version) を雛形とし、自分の作りたいサイトに改造していきたいと思います。
今回は、Node.js のバージョンを管理するために、まず anyenv をインストールします。anyenv については、数年前にもアップしておりますが、もう一度記事として書いてみることにしました。
数回に分けて連載する MUI に関連する記事の全体像
- その 1 -- anyenv インストール ← 今ココ
- その 2 （未定）
この記事の目次
ホスト
Mac
- MacBook Pro ( 13-inch, Early 2011 ) 魔改造済みの骨董品
anyenv
参考サイト
anyenv インストール
% git clone https://github.com/riywo/anyenv ~/.anyenv
パスを通す
ホームディレクトリの .bash_profile を開いて最終行に以下を追加。Windows の WSL ( Ubuntu )で作業している場合は、bash_profile ではなく .profile などに追加してください。最新の Mac のシェルはなんだったっけな？忘れてしまいました。
if [ -d $HOME/.anyenv ]
then
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"
fi
% source ~/.bash_profile % anyenv install --init % anyenv
プラグイン用ディレクトリを作成
% mkdir -p $(anyenv root)/plugins
anyenv-update インストール
% git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update % anyenv update
