[初心者向け]はじめてのNext.js - Next.jsプロジェクトの作成からVercelにデプロイするまで

こんにちは。Kaneyasuです。
Next.jsとVercelを始めました。
タイトルの通り、まずは、Next.jsプロジェクトを作成して、Vercelにデプロイするまでの手順をやってみます。
手順を自分のような初心者の方向けに書き残しておくのでよろしければご覧ください。

# Next.jsとVercelとは

Next.jsはReactベースのフレームワークで、VercelはNext.jsの開発元が運営するホスティングサービスです。
開発元が同じなので、組み合わせに安心感があります。

https://nextjs.org/

https://vercel.com/

早速やってみます。

# Next.jsプロジェクトの作成

プロジェクトの作成作業はAmazon Linux 2023上で行いました。

```bash
npx create-next-app@13.5.6 nextjs-vercel
```

実務で使うNext.jsが13.5.6の予定なので、それに合わせて、`create-next-app`のバージョンを指定しています。
以下、検証でプロジェクトを作成した時の履歴です。

```bash
[ec2-user@ip-xxx-xxx-xxx-xxx next-vercel]$ npx create-next-app@13.5.6 nextjs-vercel
Need to install the following packages:
  create-next-app@13.5.6
Ok to proceed? (y) 
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/ec2-user/next-vercel/nextjs-vercel.
```

作成したNext.jsプロジェクトで、GitHubにリポジトリを作成します。
割愛します。

# Vercelへのデプロイ

## Vercelへのサインアップ

Vercelへサインアップ。  
今回はHobby（個人用途）でアカウントを作成しました。

## Vercelでプロジェクトを作成

ログイン後の画面で、`Overview`タブを開きます。
`OverView`は、左上のユーザー名をクリックすると表示されます。

![ユーザー名のリンク](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/7dc0b332-6fd1-7a95-8f1f-0b74487cb0da.png)

![プロジェクトの作成リンク](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/f4957194-b1a3-6bbf-7ecf-a98e18baedf7.png)

`Add New`のリンクをクリックすると、`Project`の選択肢が表れるのでクリック。

プロジェクトの作成画面が表れるので、Next.jsプロジェクトのリポジトリの`Import`ボタンをクリックします。
この時にGitHubの認証が求められるので認証します。
GitHubの認証手順も割愛させていただきます。
基本、ウィザードに従えば問題ありません。

![プロジェクトの作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/9e10cad1-c692-ada6-fa55-c2df1e2a6528.png)

プロジェクトの設定画面が表示されます。
Framwork PresetはNext.jsを選択しておきます。
ビルドコマンドなどは取り急ぎデフォルトのままで、`Deploy`ボタンをクリックします。

![プロジェクトのデプロイの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/3b56154c-65a7-edff-0cd5-2502264e840e.png)

ビルドが始まり、成功すると次の画面が表示されます。
画面中央の画像をクリックすると、デプロイされたサイトにアクセスできます。

![ビルドの成功](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/a9c18c41-c923-32a0-8bc1-553242c3b1cd.png)

# Vercelプロジェクトがどのブランチを追跡しているかの確認

プロジェクトを作成すると、`Overview`にプロジェクトが表示されます。
プロジェクトの3点リーダーから、`Settings`をクリックすると、プロジェクトの設定画面が表示されます。
（または、プロジェクトのカードをクリックしてから、`Settings`タブをクリックしてもOKです。）

![Overviewからプロジェクトの設定リンクをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/a7fc7464-f49c-160e-8b5b-2a2638cbe279.png)

設定画面の、`Git` > `Production Branch`で追跡しているブランチが確認できます。
デフォルトは`main`ブランチになっています。

![追跡するブランチの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/142bc432-8ae6-01f1-e9d0-1a10cc0a921b.png)

この状態で`main`ブランチに変更を加えてプッシュすると、自動的にデプロイされることが確認できました。

# パッケージのインストールやビルドコマンドの設定はいらないのか？

Vercelは`package.json`を見て、パッケージのインストールやビルドを自動で行うようです。

https://vercel.com/docs/deployments/configure-a-build

>Vercel automatically configures the Build Command based on the framework. Depending on the framework, the Build Command can refer to the project’s package.json file.

>Vercel auto-detects the install command during the build step. It installs dependencies from package.json, including devDependencies (which can be excluded). The install path is set by the root directory.

これらを翻訳するとこうなります。

```
Vercelは、フレームワークに基づいてビルドコマンドを自動的に設定します。
フレームワークによっては、Build Commandはプロジェクトのpackage.jsonファイルを参照します。

Vercelはビルドステップ中にinstallコマンドを自動検出します。
package.jsonからdevDependencies（除外可能）を含む依存関係をインストールします。
インストールパスはルートディレクトリによって設定されます。
```

# IPアドレス制限やパスワード認証ができるか？

Vercelのプロジェクトの設定画面にある`Deployment Protection`で、IPアドレス制限やパスワード認証の設定がありますが、これはプランをあげないと使えないようです。

![Deployment Protection](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1959433/8a296927-d064-1f86-df7c-09c473fecf09.png)

https://vercel.com/pricing

# 次は

本記事はここまでです。
次はページの追加とルーティングの追加をやってみます。

https://qiita.com/satoshi256kbyte/items/d95d23c8fb0516e20e04