Nader Dabit

Posted on Dec 16, 2020 • Edited on Dec 17, 2020

Next.js CI / CD on AWS with GitHub Actions

#nextjs #serverless #javascript #webdev

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.

Top comments (8)

Kyle Galbraith • Dec 17 '20

Nice, I hadn't seen this plugin before. Definitely makes getting SSR up to Lambda@Edge a lot easier.

Just a heads up you have a link that doesn't go anywhere, Serverless Next.js Component, I think you might have meant to links this serverless.com/blog/serverless-nextjs.

Nader Dabit • Dec 17 '20

Hey, thank you for the heads up, just fixed the link!

Mátyás Angyal • Jan 22 '21

Hi, great article! A quick note, when you are using a simple serverless.yml without bucketName explicitly configured, the workflow will create a new origin for the brand new bucket on the CloudFront distro all the time when you push changes and reach the origin limit after several deploys. I made it working by setting the bucketName, though this results in an error saying "The bucket you want to delete is not empty...". This can be simply fixed by using serverless-s3-remover plugin. Now it works like charm!

Nader Dabit • Jan 22 '21

Thanks for sharing Matyas, I need to look more into this and will consider updating the tutorial.

Ethan Spurlock • Mar 30 '21

@dabit3 I saw that other people were having trouble with the logistics of maintaining a staging and production branch without launching a brand new cloudfront distribution or bucket each time. I just wanted to post this link to save those who find this article some time : github.com/bhall2001/serverless-ne...

This may not be the best way but it definitely works and is a stable strategy until AWS or serverless come up with a more canonical way to manage this.

Thanks for your great articles Nader!

kumar0 • Dec 24 '20

Thanks Nader for this. A quick question.. with serverless deployment , the revalidate is not working in the getStaticProps. Any data change is not refelecting. however when I host on EC2 or vercel it does. Any idea how to make that work or else I have to deploy each time for any data changes too.. Thanks again.. I am learning a lot from you.