Edge
Payload logo

For Payload

Payload on Edge,
Next.js-ready

The TypeScript-first headless CMS that lives inside your Next.js app — running on a real VM with S3-compatible uploads and a global CDN. Schema in code, content in your DB, you in control.

# payload.config.ts — Edge Storage

import { s3Storage } from '@payloadcms/storage-s3'

export default buildConfig({

plugins: [

s3Storage({

collections: { media: true },

bucket: 'payload-uploads',

config: {

endpoint: 'https://storage.edge.run',

credentials: { ... },

},

}),

],

})

Why Payload teams pick Edge

A real VM means Payload runs the same as it does on your laptop. No serverless cold starts, no edge runtime restrictions.

TypeScript-first, code-defined

Define collections, fields and access control in TypeScript. No clicky-clicky admin builder — your CMS schema lives in the repo, version-controlled.

Embed inside Next.js, or stand-alone

Run Payload as part of a Next.js app on a single Edge VM, or split the admin and front-end across separate VMs. Both patterns are first-class.

S3 plugin for uploads

Drop in `@payloadcms/storage-s3` pointing at Edge Storage. Uploads, generated image sizes and exports all live in a durable bucket.

MongoDB or Postgres, your choice

Run either on the same VM for small projects or split onto a dedicated database VM with private networking for serious scale.

Global CDN for the API

Cache the public REST/GraphQL responses at the Edge CDN with zero egress fees. Your origin VM sees only authenticated traffic.

Agent-deployable

Tell the Edge agentic API to deploy your Payload + Next.js app to a domain — VM, DNS, CDN, SSL and storage bucket all wired up.

Reference architecture

How Payload maps to Edge

Embedded in a Next.js app on a single VM, or split CMS / front-end across two VMs for independent scale. Both work the same way under the hood.

Compute

Runs Payload (Node.js) + your DB (Mongo or Postgres) on a VM

Storage

S3-compatible bucket for the upload collections

CDN

Caches the front-end and public API; admin UI hits origin

Image Optimization

Optional: replace built-in resize with edge transforms via custom upload handler

DNS

Anycast DNS for the apex, www and any preview branches

# Next.js app pulling from Payload (same VM)

import { getPayload } from 'payload'

import config from '@payload-config'

export default async function Page() {

const payload = await getPayload({ config })

const posts = await payload.find({

collection: 'posts',

})

return <PostList posts={posts.docs} />

}

Common questions

Embedded in Next.js or standalone?

Either. Embedded means a single VM serves both the Payload admin (`/admin`) and your Next.js front-end. Standalone means separate VMs for the CMS API and the front-end — useful when scaling independently or sharing one CMS across multiple apps.

MongoDB or Postgres?

Postgres for relational-heavy schemas and existing Postgres ops experience. MongoDB for document-heavy content and flexible field schemas. Both are first-class in Payload — pick what your team knows.

How does this compare to Payload Cloud?

Same software, you control the host. Self-hosting on Edge gives you predictable bills, custom plugins and the ability to colocate Payload with the rest of your infrastructure.

Can I deploy via Docker?

Yes — Payload runs cleanly in a Docker container. See the Docker stack page for the bootstrap pattern, or use plain Node + systemd for a leaner setup.

By Stack

Other stacks on Edge

View all stacks →

Ship Payload on Edge

30-day trial. Pair with our Next.js stack page for the full TypeScript story.