DEV Community

Cover image for Nextjs CI/CD on Vercel with Github actions
Joachim Chikezie
Joachim Chikezie

Posted on

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

  1. 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 creating a new repository

proceed to add repository name and click on Create Repository

 \click on Create Repository

  1. 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.
  2. Click on the settings tab on your dashboard Click on the *settings* tab on your dashboard
  3. Click on Token then Create Click on *Token* then *Create*
  4. Add Token name then click create -- copy token
    click create

  5. 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


4. Add Git remote.
Using the unique address of the GitHub repo you created earlier, configure Git locally with the URI.
Enter fullscreen mode Exit fullscreen mode

git remote add origin git@github.com:git-/.git


5. Add workflow file.
In your project root directory add a **workflow file**
wich will be in **.github/workflows/deploy.yml** -- or simply
Enter fullscreen mode Exit fullscreen mode

touch .github/workflows/deploy.yml



6. 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:
Enter fullscreen mode Exit fullscreen mode

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


7. 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.
![Navigate to your Github repository, click on the settings tab.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjqc9liq0nolcu25l4r0.png)
1. click on secrets then 2. click on create new secret
![1. click on secrets then 2. click on create new secret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osuifeefg03liazc6nrs.png)
Add secrets Name and Value
![Add secrets Name and Value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crwq30tg3x4ar3llm00n.png)
#######N.B You can add multiple secrets if you prefer




8. Edit workflow file.
in deploy.yml add.. 
Enter fullscreen mode Exit fullscreen mode

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**
Enter fullscreen mode Exit fullscreen mode
  #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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
proceed to deployement to vercel by add the following code
Enter fullscreen mode Exit fullscreen mode
  # 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 
Enter fullscreen mode Exit fullscreen mode

##Here's an example of a project i wich i deployed on vercel using github actions ๐Ÿ‘‰ [NextUrl](https://nexturl.vercel.app/)


## Link to github repository ๐Ÿ‘‰[Nexturl-github](https://github.com/chuddyjoachim/next-url)


## A star would be appreciated.








Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
aravin profile image
Aravind A

I tried your steps and getting this error

Run amondnet/vercel-action@v20.0.1
/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:6944
        throw new Error(`Input required and not supplied: ${name}`);
        ^

Error: Input required and not supplied: vercel-token
    at Object.getInput (/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:6944:15)
    at Object.104 (/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:1139:26)
    at __webpack_require__ (/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:22:30)
    at startup (/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:37:19)
    at /home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:41:18
    at Object.<anonymous> (/home/runner/work/_actions/amondnet/vercel-action/v20.0.1/dist/index.js:44:10)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devhaitham481 profile image
devHaitham481 • Edited

make sure to add your vercel_token, project_id and org_id in the actions secret of github not dependabot secrets. worked with me :thumbsup

Collapse
 
aravin profile image
Aravind A

Made sure.