# Next.js and Agility CMS

> Source: https://agilitycms.com/docs/nextjs/next-js-and-agility-cms

Building a fast, content-managed website has never been easier. Pair **Next.js** (the React framework) with **Agility CMS** for content and page management, deploy to a platform like **Vercel**, and you get a great experience for three audiences at once: visitors, editors, and developers.

Next.js gives developers everything they need for a production website — but we believe the **editor** experience should come first. If you want a performant site, happy developers, and productive editors, this is for you.

## Build better user experiences

Next.js is built around performance, SEO, and accessibility:

- **Server-first rendering** — pages render as React Server Components and are prerendered to fast, crawlable HTML, so the browser downloads minimal JavaScript.
- **Instant navigation** — Next prefetches the routes a visitor is likely to click, so page transitions feel immediate.
- **Optimized assets** — images, fonts, and scripts are optimized out of the box (see the [AgilityPic component](/docs/nextjs/using-the-agilitypic-component-for-responsive-images) for responsive CMS images).

## Content and pages, managed by editors

With Agility, editors compose pages from a toolbox of **Components** and **Page Templates** that developers build — no code required to publish. In Agility a **Page** (or *Layout*) is made of Components placed into the template's content zones. Editors preview changes in real time before publishing, and Agility's publish webhook updates the live site instantly (see [Caching with Next.js and Agility](/docs/nextjs/caching-with-next-js-and-agility)).

## Deploy anywhere, scale infinitely

Because Next.js prerenders and caches your pages, you don't need heavy web servers — your site scales with your CDN. **Vercel** (from the creators of Next.js) is the recommended host and supports Agility preview out of the box, but any Node-capable host works.

## Modern by default: App Router + Cache Components

New Agility + Next.js projects use the **App Router** with **React Server Components** and **Cache Components** (`"use cache"`): long-lived caches with tag-based invalidation, so pages are static-fast and update the moment an editor publishes. Start here:

- [Rendering & Data Fetching with Next.js](/docs/nextjs/next-js-and-server-side-rendering) — how routes render in the App Router.
- [Caching with Next.js and Agility](/docs/nextjs/caching-with-next-js-and-agility) — the recommended caching setup.

## Get started quickly

Two starting points, both wired to Agility with best practices:

- **[Next.js Starter (Blog)](https://github.com/agility/agilitycms-nextjs-starter)** — a clean App Router starter connected to a sample Agility instance. See [Using the Next.js Starter](/docs/nextjs/using-the-next-js-blog-starter).
- **[Advanced Next.js Demo Site](/docs/nextjs/using-the-advanced-next-js-demo-site)** — a fully-featured example showing pages, listings, search, preview, and the caching model in a real-world build.

Adding Agility to an existing Next.js app instead? Install [`@agility/nextjs`](https://www.npmjs.com/package/@agility/nextjs) and follow the rendering + caching guides above.