Next.js入門　〜環境構築を始めから丁寧に〜

## はじめに
この記事では、Next.js の環境構築について、初心者の方でもつまずかないように丁寧に解説していきます。他の記事では省略されがちな「なぜこの手順が必要なのか」「なぜこのツールをインストールするのか」といった疑問にも、できる限りお答えしながら進めていきます。

## 概略
1. Voltaのインストール
2. Node.jsのインストール

## Node.jsとは
Next.jsの環境構築をする上で欠かせないものがあります。それが、**Node.js**と呼ばれる**JavaScript実行環境**です。
まず、JavaScriptはPythonなどの他のプログラミング言語とは異なり、**ブラウザ上**で動作するプログラミング言語です。そのため、ブラウザ上で動作するJavaScriptには他のプログラミング言語では可能なOSの機能へのアクセスができないようになっています[^1]。しかし、そんなJavaScriptをOS上で動作できるようにする**実行環境**がNode.jsです。Node.jsを使用することで、ブラウザ上で動作している時にはできなかったOSの機能へのアクセスが可能になり、**サーバー上でも**自由にJavaScriptを動作させることができるようになります。
[^1]:実はブラウザは限定的なOSの機能へのアクセスが可能になっている

## Voltaとは
上で説明したようにOS上でJavaScriptを動作させるにはNode.jsが必要となってきますが、そのインストール方法はさまざまです。
[公式サイト](https://nodejs.org/en/) から、パッケージ版をインストールする方法や、homebrewなどのパッケージ管理ソフトでインストールする方法などがあります。
その中で今回使用するのはVoltaというNode.jsのバージョン管理ツールを使用してのインストールです。
Voltaを使用するのには、Node.jsの特徴の一つである「**一つの環境で一つのバージョンしか使えない**」ことが関係しています。パッケージ版をインストールしている場合、Node.jsのバージョンをプロジェクトごとに変更する際には、一度Node.jsをアンインストールしてから対応するバージョンのNode.jsをインストールし直すことになります。しかし、Voltaなどのバージョン管理ツールを使用すれば、コマンド一つで対応するバージョンのNode.jsに切り替えることが可能です。
つまり、Voltaを使えばNode.jsのバージョンを簡単に管理することができるということです。また、VoltaはWindows、Mac、Linuxをサポートしているため、OSが違っても共通のコマンドを使用できるので本記事ではVoltaを使用してのNode.jsのインストールを推奨しています。

## 環境構築編
### 事前確認
まず、お使いのコンピュータにNode.jsが何らかの方法でインストールされていないかを確認しましょう。
- 使用しているOSに応じてコマンドラインツールを起動し、以下のコマンドを実行してください。[^2]

```
node --version
```

[^2]:「--version」となっているところは「-v」と省略しても同じ結果を返します

ここで、「v」から始まる数字が返ってきた場合はNode.jsがインストール済みなのでアンインストールすることを推奨しますが、もしもパッケージ版でインストールすることにこだわりがある場合はインストール確認編へお進みください。
それ以外のNode.jsがインストールされていないという旨のメッセージが出た方はVoltaのインストールへお進みください。

<details><summary>Node.jsのアンインストール方法について</summary>

Node.jsのインストール方法によってアンインストールの方法も変わるため、この記事ではアンインストールについてのサポートはしません。また、筆者はバージョンの変更などの観点からVoltaの利用を進めていますが、Node.jsがすでにインストールされているのであれば、Next.jsの環境構築はすでに完了していますので、よほど古いNode.jsのバージョンでない限りそのままNext.jsを始めてしまってもいいと思います。

</details>


### Voltaのインストール
#### Unix(MacOSやWSL)の方
ターミナルにて、下に記すコマンドを入力してください。
注意として、ターミナルのshellがzshやfishでもコマンドの`bash`は変えずに入力してください。
```terminal
curl https://get.volta.sh | bash
```
以下のコマンドでバージョンを確認できればインストールは完了です。
```terminal
volta --version
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/9e2fabf5-043b-cd52-8b01-fb620149fe7b.png)

#### Windowsの方
公式が推奨しているのは[winget](https://github.com/microsoft/winget-cli) という、パッケージ管理ソフトを使用することですが、今回は**直接インストール**することにします。[このURL](https://github.com/volta-cli/volta/releases/v2.0.1)からVoltaのダウンロードファイルを取得できるので、ご自身のパソコンにあったアーキテクチャのインストーラーをダウンロードしてください。また、ダウンロードしたインストーラを実行する前にwindowsの**開発者モードを有効にしておく**必要があります。
検索ボックスに「開発者」と入力し、「開発者向け機能を使う」を起動してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/d454eb1a-9b8e-3cac-e244-772db2943f9f.png)

起動したら、開発者モードを有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/4c172967-f046-65e7-5ff3-0aa6e9de01ea.png)

有効化できたら、ダウンロードしたインストーラーを実行し、設定は全てデフォルトのままでインストールしてください。

インストールが完了したらコマンドライツールを起動して`volta --version`と入力します。
次の画像のようにバージョンが表示されれば、インストールは完了です。

![スクリーンショット 2024-09-22 15.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/da153c60-2f8e-32e9-e0a6-43474b218e8e.png)

参考：[Volta公式docs](https://docs.volta.sh/guide/getting-started)

### Node.jsのインストール
Node.jsの長期サポート版をインストールする場合には、以下のコマンドを入力します。
```terminal
volta install node
```
特定のバージョンをインストールしたい場合には、以下のように具体的なバージョンを指定すれば可能です。
```terminal
volta install node@21.7.3
```
Voltaで`install`というコマンドは指定したバージョンをフェッチした上で使用するという意味になります。
今は使用しないが、フェッチだけしておきたい場合には次のように`install`の代わりに`fetch`を使用します。
```terminal
volta fetch node@21.7.3
```

Node.jsのインストールが完了したら、その確認をします。
以下の三つのコマンドを入力し、それぞれバージョンが帰ってくることを確認してください。
```terminal
node --version
```
```terminal
npm --version
```
```terminal
npx --version
```
すべてのコマンドに対して、バージョンが返ってきたのであれば、Node.jsの環境構築は終了です。

## Next.jsのプロジェクト作成
次のコマンドをプロジェクトのディレクトリを作成したい場所で入力していただくと、Next.jsのプロジェクトが作成できます。
```terminal
npx create-next-app [プロジェクト名]
```
例えば、`example`というプロジェクトを作成したい場合は、`npx create-next-app example`と入力します。
ここでは、プロジェクトが実際に作成できるのかという確認以外の意味はないので、その後に聞かれることはどのように答えていただいても結構です。一応参考までにどのように答えるかを載せておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/7cd71b0e-26f0-b5f1-f165-6b240764f2f1.png)

作成が完了したら、ターミナルにて`cd [プロジェクト名]`として作業ディレクトリを変えます。そのまま、ターミナルにて以下のように`npm run dev`と入力し、ブラウザでhttp://localhost:3000/ を開くことができれば、Next.jsの環境構築は完了です。もし、ブラウザの3000番が使用中であれば他のポートが当てられるのでコマンドラインに表示されているリンクにアクセスしてページが表示されればそれでも問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/f0f06522-3b99-330e-0ee5-9f00ea30a6da.png)
ターミナルの様子

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891339/eb35b6f9-8ea3-6c7f-1ab5-28d5fc989562.png)
実際に表示されるブラウザの様子

Next.jsについての詳しい説明は別の記事でしますが、軽く何をしたのかを説明します。まず、Next.jsでWebページを表示するにはサーバーが必要となります。`npm run dev`というコマンドを入力するとNext.jsの開発用サーバーを起動しlocalhostにてWebページを表示できるようになります。
開発サーバーは、`Ctrl + C`で停止させることが可能となっているので、確認ができたらサーバーを停止させましょう。

## 最後に
ここまで記事を読んでくださりありがとうございます。
記事の内容に何か誤りがあった場合にはコメントにてご指摘くださると幸いです。

## 参考文献
https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

https://zenn.dev/aiueda/articles/7dcecaa05d4f24

https://docs.volta.sh/guide/getting-started