https://github.com/agility/next-14-caching
https://github.com/agility/next-14-caching
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/agility/next-14-caching
- Owner: agility
- Created: 2023-10-29T15:02:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-20T13:10:51.000Z (almost 2 years ago)
- Last Synced: 2025-03-24T19:39:42.657Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://preview-tests-nov-2023.vercel.app
- Size: 260 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://next-14-caching.vercel.app/)
[New to Agility CMS? Sign up for a trial account](https://agilitycms.com/free)
## 📢 UPDATED FOR NEXT.JS 14 📢
- We have updated this starter for Next.js 14. It is using a pre-release version of the [@agility/nextjs](https://www.npmjs.com/package/@agility/nextjs) npm package specialized for app router amd caching.
## About This Starter
- Uses our [`@agility/nextjs`](https://www.npmjs.com/package/@agility/nextjs) package to make getting started with Agility CMS and Next.js easy
- Support for Next.js 14 and app or pages router
- Support for fetch caching
- Supports routing from Agility sitemaps
- Supports Preview Mode
### Tailwind CSS
This starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
It also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.
### TypeScript
This starter is written in TypeScript, with ESLint.
## Getting Started
To start using the Agility CMS & Next.js Starter, [sign up](https://agilitycms.com/free) 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](https://manager.agilitycms.com/settings/apikeys).
[How to Retrieve your GUID and API Keys from Agility](https://help.agilitycms.com/hc/en-us/articles/360031919212-Retrieving-your-API-Key-s-Guid-and-API-URL-)
## 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](https://vercel.com/) from the creators of Next.js, or [Netlify](https:netlify.com). Vercel and Netlify are all-in-one platforms - perfect for Next.js.
## Resources
### Agility CMS
- [Official site](https://agilitycms.com)
- [Documentation](https://agilitycms.com/docs)
### Next.js
- [Official site](https://nextjs.org/)
- [Documentation](https://nextjs.org/docs/getting-started)
### Vercel
- [Official site](https://vercel.com/)
### Netlify
- [Official site](https://netlify.com/)
### Tailwind CSS
- [Official site](http://tailwindcss.com/)
- [Documentation](http://tailwindcss.com/docs)
### Community
- [Official Slack](https://agilitycms.com/join-slack)
- [Blog](https://agilitycms.com/resources/posts)
- [GitHub](https://github.com/agility)
- [LinkedIn](https://www.linkedin.com/company/agilitycms)
- [X](https://x.com/agilitycms)
- [Facebook](https://www.facebook.com/AgilityCMS/)
## Feedback and Questions
If you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-nextjs-starter/issues) on this repo, or join our [Community Slack Channel](https://agilitycms.com/join-slack).