Using the Next.js Blog Starter

The Next.js Blog Starter was built for developers who want to quickly start using Agility CMS with Next.js. You can save time and effort by using this template that is already integrated with Agility CMS.

🔗  View Live Example

Why use the Blog Starter?

It's simple - it's a bare-bones template but has enough examples in it for you to follow

Fast rendering - your website is exported to static HTML, so there's no more waiting for your web server to piece together and render your HTML

Optimized images - using the next/image component, it will only load the appropriately sized images for the device the user is using so smaller devices will load smaller images

Fast preview & builds - deploy your site to Vercel to take advantage of lightning-fast build & previews

Features

  1. Uses our @agility/next package to make getting started with Agility CMS and Next.js easy
  2. Connects to a sample Agility CMS Instance for sample content & pages
  3. Uses the getStaticProps function from Next.js to allow for full SSG (Static Site Generation)
  4. Uses revalidate tag with Vercel to enable ISR (Incremental Static Regeneration) builds
  5. Supports next/image for image optimization
  6. Supports full Page Management
  7. Supports Preview Mode
  8. Supports TypeScript
  9. Tailwind CSS for styling
  10. Provides a functional structure that dynamically routes each page based on the request, loads a Page Templates dynamically, and also dynamically loads and renders appropriate Agility CMS Page Modules (as React components)

Set Up the Instance

In order to get started with the Blog Starter, Sign Up for a Free Agility CMS account.

Once you've created an account, you will be able to create a new Instance based off of the Blog Starter with Next.js.

Deploy Your Site

The easiest way to deploy a Next.js website to production is to use Vercel from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.

You can get your Next.js and Agility CMS website deployed with a Preview Environment setup within minutes from your Agility CMS Manager!

Deploy via Vercel Integration

Note

You will need to have a GitHub and a Vercel account to get your project deployed.

To start, head by going into Settings > Sitemaps, then click Setup Deployment.

Select the Vercel Automated Deployment to connect to Vercel and deploy your Next.js website.

First, create a Git Repository for your project to ensure you can easily update your project after deploying it.

Next, Install the Agility CMS integration that will authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains, as well as set up your Environment Variables.

Lastly, Vercel will fetch the source code for the agilitycms-nextjs-starter and it will be cloned into your Git repository. Vercel will also build your project and upload/deploy your build output.

Once deployed you will be taken back to your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

🎉  Congratulations! You've successfully deployed your Next.js and Agility CMS website to Vercel!

Set Up Your Local Environment

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, Live API Key, Preview API Key and Security Key credentials and copy these somewhere temporarily as you'll need to use them later.

Get The Code

Upon deploying your Next.js Site, a new GitHub repository will be created in your GitHub account containing the code for the Blog Starter.

  1. Clone the repository and open it in your favourite Text Editor.
  2. Run yarn install to install the required packages and dependencies

If you are setting up the site without Deploy to Vercel, clone this repository.

Set up Authentication

  1. Rename the .env.local.example file to .env.local
  2. Place the GUID, Live API Key, Preview API Key and Security Key Values into your .env.local file
# Your Instance ID
AGILITY_GUID=

# Your Live API Key
AGILITY_API_FETCH_KEY=

# Your Preview API Key
AGILITY_API_PREVIEW_KEY=

# Your Security Key
AGILITY_API_SECURITY_KEY=

Start The Site

To run the site locally, run npm run dev or yarn dev to start up your development server. If successful, Next.js will compile your pages in real-time and you will be able to access the site in your browser on https://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.