How to host Next.js on 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.

Setting up Preview

Rebuilding Your Site with Webhooks

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

Screen_Shot_2021-05-25_at_7.05.22_PM.png

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

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

Screen_Shot_2021-05-25_at_7.10.04_PM.png

Screen_Shot_2021-05-25_at_7.27.52_PM.png

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

Screen_Shot_2021-05-25_at_7.22.33_PM.png

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

Screen_Shot_2021-05-27_at_9.47.20_AM.png

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:

Screen_Shot_2021-05-27_at_9.48.31_AM.png

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.

Screen_Shot_2021-05-27_at_11.54.22_AM.png

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

Screen_Shot_2021-05-27_at_11.57.47_AM.png

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.

Screen_Shot_2021-05-27_at_11.55.41_AM.png

Screen_Shot_2021-05-27_at_11.59.08_AM.png

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.

Screen_Shot_2021-05-27_at_12.03.34_PM.png

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.

Screen_Shot_2021-05-27_at_12.05.13_PM.png

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.