This is sample Next.js starter site that uses Agility CMS and aims to be a foundation for building sites using Next.js and Agility CMS.
New to Agility CMS? Sign up for a FREE account
There are 2 new env var settings that are used to control caching.
AGILITY_FETCH_CACHE_DURATION
0
to disable caching, or set it to a low value, like 10
seconds.AGILITY_PATH_REVALIDATE_DURATION
revalidate
export that will tell next.js how long to cache a particular path segment. Set this to a longer value if you are using on-demand revalidation, and a lower value if not, and if your users expect content changes to be reflected earlier.Agility will NOT cache anything in preview mode :)
On Demand RevalidationAGILITY_FETCH_CACHE_DURATION
value and actively caching items returned from the SDK.app/api/revalidate/route.ts
and will revalidate the items based on the tags that are used to cache those object.lib/cms-content
has examples of how to retrieve content while specifying the cache tags for it.This starter now relies on component based data-fetching.
@agility/nextjs
package to make getting started with Agility CMS and Next.js easynext/image
for image optimization using the <Image />
component or the next.js <Image />
component for images that aren't stored in Agility.next/font
packageThis 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.
This starter is written in TypeScript, with ESLint.
To start using the Agility CMS & Next.js Starter, sign up for a FREE account and create a new Instance using the Blog Template.
npm install
or yarn install
.env.local.example
file to .env.local
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
When running your site in development
mode, you will see the latest content in real-time from the CMS.
yarn install
yarn dev
This will launch the site in development mode, using your preview API key to pull in the latest content from Agility.
npmnpm install
npm run dev
When running your site in production
mode, you will see the published content from Agility.
yarn build
yarn start
npm run build
npm run start
You can use the Agility Content Fetch SDK normally - either REST or GraphQL within server components.
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.
If you have feedback or questions about this starter, please use the Github Issues on this repo, or join our Community Slack Channel.
Start a blog with Next.js, AgilityCMS and TailwindCSS.
This is sample Next.js starter site that uses Agility CMS and aims to be a foundation for building sites using Next.js and Agility CMS.
New to Agility CMS? Sign up for a FREE account
There are 2 new env var settings that are used to control caching.
AGILITY_FETCH_CACHE_DURATION
0
to disable caching, or set it to a low value, like 10
seconds.AGILITY_PATH_REVALIDATE_DURATION
revalidate
export that will tell next.js how long to cache a particular path segment. Set this to a longer value if you are using on-demand revalidation, and a lower value if not, and if your users expect content changes to be reflected earlier.Agility will NOT cache anything in preview mode :)
On Demand RevalidationAGILITY_FETCH_CACHE_DURATION
value and actively caching items returned from the SDK.app/api/revalidate/route.ts
and will revalidate the items based on the tags that are used to cache those object.lib/cms-content
has examples of how to retrieve content while specifying the cache tags for it.This starter now relies on component based data-fetching.
@agility/nextjs
package to make getting started with Agility CMS and Next.js easynext/image
for image optimization using the <Image />
component or the next.js <Image />
component for images that aren't stored in Agility.next/font
packageThis 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.
This starter is written in TypeScript, with ESLint.
To start using the Agility CMS & Next.js Starter, sign up for a FREE account and create a new Instance using the Blog Template.
npm install
or yarn install
.env.local.example
file to .env.local
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
When running your site in development
mode, you will see the latest content in real-time from the CMS.
yarn install
yarn dev
This will launch the site in development mode, using your preview API key to pull in the latest content from Agility.
npmnpm install
npm run dev
When running your site in production
mode, you will see the published content from Agility.
yarn build
yarn start
npm run build
npm run start
You can use the Agility Content Fetch SDK normally - either REST or GraphQL within server components.
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.
If you have feedback or questions about this starter, please use the Github Issues on this repo, or join our Community Slack Channel.