Today there are a lot of ways to deploy your sites to the web. In this post I'm going to describe how to host a Next.js app on AWS Amplify.

Next.js

Next.js is a framework based on React. It is developed by Vercel and has been around for a couple of years. It lets the user build fast static web apps. I really recommend that you check out their tutorial if you're curious what Next.js is all about. I won't go in to detail about Next.js in this post.

AWS Amplify

Amazon covers a lot of ways to host and build applications in their cloud. Wether you want to use containers or serverless function, they got you covered. One deployment platform you can find in AWS is AWS Amplify. It is an easy to use platform for hosting web and/or mobile apps in the cloud. In the lists below you can find the supported platforms.

web platforms:

• JavaScript
• Angular
• Vue
• React
• Next.js

mobile Platforms:

• Android
• iOS
• React Native
• Ionic
• Flutter

For this post we will use a Continuous Integration chain to build our site when we do a code checkin to a certain branch in our repo. After the checkin, AWS Amplify will do te rest of the job to deploy our site.

Free Tier

AWS Amplify Free tier gives you the following perks.

This is more than enough for what we need for this tutorial.

Walkthrough

To start off we need to create a new Next.js app. We do this with the following command npx create-next-app. Seems familiar? It's almost the same as npx create-react-app.

I named my app next-amplify thus I wrote

npx create-next-app next-amplify

This will give us something to start of with. This is the project structure of a basic Next.js app.

We need to change one line in our package.json. Instead of "build": "next build" it should say "build": "next build && next export". That way our project will be packaged correctly in a later step. Let's add this repo to our version control.

I'm going to create an empty repo on GitHub and push our existing code to that repo. If any reader need help with any of the steps just hit me up on twitter and I'll help you out.

The repo can be found here. Now for the good stuff 👏

Go to AWS Amplify and click Get Started. you will then be met with the following screen.

Select GitHub and press Continue. Now you need to connect your GitHub account to AWS. That way AWS Amplify will be able to listen for actions on our repo.

Select your repo and your branch and press next. On the following screen is our build definition, and unfortunately I ran in to some issues on this one.

As a Windows user I needed to change the line npm ci to npm install since I hade some problems with chokidar and fsevents. So your build config file should look like this:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Press next and then press Save and Deploy on the next screen.

Your app will then be deployed and you will be given a link in just a couple of seconds.

Congratulations! You have just deployed a Static Next.js app to the Amazon Cloud. 👏👏

In the next post I will show you how to add a custom domain to your site. Like https://oller.io

Take care.