This guide assumes that you already have an AWS and GitHub account, so if you don't have an account with either service, go sign up, like, right now!

With the launch of Amazon's AWS Amplify Console Console service, it's never been easier to deploy a Next.js app to an enterprise-grade serverless environment. There are lots of serverless alternatives, like Zeit's own Now and the developer-adored Netlify, but if your other projects already live in the AWS ecosystem, it may be easier to keep all of your "eggs" in one basket.

Not sure what "serverless" even means? In short, a serverless deployment is a type of hosting where the cloud provider (i.e. Amazon) runs and maintains the server, and dynamically allocates resources to your app as needed. These services are typically priced by usage and not a flat monthly rate, which can drastically drive down the cost to deploy an app that can scale infinitely.**

Now, there are plenty of naysayers who wave their hands around like pissed off Italians from New Jersey and shout, "Serverless isn't actually serverless and I don't need Amazon holding my hand to deploy an app!" And I get that sentiment. As someone who enjoys the process of provisioning servers and creating Docker images (just kidding, that's all a huge pain in the ass), I like having total control over my environment. But sometimes, total control is a detriment to the project. Do you really need to have root-level control over all aspects of your server(s)? If not, then serverless might be for you!

So, without further ado, let's dive in and deploy your app to Amazon's Amplify Console Console!

Step 1: Log in to AWS and search for Amplify Console Console in the search bar

Okay, admittedly, that's a pretty easy first step in a tutorial. But you look like you could do with an easy win, so way to go! You did it! Probably. On the off chance that finding the search bar was too difficult a task, I've included a handy screenshot below that shows you where to look.

Here's a hint: It's literally the first thing you see when you log in to your AWS dashboard.

PUT SCREENSHOT OF AWS DASH HERE

As you type into the search bar, you should see the results populate in a list below it. Click on the search result that says AWS Amplify Console and it will navigate you to your Amplify Console Console dashboard. This is where the magic, uh, happens. (The joke here is that serverless is "magic". Please laugh.)

Step 2: Connect your GitHub repo to AWS Amplify Console Console

Right, so this step is about as easy as the previous one. Click the button labeled, "Connect App" and then select your Git provider from the list. Then, click the "Next" button below the list to open a link to GitHub to authenticate your account and link it to Amplify Console. Click the button on the GitHub page to allow Amplify Console access to your repo, and if that was successful, you'll be brought back to the Amplify Console dashboard to complete the setup.

Amplify Console supports GitHub, BitBucket, GitLab, and AWS CodeCommit, but for simplicity's sake, let's stick to using GitHub for this tutorial, yeah?

Now that you've authenticated Amplify Console with your GitHub account, you'll notice a dropdown menu below the "GitHib authorization was successful" message titled Repository. Click the dropdown menu and select the repo you would like to deploy. Then, select the branch you want to use for deployments and click the "Next" button to navigate to the build settings page. (If you don't have any other branches set up for this repo, you'll see just one option, master. Select that branch and continue.)

Step 3: Configure your app's build settings

Now, here's the (potentially) tricky part of this entire tutorial: defining your build settings for your app so AWS Amplify Console can properly build and deploy your Next app. Amazon will try to auto-detect Next's build settings and will show you its suggested (but incorrect) settings in YML format:

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

Amplify Console does a pretty decent job detecting which build settings to use, but we'll need to edit them a bit to get them to work with Next's static export functionality.

To do a static export in Next, add the export and build rules from below to your package.json file's existing scripts section if you don't already have them there.

"scripts": {
    "build": "next build",
    "export": "npm run build && next export"
  }

Now, when you open a terminal and enter npm run export, Next will automagically build and export your entire app into a new directory in your project named out. This is where your static exported app's files live, and it's the directory that you'll want to serve your app from.

So, now that we can export our Next app for use on serverless environments, we have to edit the build settings on AWS Amplify Console to use our newly created rules in our package.json file. To do that, click the "Edit" button and an inline code editor will pop up. Make the changes, and click the "Save" button to commit your changes.

Your build settings should look like this now:

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Pro Tip: You can also add any environment variables on this page, as well. Click the tab below the build settings to display text fields where you can enter in your variable's key and value. Click "Add" to add additional variables if needed.

Click the "Next" button to save your build settings, and continue on to step 4.

Why did it change npm install to npm ci? The npm command ci stands for Continuous Integration. It simply means that instead of using the package.json file to install modules, it uses the package-lock.json file instead. This locks down your app's dependencies and creates reproducible builds – something us developers really, really like. This is opt-in, though, so choose whichever command you prefer.

Step 4: Deploy your Next app with one click

Once your build settings are saved, you'll be able to review all of your selections on the final setup page. This page lists the selected repo and branch to deploy, as well as the branch environment. Confirm these options are all correct, and then click the "Save and deploy" button below the review summary to begin the deploy process!

You'll see your dashboard reflect the current state of your deployment in 4 stages: Provision, Build, Deploy, and Verify. If there are any build errors, the deploy will fail and the dashboard will highlight where the build failed in either of the 4 stages. Click the failed stage to see the terminal output for that build so you can correct any errors in your app.

One of the biggest benefits to using AWS Amplify Console to deploy your Next app is its built-in atomic deployments. This means that in the event that a deployment fails, the failed build will not be made live, and any successful builds will be made available immediately with zero downtime. Pretty rad, huh?

Step 5: Add a custom domain to your app

Remember when I said having all of your eggs in one basket would make things simple to manage? Well, if your domain was purchased on Amazon Route 53, it's a one-click setup to point it to your app on Amplify Console.

Click on your app in the Amplify Console console to bring up its settings. On the sidebar navigation, you'll see an option for "Domain management." Click that link to go to the domains page. Then click on the "Add domain" button, and start typing in your Amazon Route 53 domain into the searchbar. Your domain should pop right up, so select it and then click the "Save" button to point your domain to your newly deployed app.

Didn't register your domain name on Route 53? No worries, AWS has a quick tutorial on how to use a third-party domain registrar like Google Domains… or GoDaddy if you're into that kind of thing. I won't go into specifics here on how to do that, but it's pretty straightforward. I mean, if you made it this far, you can handle a little DNS record editing, yeah?

Final thoughts…

  • AWS Amplify Console is awesome. Don't avoid the service just because you think you're "better" than using incredible time-saving tools like Amplify Console. Seriously. Just suck it up.
  • From start to finish, having zero experience with Amplify Console, I was able to get a production-ready app deployed in about 30 mins. And that includes the time I spent troubleshooting the build settings.
  • Remember to set up overage reminders on your account! This is so important, as the biggest gripe with AWS is the unexpected bills you can get if your app is getting loads of traffic (legimate or not). You can find those options in the "My Billing Dashboard" screen.