React開発するためにNext.jsで環境構築（セットアップ）の手順
Reactで個人開発するためにNext.jsで環境構築しました。
セットアップ手順を簡単に紹介していきます。
これから説明していく作業は一言で言えば「Next.jsをインストールする」ことです。
もう少し具体的にいうとNext.jsのフォルダを作ることです。
まずはその下準備として作業ディレクトリを決めていきます。
（ちなみにOSはMacで、npxでセットアップしました。）
目次
作業ディレクトリを決める
作業ディレクトリを決めるというのは、以下のことです。
- インストールするNext.jsフォルダには、そのフォルダを入れる箱としての役割のディレクトリが必要
- 「ディレクトリ＝フォルダ」のようなもので、ここでは箱としての役割のものを作業ディレクトリと便宜的に呼ばせてください。
デスクトップにNext.jsフォルダをインストールする場合
デスクトップ上にNext.jsフォルダを作る場合は、「デスクトップ＝作業ディレクトリ」という考え方をしていきます。
まず、ターミナル（コマンドプロンプト）を開いて以下のコマンドを実行します。
cd desktop
これで、作業ディレクトリとしてデスクトップが指定されました。
この状態から以下のコマンドを実行して、Next.jsをインストールしていきます。
npx create-next-app@latest
すると、オプション設定を指定していないので、設定をどうするかターミナル上で聞かれます。
対話型になっているので、順番にオプションを決めていきます。
自分で作成した作業ディレクトリ内にNext.jsフォルダをインストールする場合
ここからは作業ディレクトリを自分で作成して、そこにNext.jsフォルダを作る場合についてです。
例えば、デスクトップに「MyApps」という作業ディレクトリを作成し、そのフォルダ中にNext.jsをインストールしたい場合。
そんなときは、まずは一旦デスクトップまで作業ディレクトリを移動して、それから「MyApps」を作成していきます。
ターミナル（コマンドプロンプト）を開いて、以下のコマンドを実行するとできます。
cd desktop
mkdir MyApps
さらに、作成したMyAppsフォルダを作業ディレクトリとして指定したいので、以下のコマンドを実行します。
cd MyApps
ちなみに、ターミナルを閉じてしまってからMyAppsフォルダを作業ディレクトリ指定する場合。
「今いる作業ディレクトリから移動する」という考え方をするので、以下のコマンドを実行していきます。
cd desctop/MyApps
これで、作業ディレクトリとしてデスクトップ上にあるMyAppsフォルダが指定されました。
この状態から以下のコマンドを実行して、Next.jsをインストールしていきます。
npx create-next-app@latest
すると、オプション設定を指定していないので、設定をどうするかターミナル上で聞かれます。
対話型になっているので、順番にオプションを決めていきます。
オプション設定を対話型で決める流れ
詳しくは省略しますが、ざっくり箇条書きにすると以下のようにオプションやプロジェクト（フォルダ）名を決めていく流れになります。
- バージョンの確認（create-next-app使用の場合、バージョン指定はここではできず最新のものになる）
- インストールしたNext.jsのプロジェクト（フォルダ）名の設定
- TypeScriptを使用するか
- ESLintを使用するか
- Tailwindを使用するか
- srcディレクトリを追加するか
- Appディレクトリの機能を使用するか
- 外部ファイルを指定する際のプロジェクトディレクトリの扱いについてのもの
ブラウザ表示して動作確認
cd~で指定した作業ディレクトリが意図した場所になっているか確認した上で、以下のコマンドを実行していきます。
npm run dev
待っていると、ターミナル上に「http://localhost:3000」と出てきます。
それをコピーし、ブラウザ表示してURLに貼り付けてURL先に飛びます。
何事もなければ、初期画面が表示されると思います。
ポート番号の変更
ちなみにURL「http://localhost:3000」の3000はポート番号と呼ばれていて、変更することができます。
他のプロジェクトを開発する際に3000番号が使われることもあり、番号が被ると表示されないなどのトラブルになるので変えておいてもいいかもしれません。
まずは下準備として、npm run devでローカル起動していたものを一度control + Cで停止します。
ポート番号の変え方としては、インストールしたNext.jsフォルダ内にpackage.jsonというファイルがあるのでソースコードを表示します。
scriptsというフィールドがあるので、その中に以下の記述を追加していきます。
"dev": "next dev -p 3001",
これで、ポート番号は3001になります。
他の4ケタ番号にすれば、その番号がポート番号になります。
ソースコード変更後の保存を忘れずに行ったら、再度npm run devでローカル起動します。
ブラウザ表示でURLのポート番号を適宜変えてちゃんと表示されたら成功です。
環境構築ができたら
ここまでで簡単にですが、環境構築ができました。
この後やることは例えば以下のことだったり、人によりけりだと思います。
- React個人開発でコードをいじってみる
- ライブラリやフレームワークを追加したりして、自分のより望む環境にしていく
プロジェクト開発を進めていくための参考になれば嬉しいです。
今回は以上になります。
