Deploy Next JS app on AWS Amplify within 5 minutes with CI/CD

You can deploy static apps/website on AWS using S3 or Amplify. I prefer AWS Amplify and in this tutorial, I am going to quickly show you how you can deploy your Next.js app on AWS Amplify within 5 minutes with CI/CD.

I assume you already have next.js app ready, if not please clone this sample app.

Step 1:

From the AWS console, go to "AWS Amplify"

Once you are on the AWS Amplify homepage, select "Get started"

After that, under the "Deliver" section, click "Get started"

Step 2:

Select GitHub and then click "Continue" - it will ask you to authorize Github, if you need help please read step 1 of my previous article

Step 3:

Select repo, branch and then click "Next"

Step 4:

AWS Amplify will generate a build script for you automatically, but you will need to change it a little. Click on the "Edit" and change the build and artifacts sections:

The final build settings should look like this:

version: 1frontend:  phases:    preBuild:      commands:        - yarn install    build:      commands:        - yarn run export  artifacts:    baseDirectory: out    files:      - '**/*'  cache:    paths:      - node_modules/**/*

Once you have updated the build settings, click "Save"

Click "Next"

Step 5:

Click "Save and deploy"

That's it. Once all the stages have been passed, you can click the link and see your app in action.

To test whether CI/CD (technically only CD) is working, make changes to your app and push them to your repo. They should be live after all the stages have passed.

Notes:

• If you are not using yarn, please change the build settings accordingly (with npm)
• We are using (Next.js static export)[https://nextjs.org/docs/advanced-features/static-html-export]
• You can use the same procedure for hosting any front-end/static app (React, Vue, Angular, etc.) - even you can deploy Nuxt.js app
• If you don't want to use static exports and need SSR then read this