Agility CMS

Developer

Demo Site: Component Implementations

This guide documents the 20 Agility components implemented in the Demo Site, including patterns, code examples, and usage.

Component Overview

The Demo Site includes 20 registered components organized by category:

Content Display (4)

  • PostListing, PostDetails, Testimonials, TeamListing

Hero Components (4)

  • Hero, BackgroundHero, ABTestHero, PersonalizedBackgroundHero

Interactive (3)

  • Carousel, ContactUs, FrequentlyAskedQuestions

Layout (3)

  • BentoSection, LogoStrip, PersonalizedLogoStrip

Data Display (3)

  • CompanyStats, PricingCards, PricingTable

Navigation (1)

  • Header

Utility (2)

  • RichTextArea, Testimonial (single)

Component Registration

All components are registered in src/components/agility-components/index.ts:

Note: The variable name allModules and property module are from the Next.js SDK's legacy terminology. In Agility CMS, these are now called "components" and "component models."

Component Patterns

Pattern 1: Simple Component

Example: Hero

Pattern 2: List Component

Example: PostListing

Pattern 3: Nested Content Component

Example: BentoSection

Pattern 4: Server + Client Split

Example: ContactUs

Pattern 5: Personalization Component

Example: PersonalizedBackgroundHero

Key Components

BentoSection

Purpose: Animated grid of cards

Pattern: Nested content fetching

Key Features:

  • Fetches parent section content
  • Fetches nested Bento Cards separately
  • Animated grid layout
  • Staggered animations

PostListing

Purpose: Display blog post listings

Pattern: Content list with filtering

Key Features:

  • Fetches Posts content list
  • Supports category filtering
  • Pagination support
  • SEO-friendly URLs

PostDetails

Purpose: Display individual blog post

Pattern: Single content item

Key Features:

  • Fetches single Post content item
  • Displays author, category, tags
  • Rich text rendering
  • Related posts

ABTestHero

Purpose: A/B testing hero section

Pattern: Server + Client with PostHog

Key Features:

  • PostHog feature flag integration
  • Partial Prerendering (PPR) support
  • Server-side variant selection
  • Analytics tracking

PersonalizedBackgroundHero

Purpose: Audience/region-aware hero

Pattern: Personalization with filtering

Key Features:

  • Audience-based content filtering
  • Region-based content filtering
  • Fallback to default content
  • URL parameter-based targeting

Component Best Practices

  1. Type Safety: Always use TypeScript interfaces
  2. Error Handling: Handle missing content gracefully
  3. Performance: Use priority for above-the-fold images
  4. Accessibility: Include alt text and semantic HTML
  5. SEO: Use proper heading hierarchy

Next: API Routes - Custom API routes