Next.js CI / CD on AWS with GitHub Actions

In this post you'll learn how to set up CI / CD with Next.js on AWS using GitHub Actions and the Serverless Framework.

Click here to see the video walkthrough.

Click here to see the completed example project.

Getting started

1. Create a GitHub Repo

To get started, create a new GitHub repository.

2. Set AWS Secrets

For the GitHub Action to work, it will need to be able to read the aws-access-key-id and aws-secret-access-key for the IAM user you will be using to deploy your app. To set this up, click on Settings then Secrets.

Here, create two variables, one named AWS_KEY and one named AWS_SECRET.

The IAM user should have either AdministratorAccess privileges or permissions configured as listed here. For a video walkthrough of how to create an IAM role, click here.

3. Create a new Next.js app

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

npx create-next-app my-next-app
cd my-next-app

4. Add Git remote

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

git remote add origin git@github.com:git-username/project-name.git

5. Create a serverless configuration file

We will be deploying the Next.js app to AWS using the Serverless Next.js Component.

To enable this, create a new file named serverless.yml in the root of the project and add the following code:

nextApp:
  component: "@sls-next/serverless-component@1.18.0"

5. Creating the GitHub action

Next, create a new folder in your Next.js project named .github, and a folder within the new folder named workflows.

Within the workflows folder, create a new file named main.yml and add the following code:

.github/workflows/main.yml

6. Deploy the app to AWS

Now we'll deploy the app. Once the app has been deployed, we'll trigger new deployments using GitHub actions.

npx serverless

When the deployment is complete, the CLI should print out the app URL along with other information about the deployment:

7. Push the code to GitHub

Next, we'll commit our code and push to GitHub. When this code is deployed, we should see the GitHub action processing:

git add .
git commit -m 'initial commit'
git push origin main

Within your GitHub repo, click on Actions to view the deployment happening.

Video Walkthrough

Conclusion

Your CI / CD pipeline should now be set up successfully! When you push new code, you should see a build happening as well.

If you set up a pull request to the main branch, a new build should also be kicked off.