初心者でもできるNext.jsのVercelへのデプロイ方法(GitHub経由)

初心者でもできるNext.jsのVercelへのデプロイ方法(GitHub経由)

これまでの開発経験がほとんど皆無という人向けにNext.jsのプロジェクトファイルのGitHubへのアップロード方法からVercelへデプロイ方法までの一連の流れを解説しています。

VercelはReactベースのフレームワークNext.jsを開発したVercelが運営をしているクラウドベースのホスティングサービスでNext.jsとの親和性が非常に高くGitHubにNext.jsのプロジェクトをアップロードできれば簡単にVercelにデプロイでき、短時間でサービスを公開することができます。個人向けには無料のHOBBYというプランが準備されており利用するためにクレジット情報も個人情報を入力する必要もなくGitHubのアカウントを持っていればすぐにサインアップすることができます。

GitHubのアカウントを持っていない人は下記を参考にアカウントの取得を行なってください。

GitHubのリポジトリの作成
GitHubにログインを行い、新規のリポジトリの作成を行うため”New”ボタンをクリックします。

GitHubリポジトリの作成
GitHubリポジトリの作成
リポジトリの名前の設定を行います。任意の名前をつけてください。ここではfirst-next-vercelとしています。Create repositoryボタンをクリックするとリポジトリの作成は完了です。

リポジトリの名前の設定
リポジトリの名前の設定
リポジトリの作成が完了するとローカルのPCからGitHubのリポジトリにアップロードする手順が表示されます。

リポジトリへのアップロード手順
リポジトリへのアップロード手順
Next.jsプロジェクトの作成
GitHubでのリポジトリの作成が完了したのでローカルのPCでNext.jsのプロジェクトの作成を行います。npx create-next-appコマンドを実行します。実行するためにNode.jsが必要となるのでコマンドが実行できない場合はNode.jsのインストールを行なってください。

Next.jsの入門者向けに下記の文書も公開しています。

あわせて読みたい

入門者は基礎からしっかり理解Next.jsの基本(React)
npx create-next-appを実行するとプロジェクト名を聞かれるので任意の名前を設定してください。ここではfirst-next-vercelと設定しています。

% npx create-next-app
Need to install the following packages:
create-next-app
Ok to proceed? (y) y
✔ What is your project named? … first-next-vercel
インストールが完了したら作成したプロジェクトフォルダに移動します。

% cd first-next-vercel
プロジェクトフォルダ直下にあるindex.jsファイルを更新します。

export default function Home() {
return <h1>Next.jsのVercelへのデプロイ完了！</h1>;
}
保存したらブラウザ上に記述した内容が表示されるか確認しておきます。npm run devコマンドを実行してください。

% npm run dev

first-next-vercel@0.1.0 dev
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully
ブラウでhttp://localhost:3000にアクセスすると下記の画面が表示されます。この画面をVercelのサービス上に表示できるように進めていきます。

index.jsファイルの内容を確認
index.jsファイルの内容を確認
GitHubへのアップロード
プロジェクトの作成が完了したら、最初に作成したGitHubリポジトリにアップロードを行います。

git initコマンドでローカルにリポジトリの作成を行います。

% git init
Reinitialized existing Git repository in /Users/mac/Desktop/first-next-vercel/.git/
ローカルリポジトリにすべてのファイルを加えるためgit addコマンドを実行します。

% git add .
git commitコマンドを実行してgit addで追加したファイルをcommitします。

% git commit -m "first commit"
[main 6c3e4c1] first commit
1 file changed, 3 insertions(+), 69 deletions(-)
rewrite pages/index.js (98%)
リモートのリポジトリの設定を行います。reffect2020/first-next-vercel.gitは各環境に合わせて変更を行ってください。GitHubでリポジトリを作成した際に表示されているURLを利用します。

% git remote add origin https://github.com/reffect2020/first-next-vercel.git
最後にgit pushコマンドでGitHubのリポジトリにプッシュ(アップロード)します。

% git push -u origin main
pushが完了するとGitHubのリポジトリにファイルが追加されていることが確認できます。

GitHubのリポジトリでファイルを確認
GitHubのリポジトリでファイルを確認
Vercelのサインアップ
Vercel(https://vercel.com/)にアクセスします。Vercelのトップページが表示されたら右上の”Sign up”ボタンをクリックしてください。

Vercelのトップページ
Vercelのトップページ
GitHubのアカウントを利用してサインアップを行うことができます。

サインアップページ
サインアップページ
ブラウザ上でGitHubへのログインが完了しているのでVercelからGitHubへのアクセス許可を行うため、”Authorize Vercel”をクリックしてください。

パーミッションの設定
パーミッションの設定
もしGitHubへのログインが完了していない場合は下記の画面が表示されるのでGitHubのアカウント情報を入力してください。

GitHubへのサインイン
GitHubへのサインイン
Vercelへのサインアップが完了したら下記の画面が表示されます。

Vercelへのサインアップ完了
Vercelへのサインアップ完了
Vercelにインポートするリポジトリの選択を行うためImport Git Repositoryの下にある虫眼鏡をクリックしてください。クリックしたらAdd GitHub Org or Accountを選択してください。

インポートするリポジトリの選択を行います。ここではGitHubでNext.jsのために作成したfirst-next-vercelのみ選択しています。選択したら”Install”ボタンをクリックしてください。

インポートするリポジトリの選択
インポートするリポジトリの選択
インストールが完了したら下記のように選択したリポジトリが表示されます。Importボタンをクリックしてください。

選択したリポジトリが表示される
選択したリポジトリが表示される
Vercel Scopeの選択画面が表示されますが個人利用なのでPERSONAL ACCOUNTを選択します。

select vercel scope
select vercel scope
Import Projectの画面が表示されるので”Deploy”ボタンをクリックしてください。

デプロイが完了すると以下の画面が表示されます。”Visit”ボタンをクリックしてください。

ローカルで確認したページと同じ内容が表示されればデプロイは成功しています。

デプロイが完了したのでNext.jsを使ってサービスの構築を開始してください。