Next.jsReactStarter

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.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-04View source

What stands out

A quick read of the recorded project description.

01

Payload CMS 3 integrated with the Next.js App Router, sharing TypeScript types between frontend and backend

02

Turso (libSQL) as the database and Cloudflare R2 as S3-compatible file storage

03

Built-in Users authentication collection and Media upload collection, with JWT login support

04

Auto-generated REST and GraphQL APIs, plus a Lexical rich text editor

05

Includes multi-stage Docker builds and GitHub Actions CI/CD workflows

06

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.

Next.jsStarter

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. 1

    Create a repository via GitHub's Use this template, or clone and change the origin URL

  2. 2

    Copy .env.example to .env and fill in PAYLOAD_SECRET, Turso, and R2 credentials

  3. 3

    Install dependencies with pnpm install and start the development server with pnpm dev

  4. 4

    Create an admin user on first visit to /admin

  5. 5

    The Turso database and Cloudflare R2 bucket must be created by you; external services may incur costs

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This 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

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)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.