Setting Up your Next.js Development Environment


This guide is for setting up your local environment using our agilitycms-next-starter site based on the Next.js Blog Template.

Once logged into Agility CMS, you'll want to grab your API credentials so your Next.js site can authenticate and retrieve data from your instance.

From your Agility CMS dashboard, click into Settings > API Keys.


Take note of your GUID and your Live API Key and Preview API Key credentials and copy these somewhere temporarily as you'll need to use them later.

Get The Code

  1. Clone this repository, and open it in your favorite Text Editor
  2. Run npm install or yarn install to install packages and dependencies

Set up Authentication

  1. Rename the .env.local.example file to .env.local
  2. Retrieve your GUID, API Keys (Preview/Fetch) and Security Key from Agility CMS and place them in your .env.local file
# Your Instance Id
# Your Live API Key
# Your Preview API Key
# Your Security Key

Start the Site

To run the site locally, run npm run dev or yarn run dev. If successful, Next.js will compile your pages in real-time and you will be able to access the site in your browser on http://localhost:3000. 


Did you get a Build Error?

If you get an error during the build, check your log and ensure that you've entered the correct GUID and API Keys, as well as renamed the env.local.example file to .env.local.

Deploy your new Next.js site

With your Next.js site hooked up to Agility CMS, we can get started on deploying our site. The recommended way to deploy a Next.js website to production is to use Vercel, a hosting platform from the creators of Next.js. You can get your Next.js and Agility CMS website deployed with a Preview Environment setup within minutes from your Agility CMS Manager!


Deploying your Next.js site to Vercel



2 out of 2 found this helpful



Please sign in to leave a comment.