Demo Site Documentation

View Demo Site Training GuideTraining Back to Agility CMS

Documentation

Complete guide to the Agility CMS Next.js Demo Site

This documentation covers everything you need to understand, customize, and extend this production-ready demo site built with Agility CMS and Next.js.

What You'll Find Here

Demo Site Specifics - Architecture, implementation patterns, and code examples unique to this demo
Developer Guides - Step-by-step instructions for common development tasks
Agility CMS Integration - How this site uses Agility CMS features and APIs
Best Practices - Patterns and conventions used throughout the codebase

New to Agility CMS?

This documentation focuses on this specific demo site. For comprehensive Agility CMS training, including role-based guides, step-by-step tutorials, and platform fundamentals, check out the official training guide:

Visit Agility CMS Training Guide

Ready to Try Agility CMS?

Whether you're a developer looking to explore the codebase or a content editor wanting to see the editing experience, our team can show you how Agility CMS works for your use case.

Get a personalized walkthrough with our experts

Explore the Source Code

This demo site is open source and available on GitHub. Browse the codebase, submit issues, or contribute improvements to help make Agility CMS even better.

github.com/agility/nextjs-demo-site-2025

Documentation Sections

Admin

Instance-specific administrative information for configuring and managing the demo site

Component Setup

Documents the 20 component models configured in the demo site, including registration and administration

Instance-specific configuration including locales, sitemap settings, and environment setup

Documents the 24 content models (6 Content Items, 18 Content Lists) configured in the demo site

Configured workflows through role assignments and permissions for content creation and publishing

Architect

Architectural information and design patterns used in the demo site

Overall site architecture, technology stack, project structure, and architectural decisions

Component Architecture

Component design patterns, structure, and implementation approaches

Content Architecture

Content model design, relationships, and data modeling strategies

Implemented integrations including AI search, analytics, and third-party services

Content Editor

Guide for content editors working with the demo site

Step-by-step instructions for common content editing tasks specific to the demo site

All 20 components available in the demo site and their use cases

All 24 content models available in the demo site with field descriptions

Site structure, page organization, and how pages are configured in Agility CMS

Developer

Codebase-specific documentation for developers working with this Next.js application

Codebase

Project structure, component implementations, API routes, and deployment configuration

Custom API routes including preview, revalidation, AI search, and contact endpoints

Component implementations, patterns, and reusable UI elements

Content model implementations and TypeScript interfaces

Deployment configuration, environment variables, build process, and platform setup

Project Structure

Codebase organization, directory structure, and file organization patterns

Analytics Dashboard

Analytics Integration

Audience Region System

Personalization system with query parameters for audience and region targeting

Environment Variables

Strongly typed environment configuration and required variables

Multi Locale Implementation

Internationalization setup, routing, and locale management

View Transitions

Page transition implementation using React's ViewTransition API

Agility CMS URL Patterns

URL structure for navigating the Agility CMS content manager interface

Agility Pic Component

Posthog Implementation