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.
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.
1. Update the build script in your package.json to
next build && next
2. Replace all
next/image components to default HTML
<img/> tags, or use a Loader.
3. Replace the
fallback boolean in
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.