Setting up CI/CD on a NextJs Application To Netlify Using GitHub Actions

Github actions is an easy and user friendly Continuous integration and continuous delivery tool to make use of. 

The requirements for the setup are the NextJs application to be deployed, a netlify account and a github account.

The purpose of integrating github actions with netlify is to run tests on the application before it is deployed on netlify.

Creating a Project on Netlify

There are two ways to go about this, we can either make use of Netlify ClI or Netlify UI

We are going to be making use of the UI

1. On the netlify home page, select create a new site
2. Select a repository of your choice, we are making use of Github
3. Select your NextJs a application from the repo
4. The last screen asks for details about where to create the site and how to build it.

• Select the branch to deploy, i will be making use of the dev branch
• Set the build command to npm run build
• We can leave the publish directory to be empty
• Select “Deploy Site”

In order to be give github actions access to the netlify account, we will require some credentials, NETLIFY_SITE_ID, NETLIFY_AUTH_TOKEN.

To get the NETLIFY_SITE_ID, select the Site settings page and copy the API ID. Also to get the NETLIFY_AUTH_TOKEN, select profile page, click on Security then Applications, create a Personal access token.

The credentials that have been created can be saved in the Settings tab on your github repo under Secrets with any name of your choice. 

Creating Our Workflow File

The workflow is triggered when there is a push to the dev branch.

The job is named deploy. The job runs on an ubuntu server.

The first action is actions/checkout@v2. This action checks out the repository so that the workflow can access it.  For our job we make use of node version 14

The next stage is to install the dependencies and build our application. After the application has been successfully built, the tests are run.

The final stage is to deploy our application to netlify using a netlify hook.

The netlify hook will be used to send a post request and this can be gotten by going to site settings, select  build and deploy then select add build hooks.