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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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
