Nextjs CI/CD on Vercel with Github actions

In this post we'll learn how to set up CI/CD with Nextjs on vercel

Prerequisite

Github Account

Vercel Account

Getting Started

Create a new github repository if you don't have a Github Account 👈click here. If so then proceed to creating a new repository

proceed to add repository name and click on Create Repository

Create and add your Vercel Token/Secret to Github Secrets if you don't have a VercelAccount 👈click here. If so then proceed to creating a vercelToken.

Click on the settings tab on your dashboard Click on the *settings* tab on your dashboard

Click on Token then Create Click on *Token* then *Create*

Add Token name then click create -- copy token

Create new Nextjs app.
Create a new Next.js app using npx and change into the new directory:

npx create-next-app nextjs-vercel-ci-cd
cd nextjs-vercel-ci-cd

Add Git remote. Using the unique address of the GitHub repo you created earlier, configure Git locally with the URI.

git remote add origin [email protected]:git-<username>/<project-name>.git

Add workflow file. In your project root directory add a workflow file wich will be in .github/workflows/deploy.yml -- or simply

touch .github/workflows/deploy.yml

Install Vercel cli globally on your machine npm i -g vercel Before you proceed, you need to know your project ID and org ID from Vercel. The simplest way to get this is to link your project to Vercel. You can do this by using npx vercel link.

When you ran the command, it will create a .vercel folder in your project with a project.json file. In that file, you will find the projectId and orgId, which you can use later in your GitHub Actions workflow.
You can save both values in the secrets input setting in your repository as inputs

Something else you need to configure is to disable GitHub for your project on Vercel. That way, you let Vercel know that you want to take over control, and it will not trigger when you push your code to GitHub.

To disable GitHub, you create a vercel.json file in the root of your project (if it does not yet exist), and add the following contents to it:

{
  "version": 2,
  "github": {
    "enabled": false
  }
}

Add values to your repo's Github Secret You'll have to add the following token to your github secrets Vercel_Token projectId orgId and any other env token or secrets

To do so.

Navigate to your Github repository, click on the settings tab.

click on secrets then 2. click on create new secret

Add secrets Name and Value

#N.B You can add multiple secrets if you prefer

Edit workflow file.
in deploy.yml add..

name: deploy nexturl to vercel
on: [push, pull_request]
jobs:
  vercel: 
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

If you're adding Enviroment variable e.g .env.local add the code bellow 👇.
The example bellow includes a Mongodb connections string and database name of which you must have added to your Github secrets

#add env file to .env.local
      - name: Set Env Vars on Vercel Project
        uses: dkershner6/vercel-set-env-action@v1
        with:
          token: ${{ secrets.VERCEL_TOKEN }}
          teamId: ${{ secrets.VERCEL_TEAM_ID }} # optional, without will use personal
          projectName: nexturl # project name in Vercel
          envVariableKeys: MONGODB_URL,MONGODB_DB
        env:
          MONGODB_URL: ${{ secrets.MONGODB_URL }}
          TARGET_MONGODB_URL: preview,development,production 
# comma delimited, one of [production, preview, development]
          TYPE_MONGODB_URL: encrypted # one of [plain, encrypted]
          MONGODB_DB: ${{ secrets.MONGODB_DB }}
          TARGET_MONGODB_DB: preview,development,production
          TYPE_MONGODB_DB: encrypted

proceed to deployement to vercel by add the following code

# deploy app to vercel
      - name: deploy site to vercel      
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional 
          vercel-args: '--prod' #Optional
          vercel-org-id: ${{ secrets.ORG_ID}}  #Required
          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required

Here's an example of a project i wich i deployed on vercel using github actions 👉 NextUrl

Link to github repository 👉Nexturl-github

A star would be appreciated.

Categories:

React Github

Tags:

Nextjs React Github Vercel

Nextjs CI/CD on Vercel with Github actions

#N.B You can add multiple secrets if you prefer

Categories:

Tags:

Related Posts