Close Menu
    DevStackTipsDevStackTips
    • Home
    • News & Updates
      1. Tech & Work
      2. View All

      From Data To Decisions: UX Strategies For Real-Time Dashboards

      September 13, 2025

      Honeycomb launches AI observability suite for developers

      September 13, 2025

      Low-Code vs No-Code Platforms for Node.js: What CTOs Must Know Before Investing

      September 12, 2025

      ServiceNow unveils Zurich AI platform

      September 12, 2025

      Building personal apps with open source and AI

      September 12, 2025

      What Can We Actually Do With corner-shape?

      September 12, 2025

      Craft, Clarity, and Care: The Story and Work of Mengchu Yao

      September 12, 2025

      Distribution Release: Q4OS 6.1

      September 12, 2025
    • Development
      1. Algorithms & Data Structures
      2. Artificial Intelligence
      3. Back-End Development
      4. Databases
      5. Front-End Development
      6. Libraries & Frameworks
      7. Machine Learning
      8. Security
      9. Software Engineering
      10. Tools & IDEs
      11. Web Design
      12. Web Development
      13. Web Security
      14. Programming Languages
        • PHP
        • JavaScript
      Featured

      Optimizely Mission Control – Part III

      September 14, 2025
      Recent

      Optimizely Mission Control – Part III

      September 14, 2025

      Learning from PHP Log to File Example

      September 13, 2025

      Online EMI Calculator using PHP – Calculate Loan EMI, Interest, and Amortization Schedule

      September 13, 2025
    • Operating Systems
      1. Windows
      2. Linux
      3. macOS
      Featured

      sudo vs sudo-rs: What You Need to Know About the Rust Takeover of Classic Sudo Command

      September 14, 2025
      Recent

      sudo vs sudo-rs: What You Need to Know About the Rust Takeover of Classic Sudo Command

      September 14, 2025

      Dmitry — The Deep Magic

      September 13, 2025

      Right way to record and share our Terminal sessions

      September 13, 2025
    • Learning Resources
      • Books
      • Cheatsheets
      • Tutorials & Guides
    Home»Development»How To Deploy To Vercel With GitHub Actions

    How To Deploy To Vercel With GitHub Actions

    June 10, 2025

    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.

    Vercel account settings tokens.

    In the Create Token section, enter a name for your token, select an expiration date and click “create”.

    Creating a vercel token

    You should see a success message with your token. Next, go to your GitHub repository, and click on the “Settings“ tab.

    Vercel, token created success message.

    In the Settings tab, go to Secrets and Variables on the sidebar, then click on Actions.

    Actions secrets in GitHub repository settings.

    You’ll see a section for adding secrets. Add a secret named VERCEL_TOKEN, and paste the token there.

    vercel token, project id, org id.

    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.

    login methods

    I used GitHub. Select one with your arrow keys, and click enter.

    login success

    vercel login

    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.

    Create new Vercel project

    With that, Vercel will create a .vercel folder in the project. Open it, and go to the project.json file.

    Project.json

    In the file, you should see your project ID and organization ID. Copy them and create secrets in your GitHub repository for each one.

    vercel token, org ID, project ID.

    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.

    f3c3a4ca-5d19-4866-a69d-9f4d3a760d8f

    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.

    3fa5a9a8-c14b-4f55-9e04-c51310500c3f

    Workflow run logs

    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 

    Facebook Twitter Reddit Email Copy Link
    Previous ArticleCVE-2025-5958 – Google Chrome Media Use After Free Heap Corruption
    Next Article CVE-2024-9062 – Apple Archify Local Privilege Escalation Vulnerability

    Related Posts

    Repurposing Protein Folding Models for Generation with Latent Diffusion
    Artificial Intelligence

    Repurposing Protein Folding Models for Generation with Latent Diffusion

    September 14, 2025
    Artificial Intelligence

    Scaling Up Reinforcement Learning for Traffic Smoothing: A 100-AV Highway Deployment

    September 14, 2025
    Leave A Reply Cancel Reply

    For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

    Continue Reading

    CVE-2025-45343 – Tenda W18E Remote Code Execution Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    NVIDIA NeMo Framework Vulnerability Let Attackers Execute Remote Code

    Security

    CVE-2025-5168 – Assimp Out-of-Bounds Read Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    CVE-2025-20260 – ClamAV PDF Buffer Overflow Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    Highlights

    Machine Learning

    Qwen3 family of reasoning models now available in Amazon Bedrock Marketplace and Amazon SageMaker JumpStart

    July 7, 2025

    Today, we are excited to announce that Qwen3, the latest generation of large language models…

    ChatGPT Is Making People Think They’re Gods and Their Families Are Terrified

    May 9, 2025

    CVE-2025-27022 – Infinera G42 WebGUI HTTP Endpoint Path Traversal Vulnerability

    July 2, 2025

    5 Open Source Apps You Can use for Seamless File Transfer Between Linux and Android

    July 26, 2025
    © DevStackTips 2025. All rights reserved.
    • Contact
    • Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.