5分で出来るかな? React/TypeScript/Next.js/Material-ui プロジェクトテンプレートの簡単な作り方

5619 ワード
JavaScript next.js TypeScript material-ui React JavaScript テキストリンク

はじめに

React/TypeScript/Next.js/Material-ui のプロジェクトテンプレートがあれば便利かなと思ったので作ってみました。
あと、手順をまとめれば5分で出来ると思ったのでやってみました。
いってみよう。

完成形はこれ

環境

% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.7 # Catalinaさん
BuildVersion:   19H2

% brew -v
Homebrew 3.0.11

% nodebrew -v
nodebrew 1.0.1

% node -v
v14.16.1

% yarn -v
1.22.10

開始

1． Next.js/TypeScript プロジェクトの作成

1-1． 開発用のディレクトリ作るよ（ご自由にどうぞ）

mkdir ~/Development

1-2． ディレクトリ移動するよ

cd ~/Development

1-3． Next.js/TypeScript プロジェクトの雛形を作るよ

yarn create next-app react-sample-app --example with-typescript

ここまでですでに3分半経過してます。yarn(^q^)

1-4． ディレクトリ移動するよ

cd react-sample-app

1-5． sample-app ディレクトリの中身はこうなってるよ

.
├── .git               # ギットさん
├── components         # UIコンポーネント置き場
├── interfaces         # 共有インターフェース置き場
├── node_modules       # このプロジェクトで利用するモジュール達
├── pages              # サイトページ置き場
├── utils              # 共通関数などなど置き場
├── .gitignore         # イグノアさん
├── README.md          # リードミーさん
├── next-env.d.ts      # Next.jsタイプがTypeScriptコンパイラによって確実に取得されるようにします。ですって
├── package.json       # このプロジェクトで利用するモジュールを管理するやつ1
├── tsconfig.json      # TypeScriptの設定ファイル 
└── yarn.lock          # このプロジェクトで利用するモジュールを管理するやつ2

1-6． 動かしてみるよ

yarn run dev

1-7． http://localhost:3000/ にアクセスしてみるよ （これを触ってソース見るだけで勉強になるよ）

1-8． 停止するよ

control + c

2． Material-UI を使うよ

Material-UI を Next.js の SSR に対応させてくよ

2-1． Material-UI をインストールするよ

yarn add @material-ui/core @material-ui/icons

2-2． theme.ts を作成するよ, ソースはこちらを参照

vi components/theme.ts

2-3． _app.tsx を作成するよ, ソースはこちらを参照

vi pages/_app.tsx

2-4． _document.tsx を作成するよ, ソースはこちらを参照

vi pages/_document.tsx

ドロワー付きヘッダーを作成するよ

2-5． components/Layout.tsx を修正するよ, ソースはこちらを参照

vi components/Layout.tsx

3． 起動, Finish!!

yarn run dev

結果発表

我が家のネットワークが遅かったぁ(^q^)
でも少ない手順でここまで出来るのは便利ですね

最後に

ソースはご自由にお使いください