Payload CMS website template providing production-ready starter for content-driven websites, blogs, and portfolios with Next.js App Router, MongoDB, Lexical editor, SEO optimization, draft/live preview, and search. Use when building personal or enterprise-grade websites requiring publication workflows, layout builders, multi-page sites, or integrating Payload CMS with modern frontend technologies.
Payload CMS website template providing production-ready starter for content-driven websites, blogs, and portfolios with Next.js App Router, MongoDB, Lexical editor, SEO optimization, draft/live preview, and search. Use when building personal or enterprise-grade websites requiring publication workflows, layout builders, multi-page sites, or integrating Payload CMS with modern frontend technologies.
The Payload CMS Website Template is the official production-ready starter for building content-driven websites, blogs, and portfolios — from small personal sites to enterprise-grade platforms. It combines Payload 3.x's headless CMS with Next.js 16 App Router, providing a fully integrated backend, admin panel, and frontend in a single deployable application.
The template ships with five pre-configured collections (Pages, Posts, Media, Categories, Users), two globals (Header, Footer), a block-based layout builder, Lexical rich text editor, draft and live preview workflows, SEO plugin integration, full-text search, URL redirects, form builder, scheduled publishing via jobs queue, and on-demand Next.js cache revalidation.
Key differentiators from the blank template:
Layout Builder — composable page sections using blocks (Hero, Content, Media, Call To Action, Archive)
Publication Workflow — draft/published states with versions, autosave, and scheduled publishing
Live Preview — real-time preview of drafts in the admin panel with SSR rendering
On-Demand Revalidation — automatic Next.js cache invalidation on content changes
SEO Plugin — meta title, description, image, and OG preview from the admin
Search Plugin — SSR-powered full-text search indexed from posts
Redirects Plugin — admin-managed URL redirects with proper HTTP status codes
Form Builder Plugin — configurable contact and feedback forms
Building a personal or enterprise-grade website, blog, or portfolio
Creating a content publishing platform with a fully featured publication workflow
Starting a new Payload project with pre-built collections, layout builder, and plugins
Implementing draft preview and live preview in a Next.js application
Setting up SEO-managed pages with admin-controlled meta data
Adding full-text search to a content-driven website
Migrating an existing site with URL redirect management
Building contact forms or feedback forms from the CMS admin
Core Concepts
Template Architecture
The template follows Payload's fullstack pattern — backend (Payload CMS) and frontend (Next.js) share a single instance. The src/app directory is split into two route groups:
— Admin panel and API routes (auto-generated by Payload)
(payload)/
(frontend)/ — Public-facing website pages built with Next.js App Router
Collections
Five collections form the data model:
Pages — Layout builder enabled, draft/published, SEO tab, slug-based routing at /{slug}. Home page uses slug home.
Posts — Rich text content with Lexical, hero image, related posts, categories, draft/published, SEO tab. Routed at /posts/{slug}.
Media — Upload-enabled collection with pre-configured image sizes (thumbnail, square, small, medium, large, xlarge, og), focal point support, folder organization, and caption via rich text.
Categories — Taxonomy for grouping posts. Supports nesting via the nested-docs plugin. Public read access.
Users — Auth-enabled collection controlling admin panel access. Name field only beyond email/password.
Globals
Two globals manage site-wide content:
Header — Navigation items (array of links, max 6 rows). Public read access.
Footer — Footer navigation items (same structure as header). Public read access.
Both globals have afterChange hooks that trigger on-demand revalidation so the frontend updates immediately.
Layout Builder
Pages use a blocks field for composable layouts. Available blocks:
Hero — Select group with type options (none, highImpact, mediumImpact, lowImpact), rich text content, link group, and optional media.
Content — Standard content block with columns and rich text.
MediaBlock — Renders media from the Media collection with caption support.
CallToAction — Promotional section with heading, rich text, and links.
Archive — Lists posts by collection or individual selection, filterable by category with configurable limit.
Form — Form builder block for embedding forms on pages.
Posts use a different content model — Lexical rich text with inline blocks (Banner, Code, MediaBlock) rather than the page-level layout builder.
Access Control Pattern
The template uses three access control functions:
anyone — Returns true (public access, used for Media and Categories read)
authenticated — Returns Boolean(user) (logged-in users only, used for create/update/delete)
authenticatedOrPublished — Returns true for logged-in users, otherwise filters by _status: { equals: 'published' } (used for Pages and Posts read)
Plugins
Five official plugins are configured in src/plugins/index.ts:
redirectsPlugin — Manages URL redirects for pages and posts collections, with afterChange revalidation hook
nestedDocsPlugin — Enables hierarchical nesting for categories, generates nested URLs from slug chains
seoPlugin — Provides meta title/description/image fields with generate functions for automatic SEO data
formBuilderPlugin — Creates form definitions and submissions, with payment disabled and Lexical editor for confirmation messages
searchPlugin — Indexes posts for full-text search with beforeSync hook to populate categories and metadata
For Postgres with migrations, run pnpm payload migrate:create locally and pnpm payload migrate on deploy. Set push: false for production databases.
Seed Data
Click "seed database" from the admin panel to populate Pages, Posts, and Categories with sample content. This also creates a demo author account (demo-author@payloadcms.com / password). Seeding drops and recreates the database — use only on fresh projects.
Collections and Data Model: Complete reference for Pages, Posts, Media, Categories, and Users collections including field definitions, access control, hooks, and versioning configuration → Collections and Data Model
Layout Builder and Blocks: Block-based page composition with Hero types, Content columns, Archive filtering, Form embedding, and the RenderBlocks dispatcher pattern → Layout Builder and Blocks
Plugins Configuration: Detailed setup for SEO, Search, Redirects, Form Builder, and Nested Docs plugins including field overrides, sync hooks, and generate functions → Plugins Configuration
Frontend Architecture: Next.js App Router patterns including draft mode integration, React cache for queries, static params generation, metadata API, sitemaps, and the frontend layout structure → Frontend Architecture
Draft Preview and Live Preview: Draft preview URL generation, preview endpoint routing, live preview with SSR breakpoints, autosave configuration, and scheduled publishing → Draft Preview and Live Preview
Deployment and Production: Vercel deployment with Postgres adapter, self-hosting patterns, Docker multi-stage builds, cache strategies, cron configuration for scheduled jobs, and migration management → Deployment and Production
