Next.jsアプリをVercelにデプロイする

Next.js のデプロイ

Next.js を開発したのが Vercel とのことで、デプロイがめちゃくちゃ簡単にできるとのことで試してみた。

準備

ビルド

ビルドしてちゃんと動くか確認しよう

 // ビルド .nextフォルダが作成される
 $ npm run build
 // 起動
 $ npm run start

Github

1. リポジトリを作る

2. 「…or create a new repository on the command line」の部分をターミナルにコピーして貼り付け

[git push -u origin main] のところで止まるので、エンターを押して実行。push することになる。
そうすると read.me が自動で作成されるが、特にすることはない。

3. 全てのファイルをステージングする。(.gitignore ファイル内に記載されているものを除く)

 $ git add .

4. コメントを書いてコミットする

 $ git commit -m "コメント

5. push する

 $ git push

Vercel

デプロイ

1. vercel にアクセス
   https://vercel.com/

2. 「Continue with Github」ボタンを押下

3. 該当プロジェクトの「Import」ボタンを押下

4. 必要とあらば環境変数を設定
   ※今後追記

5. 「Deploy」ボタンを押下

完成！めちゃくちゃ簡単。これでもう公開されている。

DPS

ブランチを切って開発

1. クローン
   

git clone https://github.com/sakuraba-coder/nextjs-blog-1.git

2. [code .] でこの環境で VScode を実行

3. [npm install]
   npm modules がインストールされていない状況なので、インストールをしておく

4. [npm run dev]でクローン出来ているか確認

5. [git checkout]で現在のブランチを確認

6. [git branch dev] (dev は任意) でブランチを切る

7. [git checkout dev]でブランチを変更。dev のブランチで開発できる

変更

1. ソースコードを変更

2. [git add .]で変更をステージ

3. [git commit -m "コメント"]でコミット

4. [git push origin dev] (dev は今開発しているブランチ名)でプッシュする

マージ

1. github に移動

2. 黄色い枠があるので、「Compare & pull request」を押下
   ※画像

3. コメントを書いて[Create pull request]を押下

4. vercel bot が出現 → プレビューを確認

5. [Merge pull request]を押下

6. コメントを書いて[Confirm merge]を押下

7. pull request の画面が更新されている
   

vercel

確認してみると、すでに変わっている

まとめ

すごく簡単に Next.js のデプロイができた
AWS でサーバー作ってデプロイしたときもその簡単さに驚愕したけれど、比べ物にならない。

今後の課題としては、firebase や何かを使ってデータベースの情報を読み込めるようにしていきたい