This is sample Next.js starter site that uses Agility CMS and aims to be a foundation for building fully static sites using Next.js and Agility CMS.

NextJS Preview is now supported on Vercel!

Live Website Demo

New to Agility CMS? Signup for a free account

• Connected to a sample Agility CMS instance to get content and pages
• Uses the getStaticProps function from Next.js to allow for full static site generation
• Supports full page management
• Supports preview mode
• Uses revalidate tag with Vercel to enable incremental static builds
• Provides a functional structure that dynamically routes each page based on the request, loads a page template dynamically, and also dynamically loads and renders appropriate Agility CMS modules (as React components)

This website uses components licensed from the Treact library. There are over 50 easily customizable modern React UI Templates and Components built using TailwindCSS which are also lightweight and simple to setup.

Sign up for the Agility CMS NextJS Starter instance.

1. Clone this repository
2. Run npm install or yarn install
3. Run npm run dev or yarn dev
4. Rename the .env.local.example file to .env.local
5. Retrieve your GUID, API Keys (Preview/Fetch) and Security Key from Agility CMS and place them in your .env.local file

How to Retreive your GUID and API Keys

• AGILITY_GUID should be the Instance GUID field
• AGILITY_API_FETCH_KEY should be the Live API Key field
• AGILITY_API_PREVIEW_KEY should be the Preview API Key field - this is used when the site is in Preview Mode and allows your site to pull the latest content, regardless of whether it is published or not.
• AGILITY_SECURITY_KEY should be the Security Key field that can be found in Settings > Global Security - this is used to communicate between the CMS and your site to validate Preview Mode

When running your site in development mode, you will see the latest content in real-time from the CMS.

1. npm run install
2. npm run dev

When running your site in production mode, you will see published content (only) in real-time from the CMS.

1. npm run build
2. npm run start

☝️ Deploy this starter repo in just minutes with Vercel. It will prompt you to enter your AGILITY_GUID, , AGILITY_API_FETCH_KEY, AGILITY_API_PREVIEW_KEY, and AGILITY_SECURITY_KEY.

Note the use of the component with the [...slug] page.

import Link from 'next/link';

//where '[...slug]' is the catch-all dynamic page we have (pages/[...slug].js)
// and '/posts' is the actual real page path for the page
<Link href="[...slug]" as="/posts"><a>{item.fields.title}</a></Link>

Since this is a static app, how can editors preview content in realtime as they are making edits in Agility CMS? Vercel supports this out to the box! Just point your preview url in Agility CMS to the address of your site deployed in Vercel, and it will enable preview mode when you click "Preview" in Agility CMS.

If you have feedback or questions about this starter, please use the Github Issues on this repo, or create a post on the Agility Developer Community.