Skip to content
Avatar of agilityagility/agilitycms-nextjs-starter

Blog with Agility CMS and Next.js

Start a blog with Next.js, AgilityCMS and TailwindCSS.

Framework
Use Case
Website Blog with Agility CMS and Next.js

Agility CMS & Next.js 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.

Live Website Demo

New to Agility CMS? Sign up for a FREE account

πŸ“’ UPDATED FOR NEXT.JS 13.5 πŸ“’

  • We have updated this starter for Next.js 13. It is using a pre-release version of the @agility/nextjs npm package specialized for app router.

About This Starter

  • Uses our @agility/nextjs package to make getting started with Agility CMS and Next.js easy
  • Support for Next.js 13 and React 18
  • Connected to a sample Agility CMS Instance for sample content & pages
  • Uses the getStaticProps function from Next.js to allow for full SSG (Static Site Generation)
  • Supports next/image for image optimization using the <Image /> component or the next.js <Image /> component for images that aren't stored in Agility.
  • Supports full Page Management
  • Supports Preview Mode
  • Supports the next/font package
  • Uses the revalidate and fallback properties to enable ISR (Incremental Static Regeneration) builds
  • 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)
  • Supports component level data fetching.

Tailwind CSS

This starter uses Tailwind CSS, a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

TypeScript

This starter is written in TypeScript, with ESLint.

Getting Started

To start using the Agility CMS & Next.js Starter, sign up for a FREE account and create a new Instance using the Blog Template.

  1. Clone this repository
  2. Run npm install or yarn install
  3. Rename the .env.local.example file to .env.local
  4. Retrieve your GUID, API Keys (Preview/Fetch), and Security Key from Agility CMS by going to Settings > API Keys.

How to Retrieve your GUID and API Keys from Agility

Running the Site 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

This will launch the site in development mode, using your preview API key to pull in the latest content from Agility.

npm
  1. npm install
  2. npm run dev

Production Mode

When running your site in production mode, you will see the published content from Agility.

yarn
  1. yarn build
  2. yarn start
npm
  1. npm run build
  2. npm run start

Accessing Content

You can use the Agility Content Fetch SDK normally - either REST or GraphQL within server components.

Deploying Your Site

The easiest way to deploy a Next.js website to production is to use Vercel from the creators of Next.js, or Netlify. Vercel and Netlify are all-in-one platforms - perfect for Next.js.

Resources

Agility CMS

Next.js

Vercel

Netlify

Tailwind CSS

Community

Feedback and Questions

If you have feedback or questions about this starter, please use the Github Issues on this repo, or join our Community Slack Channel.

Website Blog with Agility CMS and Next.js
Avatar of agilityagility/agilitycms-nextjs-starter

Blog with Agility CMS and Next.js

Start a blog with Next.js, AgilityCMS and TailwindCSS.

Framework
Use Case

Agility CMS & Next.js 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.

Live Website Demo

New to Agility CMS? Sign up for a FREE account

πŸ“’ UPDATED FOR NEXT.JS 13.5 πŸ“’

  • We have updated this starter for Next.js 13. It is using a pre-release version of the @agility/nextjs npm package specialized for app router.

About This Starter

  • Uses our @agility/nextjs package to make getting started with Agility CMS and Next.js easy
  • Support for Next.js 13 and React 18
  • Connected to a sample Agility CMS Instance for sample content & pages
  • Uses the getStaticProps function from Next.js to allow for full SSG (Static Site Generation)
  • Supports next/image for image optimization using the <Image /> component or the next.js <Image /> component for images that aren't stored in Agility.
  • Supports full Page Management
  • Supports Preview Mode
  • Supports the next/font package
  • Uses the revalidate and fallback properties to enable ISR (Incremental Static Regeneration) builds
  • 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)
  • Supports component level data fetching.

Tailwind CSS

This starter uses Tailwind CSS, a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

TypeScript

This starter is written in TypeScript, with ESLint.

Getting Started

To start using the Agility CMS & Next.js Starter, sign up for a FREE account and create a new Instance using the Blog Template.

  1. Clone this repository
  2. Run npm install or yarn install
  3. Rename the .env.local.example file to .env.local
  4. Retrieve your GUID, API Keys (Preview/Fetch), and Security Key from Agility CMS by going to Settings > API Keys.

How to Retrieve your GUID and API Keys from Agility

Running the Site 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

This will launch the site in development mode, using your preview API key to pull in the latest content from Agility.

npm
  1. npm install
  2. npm run dev

Production Mode

When running your site in production mode, you will see the published content from Agility.

yarn
  1. yarn build
  2. yarn start
npm
  1. npm run build
  2. npm run start

Accessing Content

You can use the Agility Content Fetch SDK normally - either REST or GraphQL within server components.

Deploying Your Site

The easiest way to deploy a Next.js website to production is to use Vercel from the creators of Next.js, or Netlify. Vercel and Netlify are all-in-one platforms - perfect for Next.js.

Resources

Agility CMS

Next.js

Vercel

Netlify

Tailwind CSS

Community

Feedback and Questions

If you have feedback or questions about this starter, please use the Github Issues on this repo, or join our Community Slack Channel.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential