<p>Next.jsプロジェクトの立ち上げからVercelへCLIを使ってデプロイするまでの一連の流れをまとめた備忘録です。</p><p>&lt;前提&gt;<br>GitHubとVercelのアカウントは作成済み。<br>GitHub CLIはインストール済み。<br>Next.jsの編集は省略します。</p><h2 id="he5d8b8b3a8">まずはGitHubにリポジトリの準備</h2><p>GitHubにリポジトリを作ります。（GitHub CLIを使っています）</p><pre><code>gh repo create sample --private</code></pre><p>sample ＝ プロジェクト名<br>--private ＝ 非公開リポジトリ</p><p>作成したリポジトリをローカルにクローンします。</p><pre><code>gh repo clone sample .</code></pre><p>末尾の「.（ドット）」なしの場合、プロジェクト名のフォルダが作成されます。<br>今回は作成せずに実行中のフォルダにクローンしたかったので「.」を付けました。</p><h2 id="h823ddb9f7b">Next.jsプロジェクトの作成</h2><p>Next.jsのプロジェクトも現在のディレクトリに作成するため末尾に「.」を付けています。</p><pre><code>npx create-next-app@latest .</code></pre><p>今回は、デプロイまでの一連の流れだけなのでNext.jsの編集はせずにコミット・プッシュしました。</p><p>リポジトリが紐づいたか確認してみます。</p><pre><code>gh browse</code></pre><p>GitHubのリポジトリページが開き、データが反映されていることが確認できました。</p><p>リポジトリの準備が完了しました。</p>

<h2 id="h05ce6334cb">Vercel CLIの導入からデプロイ</h2><p>Vercel CLIをインストールします。（すでにインストール済みの場合は不要です）</p><pre><code>npm i -g vercel</code></pre><h3 id="h89873119d1">Vercelにログインしてみる</h3><p>ブラウザが起動してVercelへのログインが成功するとSuccess!と表示されます。</p><pre><code>vercel login

● Continue with GitHub 
○ Continue with GitLab 
○ Continue with Bitbucket 
○ Continue with Email 
○ Continue with SAML Single Sign-On 

&gt; Success!　～</code></pre><h3 id="h2663a1aa0a">ローカルで実行してみる</h3><p>初回、いくつかVercelの設定を聞かれます。<br>設定が終わるとVercelにプロジェクトが作成されます。</p><pre><code>vercel dev</code></pre><p>作成されたプロジェクトを確認する場合、以下を実行すると一覧が表示されます。</p><pre><code>vercel project list</code></pre><p>ローカルのプロジェクトとVercelのプロジェクトを紐づけます。</p><pre><code>vercel link

? Set up “~\sample”? [Y/n] y
? Which scope should contain your project? xxxxx projects
? Found project “xxxxx-projects/sample”. Link to it? [Y/n] y
✅  Linked to xxxxx-projects/sample(created .vercel)</code></pre><h3 id="h5f215d7c3a">いよいよデプロイ</h3><p>シンプルすぎて少々心配になりますが、以下でデプロイが実行されます。<br>何も編集してないデフォルトのままのNext.jsなのであっと言う間にデプロイが完了しました。</p><pre><code>vercel

🔍  Inspect: https://vercel.com/xxxxx-projects/sample/ass7s6dasd4fsa6dfasdf5s [1s]
✅  Preview: https://sample-ws7ae6afs-xxxxx-projects.vercel.app [1s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/xxxxx-projects/sample/settings</code></pre><h3 id="h168cbc61b4">番外編：環境変数をVercelCLIで簡単設定</h3><p>環境変数名「BASE_URL」、値「https://xxx.com」を本番・プレビュー・開発環境に設定する。</p><pre><code>vercel env add

? What’s the name of the variable? BASE_URL
? What’s the value of BASE_URL? https://xxx.com
? Add BASE_URL to which Environments (select multiple)? (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
› ▪︎ Production
  ▪︎ Preview
  ▪︎ Development</code></pre><p>設定した環境変数を確認する。<br>値は暗号化されるので表示されません。ダッシュボードから確認できます。</p><pre><code>vercel env list

 name        value               environments                        created        
 BASE_URL    Encrypted           Production, Preview, Development    12s ago </code></pre><p></p>