Payload CMS 3 integrated with the Next.js App Router, sharing TypeScript types between frontend and backend
Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2 — Next.js Starter Template
By Lostovayne
A full-stack TypeScript starter template based on Payload CMS 3 and the Next.js App Router, integrating Turso database and Cloudflare R2 storage, with Docker and GitHub Actions configurations included.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Turso (libSQL) as the database and Cloudflare R2 as S3-compatible file storage
Built-in Users authentication collection and Media upload collection, with JWT login support
Auto-generated REST and GraphQL APIs, plus a Lexical rich text editor
Includes multi-stage Docker builds and GitHub Actions CI/CD workflows
Configured with Vitest integration tests and Playwright end-to-end tests
Template Details
This is a full-stack starter template that embeds Payload CMS 3 as a headless content management system into a Next.js App Router project, with the frontend and backend sharing a single TypeScript codebase. The data layer uses Turso (libSQL) as a SQLite-compatible database, and file uploads are stored via Cloudflare R2's S3-compatible interface. The template includes two collections, Users and Media, and provides JWT user authentication, a Lexical rich text editor, and auto-generated REST and GraphQL APIs.
On the engineering side, the repository includes multi-stage Docker builds, GitHub Actions workflows, Prettier formatting, automated dependency updates, and configurations for Vitest integration tests and Playwright end-to-end tests. The project structure separates the public frontend from the Payload admin panel, and comes with documentation covering quick start, development, architecture, commands, and CI/CD.
Before use, you need to set up your own Turso database and Cloudflare R2 bucket and configure the keys in .env; the template itself does not include these external services, nor does it imply that all configurations required for a production environment are already in place.
Is it right for your project?
Use Cases
- Quickly building a content-driven website or application with an admin panel
- Full-stack projects that want to use Turso as an edge SQLite database
- Storing media files with Cloudflare R2 and needing an S3-compatible interface
- Teams that need Docker images and GitHub Actions automation workflows
- Those who want to see how Payload CMS and the Next.js App Router are integrated
Suitable For
- Full-stack developers familiar with TypeScript and Next.js
- Content projects that need a headless CMS admin panel
- Teams planning to deploy to Vercel, Docker, or Railway/Render/Fly.io
- Developers who want to build upon MIT-licensed code
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Create a repository via GitHub's Use this template, or clone and change the origin URL
- 2
Copy .env.example to .env and fill in PAYLOAD_SECRET, Turso, and R2 credentials
- 3
Install dependencies with pnpm install and start the development server with pnpm dev
- 4
Create an admin user on first visit to /admin
- 5
The Turso database and Cloudflare R2 bucket must be created by you; external services may incur costs
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version available in a public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- You are allowed to use, modify, commercialize, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Before use, you must create and configure a Turso database yourself, providing TURSO_DATABASE_URL and TURSO_AUTH_TOKEN; this is an external service dependency.
- File uploads depend on a Cloudflare R2 bucket, which you must create and provide R2_BUCKET_NAME, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, and R2_ENDPOINT for.
- Before running, you must copy .env.example to .env and fill in Payload, Turso, and R2 credentials; otherwise it will not start properly.
- On first visit to /admin, you need to manually create an admin user; the template does not include any preconfigured accounts.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone cannot be used to judge them.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Turso database URL
Original README
Cloudflare R2 bucket name
Original README
Edit .env with your credentials
Original README
https://github.com/Lostovayne/Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2/blob/main/LICENSEhttps://github.com/Lostovayne/Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2/blob/main/README.mdcreate your admin user on first visit
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-04. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Next.js · React
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-24
- Screenshot last checked
- 2026-10-04
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: 9ea076a427fb0d917b31a81c15b07c4e77f018ecfc81f4e6d7ee39dde9b749c3
2026-10-04T00:19:23.148Z
Source file / repository<a href="https://github.com/Gentleman-Programming/gentle-ai"> <img width="220" src="https://raw.githubusercontent.com/Gentleman-Programming/gentle-ai/main/docs/assets/brand/built-with-gentle-ai.png" alt="Built with Gentle-AI" /> </a> --- ## 🚀 Use This Template Click the **"Use this template"** button on GitHub (not git clone) to create your own repository instantly: 1. Go to [github.com/Lostovayne/Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2](https://github.com/Lostovayne/Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2) 2. Click **"Use this template"** → **"Create a new repository"** 3. Name your project and click **Create** 4. Clone your new repo and start coding: ```bash git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git cd YOUR-REPO pnpm install ``` > **Prefer cloning?** Run these commands instead: > ```bash > git clone https://github.com/Lostovayne/Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2.git > cd Payload-CMS-3-Nextjs16-Turso-Cloudflare-R2 > git remote set-url origin https://github.com/YOUR-USERNAME/YOUR-REPO.git > pnpm install > ``` --- ## ⚡ Quick Start ```bash # 1. Configure environment cp .env.example .env # Edit .env with your credentials # 2. Start development pnpm dev ``` Open `http://localhost:3000/admin` — create your admin user on first visit. ### Environment Variables | Variable | Description | How to get | |---|---|---| | `PAYLOAD_SECRET` | Encryption key (min 32 chars) | `openssl rand -base64 32` | | `TURSO_DATABASE_URL` | Turso database URL | `turso db show <db> --url` | | `TURSO_AUTH_TOKEN` | Turso auth token | `turso db tokens create <db>` | | `R2_BUCKET_NAME` | Cloudflare R2 bucket name | Cloudflare Dashboard > R2 | | `R2_ACCESS_KEY_ID` | R2 API access key | Manage R2 API Tokens | | `R2_SECRET_ACCESS_KEY` | R2 API secret key | Shown once on creation | | `R2_ENDPOINT` | R2 endpoint URL | `https://<account-id>.r2.cloudflarestorage.com` | See [docs/QUICKSTART.md](./docs/QUICKSTART.md) for step-by-step setup with Turso CLI and Cloudflare Dashboard. --- ## ✨ Features - **Payload CMS 3.80.0** — Headless CMS with full admin panel - **Next.js 16 App Router** — React 19 with server components - **Turso** — Edge SQLite database with global replication - **Cloudflare R2** — S3-compatible storage (zero egress fees) - **Lexical Editor** — Rich text editing - **JWT Authentication** — Built-in user management - **REST + GraphQL** — Auto-generated API endpoints - **TypeScript** — End-to-end type safety - **Docker** — Multi-stage optimized build - **CI/CD** — GitHub Actions, auto-format, security audit - **Testing** — Vitest (integration) + Playwright (E2E) --- ## 🛠 Tech Stack | Technology | Version | Purpose | |---|---|---| | Payload CMS | 3.80.0 | Headless CMS | | Next.js | 16.2 | React framework | | React | 19.2.3 | UI library | | TypeScript | 5.9.3 | Type safety | | Turso / libSQL | 0.15.15 | Edge database | | Cloudflare R2 | — | File storage | | Drizzle Kit | 0.31.10 | Database migrations | --- ## 💻 Development ```bash pnpm dev # Start dev server (http://localhost:3000) pnpm devsafe # Start dev server (clean cache) pnpm build # Build for production pnpm lint # Run ESLint pnpm format # Format with Prettier pnpm test # Run all tests pnpm generate:types # Regenerate TypeScript types ``` ### Project Structure ``` src/ ├── app/ │ ├── (frontend)/ # Public frontend │ ├── (payload)/ # Admin panel │ ├── api/health/ # Health check endpoint │ └── my-route/ # Example custom API route ├── collections/ │ ├── Users.ts # User collection with auth │ └── Media.ts # File uploads (stored in R2) ├── payload.config.ts # Central Payload configuration └── payload-types.ts # Auto-generated TypeScript types ``` --- ## 🚀 Deployment | Platform | Guide | |---|---| | **Vercel** (recommended) | [docs/VERCEL.md](./docs/VERCEL.md) | | **Docker** | `docker-compose up -d` | | **Railway / Render / Fly.io** | [docs/DOCKER.md](./docs/DOCKER.md) | See [docs/DOCKER.md](./docs/DOCKER.md) for detailed deployment guides. --- ## 📚 Documentation | Guide | Description | |---|---| | [QUICKSTART.md](./docs/QUICKSTART.md) | Get running in 5 minutes | | [DEVELOPMENT.md](./docs/DEVELOPMENT.md) | Create collections, fields, customize | | [ARCHITECTURE.md](./docs/ARCHITECTURE.md) | Technical architecture | | [COMMANDS.md](./docs/COMMANDS.md) | Complete command reference | | [CI_CD.md](./docs/CI_CD.md) | GitHub Actions and automation | --- ## 🤝 Contributing Contributions are welcome! Read [CONTRIBUTING.md](./CONTRIBUTING.md) first. 1. Fork the repository 2. Create a branch (`git checkout -b feature/my-feature`) 3. Commit (`git commit -m 'feat: add my feature'`) 4. Push (`git push origin feature/my-feature`) 5. Open a Pull Request --- ## 🔒 Security Report vulnerabilities via [SECURITY.md](./SECURITY.md). --- ## 📄 License [MIT](LICENSE)
Explore similar templates
Compare previews and descriptions within the same stack and category.

Next.js SaaS Starter
The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.
Next.js · SaaS

Next.js Commerce
Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.
Next.js · E-commerce

Next-js-Boilerplate
A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.
Next.js · Starter

tailwind-nextjs-starter-blog
A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.
Next.js · Blog

next-forge
next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.
Next.js · Starter

SaaS-Boilerplate
SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.
Next.js · SaaS
