Payload on Edge, inside your Next.js app

1. 01

   Wire uploads to Edge Storage

   Serve files from your CDN domain rather than proxying them through Payload. Uploads then never touch the VM on the way out.

   payload.config.tsCopy

   import { buildConfig } from 'payload'
   import { postgresAdapter } from '@payloadcms/db-postgres'
   import { s3Storage } from '@payloadcms/storage-s3'
   
   export default buildConfig({
     db: postgresAdapter({
       pool: { connectionString: process.env.DATABASE_URI },
     }),
     plugins: [
       s3Storage({
         collections: {
           media: {
             disablePayloadAccessControl: true,
             generateFileURL: ({ filename }) =>
               `https://media.acme.dev/${filename}`,
           },
         },
         bucket: 'acme-uploads',
         config: {
           endpoint: 'https://storage.edge.network',
           region: 'us-east-1',
           forcePathStyle: true,
           credentials: {
             accessKeyId: process.env.EDGE_KEY!,
             secretAccessKey: process.env.EDGE_SECRET!,
           },
         },
       }),
     ],
     // collections, editor, secret…
   })

2. 02

   Create the VM and database

   A Performance VM gives Next.js builds and Postgres room to breathe on the same box.

   shellCopy

   $ edge compute create --name site --size s-4vcpu-8gb \
       --image ubuntu-24 --region london --script nodejs
   $ edge storage create acme-uploads
   
   $ edge compute ssh vm-6f2d90
   $ apt install -y postgresql
   $ sudo -u postgres createdb acme

3. 03

   Build, migrate and start

   Run migrations before each start so the schema in code and the database never disagree.

   shellCopy

   $ rsync -a --exclude node_modules ./ root@<vm-ip>:/srv/site/
   $ ssh root@<vm-ip>
   $ cd /srv/site && pnpm install --frozen-lockfile
   $ pnpm payload migrate && pnpm build
   $ pm2 start pnpm --name site -- start

4. 04

   Put the CDN in front

   One domain for the app, one for uploads with image transforms switched on.

   shellCopy

   $ edge cdn create --name acme-site
   $ edge cdn domains add cdn-a1b2c3 \
       --domain acme.dev --origin https://<vm-ip>
   $ edge cdn domains add cdn-a1b2c3 \
       --domain media.acme.dev --jit-image \
       --origin-type storage --storage-bucket acme-uploads

5. 05

   Query with the Local API

   Same process, same VM: server components read straight from the database with no HTTP hop.

   app/(frontend)/page.tsxCopy

   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} />
   }

Prefer to hand it off? Give the job to your AI agent or have our engineers do it.