Next.js + Agility CMS

⚠️ ATTENTION: This starter is deprecated, if using Next.js with Agility CMS please use our updated starter: https://github.com/agility/agilitycms-nextjs-starter

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

About This Website

• 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)

Built on Treact 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.

Get Started

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

Running Locally (Development Mode)

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

yarn

1. yarn install
2. yarn dev

To update content locally without restarting your dev server, run yarn cms-pull

npm

1. npm run install
2. npm run dev

To update content locally without restarting your dev server, run npm run cms-pull

Running Locally (Production Mode)

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

yarn

1. yarn build
2. yarn start

npm

1. npm run build
2. npm run start

Deploy

☝️ 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.

Notes

How to Properly Link to an interior Page

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>

How to Preview Content?

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.

Feedback and Questions

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.