atomic-payload
The full Payload + Next.js + Tailwind starter that wires up every Atomic Payload plugin: environment setup, deployment, and optional Mux/Resend integrations.
Overview
Atomic Payload is the complete starter template that brings the whole platform together: Payload for the CMS and admin, Next.js for the frontend and API routes, and Tailwind for styling, with every Atomic Payload plugin already installed and configured. Use this guide whether you scaffolded a project with npx @pro-laico/create-atomic-payload or you're developing from the monorepo template folder.
Developing the monorepo itself? See MONOREPO.md in the repo root for structure, local dev, and per-plugin instructions.
Setup
Get required connections
Set up the two external services the template needs:
- Obtain a
MONGODB_URI. The easiest path is through Vercel for a free-tier cluster:Storage → Create Database → MongoDB Atlas. - Create a Blob store in Vercel (
Storage → Create Database → Blob) and copy theBLOB_READ_WRITE_TOKENfrom.env.local.
Configure your project
Copy .env.example to .env, then add the MongoDB URI and Blob token, and generate the Payload and Preview secrets.
# Mongo DB connection string
MONGODB_URI="mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/my_database?retryWrites=true&w=majority"
# Vercel Blob Read Write Secret
BLOB_READ_WRITE_TOKEN="vercel_blob_rw_laogivGHAOSNeoFS_KJAGsjmeHSkaLQUVhUSHmfPGIXCbHe"
# Used to encrypt JWT tokens
PAYLOAD_SECRET=524AFEAC8E77853C6AC1C2EBCB266
# Used to validate preview requests
PREVIEW_SECRET=77E41879964C5D1C251661663DCD3Create the first admin user
Start the dev server:
pnpm devOpen http://localhost:3000/admin and create the first admin user.
Once running, it's recommended to seed the database from the Seed database banner on the main admin dashboard. Seeding wipes and replaces existing data, so once you've seeded, pass enabled: false to seedPlugin() in src/plugins/index.ts to drop the seed endpoint and its dashboard banner.
Optional integrations
Deploy
Import your repo into Vercel
Create a new project in Vercel by importing your repo, but before hitting Create, point your local .env at the deployed URL so it's ready to copy into Vercel:
NEXT_PUBLIC_SERVER_URL='https://<project-name>.vercel.app'
FONT_DOWNLOAD_URL='https://<project-name>.vercel.app' # the build's font download targets thisConfigure Vercel environment variables
- Copy all environment variables above into the Vercel project settings.
- Set both
NEXT_PUBLIC_SERVER_URLandFONT_DOWNLOAD_URLto your deployed URL (e.g.https://<project-name>.vercel.app).
Deploy
Trigger a deploy and wait for the build to complete. You now have a working version of Atomic Payload.