Building a Full CMS with Prisma and Next.js: Lessons from Production

After building CMS systems for multiple production applications, we've distilled our approach into a proven pattern that balances flexibility with simplicity. Here's what we've learned.

The Architecture

Our CMS follows a page-section model:

• Pages: Represent routes (home, about, services, etc.) with SEO metadata
• Sections: Individual content blocks within a page (hero, text, stats, etc.)
• Dynamic Data: JSON fields for flexible, section-specific content

This approach is more flexible than a rigid schema and more structured than a full block editor.

Database Design

model WebPage {
  slug         String   @unique
  title        String
  sections     WebSection[]
  metaTitle    String?
  metaDescription String?
  keywords     String?
}

model WebSection {
  type     String  // HERO, TEXT, STATS, SERVICES, etc.
  title    String?
  content  String? // Rich HTML
  data     String? // JSON for structured data
  sortOrder Int
}

Section Renderer Pattern

The key insight is using a single SectionRenderer component that switches on the section type:

switch (section.type) {
  case "HERO": return <HeroSection section={section} />;
  case "SERVICES": return <ServicesSection />;
  // ... etc
}

Each section component is responsible for its own data fetching (using React Server Components) and rendering.

SEO Implementation

Every page needs:

• Unique meta title and description
• Open Graph tags for social sharing
• JSON-LD structured data
• Dynamic sitemap generation
• Canonical URLs

In Next.js 14, the generateMetadata() function makes this trivial for dynamic routes.

Blog System

We added a full blog system with:

• Categories and tags (many-to-many)
• Featured posts
• Reading time calculation
• Comment system with moderation
• RSS feed and sitemap integration

Admin Interface

The admin panel uses the same Next.js app with role-based access. Key features:

• Drag-and-drop section reordering
• Rich text editor for content sections
• Preview mode before publishing
• Image upload with optimization
• SEO score indicators

Performance Results

With this architecture, we consistently achieve:

• Lighthouse scores of 95+ across all metrics
• Sub-500ms page loads (with ISR caching)
• Zero cumulative layout shift
• Fully accessible (WCAG 2.1 AA)

Conclusion

A well-designed CMS doesn't need to be complex. The page-section model with JSON data fields provides enough flexibility for most business websites while keeping the codebase maintainable. Start simple, add complexity only when needed.