Fully Featured Starter
Production-ready example showcasing enterprise features, AI-powered search, internationalization, and advanced caching patterns
The Advanced Next.js Demo Site is a comprehensive, production-ready example of an Agility CMS-powered website built with Next.js 15, React 19, and TypeScript. This demo goes far beyond the basic starter, showcasing enterprise-level features and modern development patterns.
This demo site demonstrates production-ready patterns and enterprise features that go beyond the basic starter:
AGENTS.md file for Cursor, Copilot, Windsurf, and moreThe demo includes a fully functional AI search system that combines Azure OpenAI with Algolia:
Learn More: AI Search Implementation
Multi-locale support with clean URL patterns:
/blog)/fr/blog, /es/blog)Learn More: Multi-Locale Implementation
Production-ready caching strategy:
agility-content-{contentID|referenceName}-{locale}Learn More: Caching Strategy
URL-based personalization for audience and region targeting:
?audience=enterprise®ion=north-americaLearn More: Audience & Region System
The demo site includes a comprehensive content model:
Learn More: Content Architecture
# Clone the repository
git clone https://github.com/agility/nextjs-demo-site-2025.git
cd nextjs-demo-site-2025
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local with your Agility CMS credentials
The demo requires several environment variables. See the Environment Variables documentation for complete details.
Required:
AGILITY_GUID - Your Agility CMS instance GUIDAGILITY_API_FETCH_KEY - Production API keyAGILITY_API_PREVIEW_KEY - Preview API keyAGILITY_SECURITY_KEY - Security key for webhooksAGILITY_LOCALES - Comma-separated locales (e.g., "en-us,fr")AGILITY_SITEMAP - Sitemap channel nameOptional (for AI features):
# Start development server with Turbopack
npm run dev
# Run prebuild (rebuilds redirect cache - required before production build)
npm run prebuild
# Build for production
npm run build
# Start production server
npm run start
⚠️ Important: Always run npm run prebuild before npm run build to rebuild the redirect cache.
The demo site includes comprehensive in-site documentation at /docs:
This advanced demo is ideal for:
| Feature | Basic Starter | Advanced Demo |
|---|---|---|
| Content Models | ~5-10 | 24 |
| Components | ~10 | 20 |
| AI Search | ❌ | ✅ Azure OpenAI + Algolia |
| Internationalization | ❌ | ✅ Multi-locale with clean URLs |
| Personalization | ❌ | ✅ Audience & Region targeting |
| Advanced Caching | Basic | Tag-based with webhooks |
| A/B Testing | ❌ | ✅ PostHog integration |
| Analytics | ❌ | ✅ PostHog tracking |
| View Transitions | ❌ | ✅ React 19 ViewTransition API |
| Type Safety | Basic | Comprehensive with custom types |
| AI Assistant Support | Basic | Full MCP server integration |
| Documentation | Basic README | Comprehensive in-site docs |
All Agility CMS components must be registered:
// src/components/agility-components/index.ts
import { ComponentName } from "./ComponentName"
const allModules = [
{ name: "ComponentName", module: ComponentName },
// ... other modules
]
The demo shows how to handle nested content relationships:
// Get parent with nested reference
const { fields: { nestedRef: { referencename } } } = await getContentItem<MainType>({
contentID: module.contentid,
languageCode,
})
// Fetch nested collection separately
const nestedItems = await getContentList<NestedType>({
referenceName: referencename,
languageCode,
take: 20
})
Always use <AgilityPic> for Agility CMS images:
import { AgilityPic } from "@agility/nextjs"
<AgilityPic
image={imageField}
fallbackWidth={600}
className="w-full h-auto rounded-2xl"
data-agility-field="image"
/>
Learn More: See the Component Architecture documentation for complete patterns.
This demo includes comprehensive support for AI coding assistants:
Supported assistants: Cursor, GitHub Copilot, Windsurf, Claude Code, and more.
Learn More: See AGENTS.md in the repository.
npm run prebuild to rebuild redirect cachenpm run build for production build/api/revalidateLearn More: Deployment Guide
Ready to build something advanced? Start with this demo site and customize it for your needs. The comprehensive documentation and code examples will help you implement enterprise-level features in your own Agility CMS projects.