This guide covers deploying your Next.js website built with Agility CMS to AWS Amplify Hosting. AWS Amplify supports both Static Site Generation (SSG) and Server-Side Rendering (SSR) for Next.js applications. ## Overview AWS Amplify Hosting provides a fully managed hosting service for Next.js applications with built-in CI/CD, global CDN, and support for both static and dynamic Next.js features. ### Benefits of Deploying to AWS Amplify - ✅ **Full Next.js Feature Support** - Supports Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), and React Server Components - ✅ **Preview Mode** - Full support for Agility CMS preview mode to review draft content before publishing - ✅ **Automatic Deployments** - Seamless GitHub, GitLab, Bitbucket, and AWS CodeCommit integration - ✅ **Global CDN** - Built-in CloudFront CDN for fast global performance - ✅ **Pull Request Previews** - Automatic preview deployments for pull requests - ✅ **Environment Variables** - Secure management of Agility CMS credentials - ✅ **Webhooks** - Automatic rebuilds when content is published in Agility CMS - ✅ **Cost-Effective** - Pay only for what you use with no upfront costs ### Starting Point Most developers deploying Agility CMS websites to AWS Amplify will be starting from an existing Next.js project: - **Agility CMS Next.js Starter** - [https://github.com/agility/agilitycms-nextjs-starter](https://github.com/agility/agilitycms-nextjs-starter) - Production-ready starter with App Router, TypeScript, and Tailwind CSS - **Agility CMS Comprehensive Demo** - [https://github.com/agility/nextjs-demo-site-2025](https://github.com/agility/nextjs-demo-site-2025) - Full-featured demo with AI search, internationalization, and advanced features - **Your Own Agility Next.js Site** - Existing project already integrated with Agility CMS These starters already include proper Next.js configuration, Agility CMS integration, and the necessary build scripts. You'll still need to configure your environment variables, but you won't need to set up Next.js from scratch or configure Agility CMS integration manually. ## Prerequisites Before you begin, ensure you have: 1. **AWS Account** - Sign up at [aws.amazon.com](https://aws.amazon.com) if you don't have one 2. **GitHub/GitLab/Bitbucket Account** - Your Next.js project must be in a Git repository 3. **Agility CMS Instance** - With API credentials (see below if you need to set one up) 4. **Node.js 18.x or later** - For local development and testing ### Get Your Agility CMS Credentials If you don't already have an Agility CMS instance set up: 1. **Sign up for Agility CMS** - Create a free account at [agilitycms.com](https://agilitycms.com) 2. **Create an Instance** - Create a new instance (you can start with a Blog Starter template) 3. **Get API Keys** - Navigate to **Settings > API Keys** in your Agility CMS dashboard 4. **Copy your credentials**: - `GUID` (Instance ID) - `Live API Key` (for production) - `Preview API Key` (for development/preview) - `Security Key` (for webhooks) You'll need these credentials for both local development and AWS Amplify deployment configuration. ## Deployment Options AWS Amplify supports two deployment modes for Next.js: ### Option 1: Static Export (SSG Only) For fully static sites using Static Site Generation only. This is the simplest deployment option but has limitations. **Supported Features:** - ✅ Static Site Generation (SSG) - ✅ Pre-rendered pages at build time - ✅ Image optimization (Note: For Agility CMS websites, ALL image optimization is handled at the Edge via Agility's CDN) **Limitations:** - ❌ No Server-Side Rendering (SSR) - ❌ No API Routes - ❌ No Incremental Static Regeneration (ISR) - ❌ No React Server Components ### Option 2: Managed Next.js Hosting (Recommended) AWS Amplify's managed Next.js hosting supports all Next.js features including SSR, API routes, and ISR. **Supported Features:** - ✅ Static Site Generation (SSG) - ✅ Server-Side Rendering (SSR) - ✅ React Server Components - ✅ API Routes - ✅ Incremental Static Regeneration (ISR) - ✅ Image Optimization (Note: For Agility CMS websites, ALL image optimization is handled at the Edge via Agility's CDN, so server-side image optimization is not needed) ## Step 1: Prepare Your Next.js Project ### Verify Build Scripts Ensure your `package.json` has the required scripts: ```json { "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } ``` **Note**: The Agility CMS Next.js starters already include proper Next.js configuration for AWS Amplify deployment, including image optimization settings that work with Agility's Edge CDN. ### Configure Next.js for Amplify (If Using Static Export) > **Important**: Only follow this step if you're deploying as a fully static site. If you're using managed Next.js hosting (recommended), skip this section. If you're deploying your Next.js site as a fully static site, you need to make a few changes: 1. **Update the build script** in your `package.json`: ```json { "scripts": { "build": "next build && next export" } } ``` 2. **Replace `next/image` components** with `AgilityPic` from `@agility/nextjs`: ```jsx // ❌ Do NOT use next/image import Image from 'next/image' {image.label}

// ✅ Use AgilityPic instead (recommended - simplest option) import { AgilityPic } from "@agility/nextjs"; // Alternative: Use AgilityImage if you need next/image features import { AgilityImage } from "@agility/nextjs"; ``` > **Important for Agility CMS**: Use `AgilityPic` from `@agility/nextjs` for all Agility CMS images. AgilityPic is a simple wrapper around the `

Deploying Next.js to AWS Amplify