Vercel is a cloud platform or Platform-as-a-Service (PaaS) designed to help frontend developers create, preview, and deploy web applications swiftly and efficiently. In this tutorial, we’ll focus on deploying a Next.js application to Vercel using GitHub Actions.
In a previous article, we built a Next.js portfolio blog. Here, you’ll learn how to deploy it on Vercel with GitHub Actions.
Prerequisites
To be able to deploy your project, you should have a GitHub repository of the project (you can still follow along if you already have a Next.js project), and a Vercel account. Here is the GitHub repository that we’ll be working with. You can clone it to follow along.
How to Deploy Your Next App
Create Vercel Token and Add it to Your Secrets in GitHub
In your Vercel account, go to Settings, then go to Tokens.
In the Create Token section, enter a name for your token, select an expiration date and click “create”.
You should see a success message with your token. Next, go to your GitHub repository, and click on the “Settings“ tab.
In the Settings tab, go to Secrets and Variables on the sidebar, then click on Actions.
You’ll see a section for adding secrets. Add a secret named VERCEL_TOKEN, and paste the token there.
The Vercel token is a token used to authenticate the GitHub runner. The Vercel CLI installed on the GitHub runner is going to execute the commands with your account. So, instead of it having to login, it uses the access token to verify that it was actually authorized by you to take the actions.
The Organization ID is used to tell Vercel which organization or team account the project should be created under.
The Project ID then tells Vercel the specific project you want to deploy. Just like the Organization ID, it is a unique identifier.
Install the Vercel CLI and Login
Use the command below to install vercel CLI globally on your computer:
npm install -g vercel
Then log into the CLI with the following command:
vercel login
Use one of the options to login.
I used GitHub. Select one with your arrow keys, and click enter.
Create a Vercel Project from Your Local Directory
Navigate to your project directory if you’re not already in it. If you have already created a project on Vercel through the web interfce, use the vercel link command to link your current directory to the Vercel project. If you don’t already have a Vercel project, just type vercel in the CLI and follow the prompts to setup the project.
With that, Vercel will create a .vercel folder in the project. Open it, and go to the project.json file.
In the file, you should see your project ID and organization ID. Copy them and create secrets in your GitHub repository for each one.
Create your GitHub Workflow File
At the root of your project folder, create the .github/workflow folder. Then create a workflow file called vercel_deploy.yml.
In the file, write this:
<span class="hljs-attr">name:</span> <span class="hljs-string">Vercel</span> <span class="hljs-string">Production</span> <span class="hljs-string">Deployment</span>
<span class="hljs-attr">env:</span>
<span class="hljs-attr">VERCEL_ORG_ID:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.VERCEL_ORG_ID</span> <span class="hljs-string">}}</span>
<span class="hljs-attr">VERCEL_PROJECT_ID:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.VERCEL_PROJECT_ID</span> <span class="hljs-string">}}</span>
<span class="hljs-attr">on:</span>
<span class="hljs-attr">push:</span>
<span class="hljs-attr">branches:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">main</span>
<span class="hljs-attr">paths:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">'01-simple-blog/**'</span>
<span class="hljs-attr">jobs:</span>
<span class="hljs-attr">Deploy-Production:</span>
<span class="hljs-attr">runs-on:</span> <span class="hljs-string">ubuntu-latest</span>
<span class="hljs-attr">defaults:</span>
<span class="hljs-attr">run:</span>
<span class="hljs-attr">working-directory:</span> <span class="hljs-number">01</span><span class="hljs-string">-simple-blog</span>
<span class="hljs-attr">steps:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/checkout@v2</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Install</span> <span class="hljs-string">Vercel</span> <span class="hljs-string">CLI</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">npm</span> <span class="hljs-string">install</span> <span class="hljs-string">--global</span> <span class="hljs-string">vercel@latest</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Pull</span> <span class="hljs-string">Vercel</span> <span class="hljs-string">Environment</span> <span class="hljs-string">Information</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">pull</span> <span class="hljs-string">--yes</span> <span class="hljs-string">--environment=production</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Build</span> <span class="hljs-string">Project</span> <span class="hljs-string">Artifacts</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">build</span> <span class="hljs-string">--prod</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
<span class="hljs-attr">continue-on-error:</span> <span class="hljs-literal">true</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Deploy</span> <span class="hljs-string">Project</span> <span class="hljs-string">Artifacts</span> <span class="hljs-string">to</span> <span class="hljs-string">Vercel</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">deploy</span> <span class="hljs-string">--prebuilt</span> <span class="hljs-string">--prod</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
This is the workflow file for my simple-writer-portfolio project.
First, we have the environment variables:
<span class="hljs-attr">env:</span>
<span class="hljs-attr">VERCEL_ORG_ID:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.VERCEL_ORG_ID</span> <span class="hljs-string">}}</span>
<span class="hljs-attr">VERCEL_PROJECT_ID:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.VERCEL_PROJECT_ID</span> <span class="hljs-string">}}</span>
<span class="hljs-comment"># Other code</span>
Then we have the trigger. This triggers when I push to the main branch, affecting files in the 01-simple-blog subdirectory.
<span class="hljs-comment"># Previous code</span>
<span class="hljs-attr">on:</span>
<span class="hljs-attr">push:</span>
<span class="hljs-attr">branches:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">main</span>
<span class="hljs-attr">paths:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">'01-simple-blog/**'</span>
<span class="hljs-comment"># Other code</span>
Then we have the job definition. Here, I defined a job “Deploy-Production” that runs on Ubuntu. By default, all commands there will run in the 01-simple-blog directory, which is equivalent to running cd 01-simple-blog from the root before running commands on the shell. I did this because the Next.js project is in that directory, where the package.json is located.
<span class="hljs-comment"># Previous code</span>
<span class="hljs-attr">jobs:</span>
<span class="hljs-attr">Deploy-Production:</span>
<span class="hljs-attr">runs-on:</span> <span class="hljs-string">ubuntu-latest</span>
<span class="hljs-attr">defaults:</span>
<span class="hljs-attr">run:</span>
<span class="hljs-attr">working-directory:</span> <span class="hljs-number">01</span><span class="hljs-string">-simple-blog</span>
<span class="hljs-comment"># Other code</span>
Then the steps involved:
<span class="hljs-comment"># Previous code</span>
<span class="hljs-attr">steps:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/checkout@v2</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Install</span> <span class="hljs-string">Vercel</span> <span class="hljs-string">CLI</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">npm</span> <span class="hljs-string">install</span> <span class="hljs-string">--global</span> <span class="hljs-string">vercel@latest</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Pull</span> <span class="hljs-string">Vercel</span> <span class="hljs-string">Environment</span> <span class="hljs-string">Information</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">pull</span> <span class="hljs-string">--yes</span> <span class="hljs-string">--environment=production</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Build</span> <span class="hljs-string">Project</span> <span class="hljs-string">Artifacts</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">build</span> <span class="hljs-string">--prod</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
<span class="hljs-attr">continue-on-error:</span> <span class="hljs-literal">true</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Deploy</span> <span class="hljs-string">Project</span> <span class="hljs-string">Artifacts</span> <span class="hljs-string">to</span> <span class="hljs-string">Vercel</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">vercel</span> <span class="hljs-string">deploy</span> <span class="hljs-string">--prebuilt</span> <span class="hljs-string">--prod</span> <span class="hljs-string">--token=${{</span> <span class="hljs-string">secrets.VERCEL_TOKEN</span> <span class="hljs-string">}}</span>
With these steps, Vercel is first installed on the GitHub runner. Then the vercel environment information is pulled. The project is built with vercel build, and the pre-built artifacts are then pushed to Vercel.
Push to GitHub and watch your code deploy
Stage your changes, if any:
git add .
Commit the changes:
git commit -m <span class="hljs-string">"Added GitHub Actions workflow"</span>
And push:
git push origin
Now, go to your repository online, and check the deployment.
Conclusion
With your basic GitHub workflow in place, you can now make changes to your code, push to GitHub, and have it deploy automatically. Though Vercel allows you to connect your repository directly, this method provides you with more flexibility and customizability. If you enjoyed this article, share it with others. You can also reach me on LinkedIn or X.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ
