Payload CMS Boilerplate

Modern, production-ready CMS starter built with Payload CMS 3.84.1 and Next.js 16.

Features

• Modern UI/UX — Tailwind CSS, Radix UI, shadcn/ui primitives
• Responsive Design — Mobile-first layout with header/footer components
• Dark/Light Mode — CSS variable-based theme system
• Rich Text Editor — Lexical-powered rich text with React renderer
• Media Management — Image & video field components with S3 / Vercel Blob storage adapters
• SEO Module — buildMetadata, mergeOpenGraph, JSON-LD generators, robots.ts, sitemap.ts
• Official Payload Plugins — SEO, Redirects, Live Preview, Payload Cloud
• Forms — react-hook-form + Zod validation
• Vercel Analytics — Built-in with zero config
• GraphQL API — Endpoint + Playground included
• TypeScript — Strict typing throughout

Technologies

Quick Start

1. Clone the Project

git clone https://github.com/Xjectro/payload-cms-boilerplate.git
cd payload-cms-boilerplate

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Environment Setup

Copy .env.example to .env and fill in the required variables:

cp .env.example .env

# Database Configuration
DATABASE_URL=postgres://postgres:<password>@127.0.0.1:5432/payload_cms_boilerplate

# Application Secrets
PAYLOAD_SECRET=YOUR_SECRET_HERE

# Site
APP_URL=http://localhost:3000
APP_TITLE=Your Site Name

# Environment Variables for Next.js
NEXT_PUBLIC_URL=${APP_URL}
NEXT_PUBLIC_TITLE=${APP_TITLE}

4. Database Setup

# Run database migrations
npm run payload migrate

5. Seed the Database (optional)

npm run seed

6. Start the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

payload-cms-boilerplate/
├── src/
│   ├── app/
│   │   ├── (payload)/
│   │   │   ├── admin/
│   │   │   │   ├── [[...segments]]/
│   │   │   │   │   ├── not-found.tsx
│   │   │   │   │   └── page.tsx
│   │   │   │   └── importMap.js
│   │   │   ├── api/
│   │   │   │   ├── [...slug]/
│   │   │   │   │   └── route.ts
│   │   │   │   ├── graphql/
│   │   │   │   │   └── route.ts
│   │   │   │   └── graphql-playground/
│   │   │   │       └── route.ts
│   │   │   ├── custom.scss
│   │   │   └── layout.tsx
│   │   ├── (public)/
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   │   └── template.tsx
│   │   ├── robots.ts
│   │   └── sitemap.ts
│   ├── collections/
│   │   ├── Media/
│   │   │   └── index.ts
│   │   └── Users/
│   │       └── index.ts
│   ├── features/
│   │   └── example/
│   │       ├── components/
│   │       ├── hooks/
│   │       └── utils/
│   ├── payload/
│   │   ├── components/
│   │   │   ├── fields/
│   │   │   │   └── media/
│   │   │   │       ├── image-media/
│   │   │   │       │   └── index.tsx
│   │   │   │       ├── video-media/
│   │   │   │       │   └── index.tsx
│   │   │   │       ├── index.tsx
│   │   │   │       └── types.ts
│   │   │   └── rich-text.tsx
│   │   ├── utils/
│   │   │   └── payload-hooks/
│   │   │       └── access.ts
│   │   ├── payload.config.ts
│   │   ├── payload-types.ts
│   │   └── seed.ts
│   ├── shared/
│   │   ├── lib/
│   │   │   └── utils.ts
│   │   ├── providers/
│   │   │   ├── client-provider.tsx
│   │   │   └── server-provider.tsx
│   │   ├── seo/
│   │   │   ├── components/
│   │   │   │   └── home-structured-data.tsx
│   │   │   ├── utils/
│   │   │   │   ├── json-ld/
│   │   │   │   │   ├── article.ts
│   │   │   │   │   ├── breadcrumb.ts
│   │   │   │   │   ├── event.ts
│   │   │   │   │   ├── faq.ts
│   │   │   │   │   ├── helpers.ts
│   │   │   │   │   ├── how-to.ts
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── item-list.ts
│   │   │   │   │   ├── local-business.ts
│   │   │   │   │   ├── organization.ts
│   │   │   │   │   ├── person.ts
│   │   │   │   │   ├── product.ts
│   │   │   │   │   ├── types.ts
│   │   │   │   │   ├── video.ts
│   │   │   │   │   ├── webpage.ts
│   │   │   │   │   └── website.ts
│   │   │   │   ├── metadata.ts
│   │   │   │   └── open-graph.ts
│   │   │   └── index.ts
│   │   └── ui/
│   │       ├── layout/
│   │       │   ├── header.tsx
│   │       │   └── footer.tsx
│   │       ├── primitives/
│   │       │   ├── alert.tsx
│   │       │   ├── badge.tsx
│   │       │   ├── button.tsx
│   │       │   ├── checkbox.tsx
│   │       │   ├── form.tsx
│   │       │   ├── input.tsx
│   │       │   └── label.tsx
│   │       └── react/
│   │           └── design-system.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── themes.css
│   └── css.d.ts
├── public/
│   ├── favicon.ico
│   └── opengraph-image.webp
├── .env.example
├── .prettierrc.json
├── components.json
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

Available Commands

SEO Module

The SEO module lives in src/shared/seo/ and is ready to use out of the box:

• buildMetadata — generates Metadata objects for Next.js pages
• mergeOpenGraph — merges Open Graph tags with site defaults
• JSON-LD generators — Article, BreadcrumbList, Event, FAQ, HowTo, ItemList, LocalBusiness, Organization, Person, Product, VideoObject, WebPage, WebSite
• HomeStructuredData — drop-in component for the home page
• robots.ts / sitemap.ts — auto-generated at build time

Storage Adapters

Two storage adapters are pre-installed and can be activated in payload.config.ts:

• AWS S3 — @payloadcms/storage-s3
• Vercel Blob — @payloadcms/storage-vercel-blob

API Endpoints

Deployment

Vercel

vercel deploy

Or connect the GitHub repository in the Vercel dashboard for automatic deploys on push.

Set all environment variables from .env.example in your Vercel project settings before deploying.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Support

• Website: https://xjectro.com
• GitHub Issues: Issues page
• Payload CMS Docs: payloadcms.com/docs

License

MIT — see the LICENSE file for details.