Deploying Next.js to AWS Amplify

This guide will cover how you can deploy your website built with Next.js and Agility CMS using Static Site Generation (SSG) to AWS Amplify.

Note

You will need a GitHub and an AWS account to get your project deployed.

Login to your AWS account, or sign up if you don't already have one.

If you are deploying your Next.js site to AWS as a fully static site, there are a few steps you need to take.

Prerequisites

  1.  Update the build script in your package.json to next build && next export
  2. Replace all next/image components to default HTML <img/> tags, or use a Loader.
  3. Replace the fallback boolean in /pages/[...slug].js with false

Deploying your Site

Choose 'Host your web app' to connect to your GitHub, GitLab, or BitBucket account.

Select the repository you wish to deploy and choose the branch.

Use the auto-detected app build settings and open up advanced settings to add your environment variables.

The variables you'll need are the following:

# get these values from the API Keys page in Agility Settings => https://manager.agilitycms.com/settings/apikeys
AGILITY_GUID=xxx
AGILITY_API_FETCH_KEY=xxx
AGILITY_API_PREVIEW_KEY=xxx
AGILITY_SECURITY_KEY=xxx

# if you have multiple locales, comma separate them (e.g: en-us,fr-ca) without a space!
AGILITY_LOCALES=en-us
AGILITY_SITEMAP=website

Once your site is done provisioning, building, being deployed, and verified, you will be able to access your deployed site with the link AWS provides:

Setting Up Preview

Previews offer a way to preview changes before publishing content or merging a pull request. To set up a preview, click on Previews > Enable Preview in AWS Amplify and install the GitHub app.

Once the GitHub app is installed, select your branch, click manage and enable pull request previews.

Create a branch and open a new pull request to create a preview.

AWS will provide a Preview URL. You can copy this URL, and set up your preview domain in Agility by going to Settings > Sitemap > Setup Deployment > Custom Deployment. Give your deployment a name, enter the Preview URL and set it as your Preview Deployment.

Rebuilding Your Site with Webhooks

You can rebuild your Next.js site deployed on AWS Amplify with Webhooks. In AWS Amplify, go to Build Settings > Create Webhook to create a new webhook. Give your webhook a name a select a branch you would like to rebuild (main or preview). Click Save and copy the URL AWS generates for you.

In Agility, go to Settings > Web Hooks to add a new webhook. Give your Webhook a name and paste in the URL.

For Production builds, make sure Receive Content Publish Events is checked off.

For Preview builds, uncheck Receive Content Publish Events, and check off Receive Content Save Events.

You can test the Webhook by sending a test payload.