deve.K

エンジニアが未来を切り開く。

English

Next.js 入門 プロジェクトをVercelにデプロイ


スポンサーリンク

オリジナルNext.js画像

本日はNext.jsのプロジェクトをデプロイする流れまで解説していきます。

これらは多くの選択肢があります

例えば有名なら『Cloudflare Pages』・『Netlify 』などです

当ブログでは『Vercel』×『Git Hub』を使用してサイトを公開します。

GitHubではコードのホスティング用で使用します。

ビルドやサイトの公開は『Vercel』を活用します。

難しい複雑な操作などはありません。

事前準備

・Next.jsプロジェクト

・Git Hubアカウント

VS Code(Visual Studio Code)

※当ブログではVS Code上のターミナルで操作していきます。

・OS

Macでも構いませんが当ブログではWindowsとなりますのでご了承下さい。

以前に当ブログのNext.js入門で静的・動的ルーティングのプロジェクト作成の記事を紹介致しました。

そちらのプロジェクトをデプロイしていくのですが

本日のデプロイでは静的ルーティングのみ、つまりAPIルートはまた別で記事として紹介致します。

記事はこちらになります。

dev-k.hatenablog.com

※新しく既存のプロジェクトを用意してくださっても問題はありません。

Vercelとは

『Next.js』でSSR対応されたアプリを動かせる事が可能となるサーバーレスプラットフォームです。

『Next.js』で作成したプロジェクトを容易にデプロイができるサービスとなっており

競合相手である『Netlify』同様に、『Vercel』は独自のエッジネットワーク(CDNの一種)を構築しており ビルドとホスティングなどをまとめて変わりにやってくれます。

個人開発などの目的の方々であれば、クレジットなどの登録は必要なく無料で利用が可能となっております。

『Vercel』は現在、非常に人気なプラットフォームとなっており『Netlify』から移行する方々も多くいらっしゃいます。

是非、当ブログの記事でデプロイまでの流れを覚えて帰って下さい。

『Vercel』についての詳しい解説はまた記事に致します。

Git Hubと連携

『Vercel』でサイトを公開するには『GitHub』アカウントが必要となります。

GitHub』以外での連携は可能ですが、『GitHub』が一般的なのでこちらを使用していきます。

まずは貴方の『GitHub』アカウントにサインイン後に新しく『リポジトリ』を1つ作成して下さい。

github画像

リポジトリ名はお好きな任意で構いません。

私は『test-next』などとしておきます

公開状態はテスト用で公開するので、『private』を推奨しますがどちらでも問題ありません。

作成したら、URLのコピーをしておきましょう

https://github.com/ユーザー名/test-next.git

VS Codeのターミナルに移動します

ローカルリポジトリと『GitHub』のリモートリポジトリを紐付け作業します。

git remote add origin https://github.com/ユーザー名/test-next.git

ここで一応、リモートリポジトリに紐付けされてるか確認しときましょう。

git remote -v
origin  https://github.com/ユーザー名/test-next.git (fetch)
origin  https://github.com/ユーザー名/test-next.git (push) 

こちらの結果が返ってくれば成功しています。

リモートリポジトリにプッシュします

git branch -M main
git push -u origin main

プッシュを行った結果が『GitHub』に反映されたかの確認をして下さい。

ローカルリポジトリでコミットした内容の確認ができましたら連携は完了となります。

今後に変更などの際はVSコード上でステージング・コミットをし、リモートリポジトリの変更内容をリポジトリに対してまたプッシュします。

Vercel アカウントの作成

下記サイトにアクセスして下さい。

Develop. Preview. Ship. For the best frontend teams – Vercel

選択肢があるかと思いますが、今回は『Continue with GitHub 』を選択します。

『Authorize Vercer』で先に進みますと自動でページが遷移され下記の画像のように『lmport Git Repository』があるかとおもいます。

vercel画像

『Add GitHub Org or Account』を選択し『Install Vercel』が表示されます。

『All』もしくは『Only』の選択肢がありますがどちらでも構いません、そのまま『Install』を押します。

GitHub』のアクセスパスワードを入力します。

下記画像の『import』をクリックして下さい。

vercel画像

『Configure Project』は基本的にはデフォルトで設定がされています

そのまま『Deploy』をクリックします。

貴方のNext.jsプロジェクトのビルドが始まります 多少時間かかるので待ちましょう。

vercel画像

貴方のアプリケーションはこれでデプロイ完了となります。

デプロイするとAPIルートもデプロイされますが今回ではDEMOを用意しておりません。

是非ご自身でお試し下さい。

vercelデプロイ画像

『Visit』ボタンをクリックするとデプロイ済みのアプリケーションを確認する事ができます。

デプロイdemo画像

まとめと機能

『Vercel 』ではカスタムドメインの使用も可能となります。

そちらは公式ドキュメントを参照下さい。

Custom Domains – Vercel Docs

本日の記事のように『Vercel』はサーバーサイドの知識に精通していなくても誰でも簡単にデプロイができます。 無料の範囲内でも外部APIと連携する事も色々と可能となっておりVercelで環境変数を設定することもできます。

静的生成とアセット(JS、CSS、画像、フォントなど)を使用するページは、非常に高速な『Vercel 』『EdgeNetwork』から自動的に提供されます。

SSR(サーバーサイドレンダリング)とAPIルートを使用するページは、自動的に分離されたサーバーレス機能となり

これによりページのレンダリングAPIリクエストを無限にスケーリングが容易となります。

デプロイ後は新しくブランチを作成し、いくつかの変更をし『GitHub』にプッシュをお勧めします。

そして新しいプルリクエストを作成して下さい プルリクエストを開くと『Vercel』は『GitHub』と連携するとプッシュする度にアプリケーションが自動的にデプロイされます。

本番環境以外ではGoogle検索エンジンに登録されないように『noindex』にしてくれてます。

HTTPSはデフォルトで有効になっており(カスタムドメインを含む)追加の構成は必要ありません、SSL証明書を自動更新致します。

本日は以上となります。

最後まで読んで頂きありがとうございます。

貴方のアプリケーションをスムーズに公開する方法に役に立ってくれていたら幸いでございます。

プライバシーポリシー