React/Next.js/TypeScriptアプリ作成の環境構築を速攻行う

はじめに

React/Next.js/TypeScript 初学者であり、これからアプリを作りながら実践で学んでいこうとしているところです。
はじめの環境構築段階で億劫になっていましたが、随分簡単に立ち上がりましたので、簡単にまとめておきます。

Node.jsのインストール

$ brew -v
  # Homeberwのバージョンが表示される

$ brew update
$ brew install nodejs

$ node -v
  # Node.jsのバージョンが表示される

$ npm -v
  # npmのバージョンが表示される

プロジェクトの作成

$ npx create-next-app --ts test-app
  # test-appという名前でアプリを作成

Node.jsバージョン相違によるエラー

Installing dependencies:
- react
- react-dom
- next

yarn add v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error styled-jsx@5.0.0: The engine "node" is incompatible with this module. Expected version ">= 12.0.0". Got "10.19.0"
error Found incompatible module.

私のPCではnode.js10.19.0を使用していたためエラー。12.0.0以上を使用しないとreactアプリは作成できないようです。

アプリの立ち上げ

npm run dev
  # 立ち上げたアプリのディレクトリで行う

下記のような画面が表示されればOK

Material-UIのインストール

アプリ作成する上で、デザインライブラリを使用することが多くなるので、
今回はMaterial-UIをインストール

npm i -S @material-ui/core @material-ui/icons @material-ui/lab
  #packege.jsonにバージョン情報が追記されている

Material-UI公式HP
Material-UIにもバージョンがあり、ページが異なるので、pakege.jsonでmaterial.uiのバージョンを確認し、該当のバージョンのサイトを見る必要がある

さいごに

今回はサクッとアプリを立ち上げるところまで記載しました。
これからアプリ作成しまがら、アウトプットがあれば記載していこうと思います。