DEV Community

loading...

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

mubbashir10 profile image Mubbashir Mustafa Updated on ・2 min read

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"
Alt Text

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

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

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
Alt Text

Step 3:

Select repo, branch and then click "Next"
Alt Text

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:
Alt Text

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/**/*
Enter fullscreen mode Exit fullscreen mode

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

Click "Next"
Alt Text

Step 5:

Click "Save and deploy"
Alt Text

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

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

Discussion (2)

pic
Editor guide
Collapse
kamalhossain profile image
Kamal Hossain

Is the S3 is always free with limit?

Collapse
mubbashir10 profile image