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

#beginners #nextjs #tutorial #aws

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: 1
frontend:
  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
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