Next.jsで作ったチケット購入練習サイトを、実際にVercelを使ってデプロイしてみました。
思っていたよりも簡単に公開できたので、手順をまとめてみます。
- Vercelを使ったNext.jsアプリのデプロイ方法
- GitHubとVercelを連携する手順
- 初心者でもできるシンプルなデプロイの流れ
なぜVercelを使うか
Next.jsで作ったアプリは、Vercelととても相性が良く、GitHubと連携するだけで簡単にデプロイすることができます。設定もシンプルなので、初心者でも比較的簡単に公開することができます。
デプロイに必要なもの
デプロイする前に、以下の準備が必要です。
- GitHubアカウント
- Vercelアカウント
- GitHubにプロジェクトをpushしておく
VercelはGitHubアカウントで登録すると、そのままリポジトリと連携できるのでおすすめです。
セキュリティや管理のしやすさを考え、リポジトリのアクセス設定は「Selected repositories（選択したリポジトリのみ）」に設定しておくのがおすすめです。
デプロイ手順
準備が完了したら、以下の手順で進めていきます。
GitHub のリポジトリ公開設定
もし Vercel の設定で「Selected repositories」を選択している場合、新しく作成したリポジトリを Vercel が認識できるように GitHub 側で許可 を出す必要があります。ここを忘れると Vercel 上にリポジトリが表示されないので注意しましょう！
1. GithubのConfigure設定
GitHub の「Settings」→「Integrations」→「Applications」から Vercel の横にある [Configure] ボタンをクリックします。
2. リポジトリの追加
「Repository access」の「Only select repositories」から、今回デプロイしたいリポジトリを選択して保存します。
選択したリポジトリが追加されていることを確認し、「Save」をクリックして完了です。
プロジェクト作成 ＆ デプロイ
GitHub 側でリポジトリを公開（連携）したら、Vercel のダッシュボードに戻りプロジェクトを作成します。
1. NewProject生成
Vercelのダッシュボーとから「Project」→「AddNew」→「Project」を選択します。
2. リポジトリをImport
デプロイしたいリポジトリを選択し、[Import] ボタンを押します。
3. Frameworkの確認
Next.js の場合は自動で検出されます。
4. Deploy
そのまま [Deploy] をクリックすれば完了です！
Deployingが終わったら、完了！
DB や環境変数（Secret Key）設定が必要ないシンプルなプロジェクトなら, これだけであっという間に公開されます。
Ticket -practice公開
練習用のサイトなので、Vercelの無料ドメインを使って公開しました。
Next.jsを使ってプロジェクトを進めている方は、ぜひVercelでのデプロイも試してみてください。設定がとても簡単なので、初心者でも気軽に公開できると思います。
