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 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).

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 — how routes render in the App Router.
• 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) — a clean App Router starter connected to a sample Agility instance. See Using the Next.js Starter.
• 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 and follow the rendering + caching guides above.