Modern, production-ready CMS starter built with Payload CMS 3.84.1 and Next.js 16.
- 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
| Technology | Version | Description |
|---|---|---|
| Next.js | 16.2.4 | React framework |
| Payload CMS | 3.84.1 | Headless CMS |
| Tailwind CSS | 3.4.17 | CSS framework |
| PostgreSQL | — | Database (via pg adapter) |
| TypeScript | 6.0.3 | Type safety |
| React | 19.2.5 | UI library |
| Zod | 4.x | Schema validation |
| react-hook-form | 7.x | Form handling |
git clone https://github.com/Xjectro/payload-cms-boilerplate.git
cd payload-cms-boilerplatenpm install
# or
yarn install
# or
pnpm installCopy .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}# Run database migrations
npm run payload migratenpm run seednpm run devOpen http://localhost:3000 in your browser.
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
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Check code quality |
npm run format |
Format code with Prettier |
npm run seed |
Seed the database |
npm run payload |
Payload CLI (migrate, generate…) |
The SEO module lives in src/shared/seo/ and is ready to use out of the box:
buildMetadata— generatesMetadataobjects for Next.js pagesmergeOpenGraph— 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 pagerobots.ts/sitemap.ts— auto-generated at build time
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
| Endpoint | Description |
|---|---|
/api/graphql |
GraphQL API |
/api/graphql-playground |
GraphQL Playground |
/admin |
Payload Admin Panel |
vercel deployOr 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.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Website: https://xjectro.com
- GitHub Issues: Issues page
- Payload CMS Docs: payloadcms.com/docs
MIT — see the LICENSE file for details.
Made with love by Xjectro