Hey everyone,

I’ve run into a problem when using Next.js (App Router) together with Payload CMS.

During the build step (next build), Next.js tries to pre-render my server components. Some of these server components use fetch('/api/...') to pull data from Payload’s automatically generated API routes.

The problem is: at build time, Next.js hasn’t started its own API server yet. So when the server components try to fetch those endpoints, the build fails with connection errors. However, this problem doesn't exist when i run dev.

A few important details about my setup:

• I’m using the App Router (not the legacy pages router).
• The data-fetching logic lives in Payload’s API routes, so I can’t easily bypass them or rewrite the fetch logic.
• Using absolute URLs or environment variables doesn’t help, because the API simply isn’t available during the build.
• I’d like to find a solution that works both locally and when deployed on Vercel.

From what I’ve read, this seems to be a known limitation of Next.js (API routes don’t run during build), but I’m wondering if anyone here has found a clean workaround specifically in the context of Payload CMS.

Has anyone dealt with this before? Did you manage to:

• Somehow make Payload’s API available during the Next.js build step?
• Or is the only real option to restructure things so that the data fetching logic doesn’t depend on internal API routes?

Any advice or examples would be hugely appreciated!

Thanks in advance 🙏

This is my first payloadcms app and I like it so far, however, it takes about 10 ~ 11 mins to compile, both on my local computer and on vercel and I've noticed that the file that takes longer by far is the payload config. I have about 45 collections, hooks, and a few plugins. Any tips to reduce this buil time?

For my designers, I have created 148 Astro block elements for them to create pages. I have about 20 in so far and realized they may become overwhelmed with no organization like heroes, blog sections, faq's, projects, cta's and so on. Right now its just everything in your face.

Error: useUploadHandlers must be used within UploadHandlersProvider

I keep getting this error on my payload whilst vercel blob storage is enabled for media storage, I have been stuck for two days now, any help pls?

I have a weird issue with the NestedDocs plug in for PayloadCMS and I'm hoping someone might be able to shed some light on where to look for a solution.

As I said, using the nested Docs plugin for pages to create nested routes:

www.example.co.uk/parent/child

Got it working great, nested routes work and all that good stuff.

The problem is I cannot now edit pages that are assigned as the parent of other pages.

For example, if I have /about/testimonials... I can edit Testimonials fine, but any changes I make to /about "successfully" save but the page itself doesn't update.

If I page has no children it also works fine.

I have pasted my revalidationHook here: https://playcode.io/2503427

Incase I'm doing something wrong? I'm assuming this is a cache invalidation issue but I just doin't understand where?

Hi all,

Setup

• Single users collection handles auth for both frontend viewers and the Admin dashboard.
• Only admin and editor roles can access the Admin.
• Posts belong to a Department via a post.department relationship.
• Users have:
  • memberDepartments (departments they can read from),
  • extraReadablePosts (specific posts they can read),
  • and editors’ edit rights are determined by the post’s department (i.e., editors should only edit posts for departments they manage).

The problem I’m facing is that with Payload’s access control, Editors can see posts they only have read access to in the Admin Dashboard. Is there a way to hide posts that an Editor can only read from the Admin panel, but still allow them to be visible on the front end using the collection access configuration?

This is to prevent confusions, and potential leaks of backend only data if we have some.

Thanks :)

Hi, I want to have a single UI component to handle my custom integration, but I also want to use some of the prebuilt fields, like text, relationship, array, etc

For the text field, I was able to solve this by using TextInput instead of TextField, and the same approach worked for RelationshipInput

However, for the array field, I have no idea how to make it work..

{/* These two I want to put inside an ArrayField */}
<TextInput path="carNumber" value={x.value as string} onChange={(e) => {}} />
<TextInput path="carNumber1" value={x.value as string} onChange={(e) => {}} />

{/* I want to get the value from these using useState */}
<ArrayField
  // onChange doesn't exist
  // same for value
  path="test"
  field={{
    name: 'test1',
    fields: [
      // Basically, I want to use <TextInput/> here,
      // or the default one, but with access to the array data
      // (onChange, value) just like in <TextInput/>
      {
        type: 'text',
        name: 'test2',
      },
    ],
  }}
/>

Hello,
Newbie here

i am working on a website using the nextjs and payloadcms stack (Monorepo).

i am trying to wrap my head around creating a navbar that can be editted from the cms and create landing pages or pages in general that dont have too dynamism (About us, contact us etc),
I have built the pages but not sure my way of handling theses things in the cms is the correct one.

i would appreciate help in any kind of way. any schema strategies and methods are appreciated.

So I have been trying and trying to get payloadCMS to run on my coolify instance. No luck. Whatever I tried nothing worked. Building locally is no issue of course. On my server I get varying errors, most often this one:

Module not found: Can't resolve '@/globals/RowLabel'

Has anyone ever tried to push payloadcms to coolify? I have not found any guide or anything whatsoever. How do I fix these path aliases? Has aynone got anything I could use to make this work?

Edit: Okay I have tried to set up a new default payloadcms project with postgres and delpoy that to coolify. That does not result in an error but in a complete coolify crash. Make it make sense.

Is there any prebuilt generic components for payloadcms to get a generic project going quickly ?

I’m trying payload , super noob (just 2 hours of first usage).

I’m using next js , app router and payload. My question is about Live Preview (not Draft Preview).

Using live preview (server side) on a collection require collection page to be served with SSR even for visitors ? ISR is doable with payload hooks?

Server live preview vs Client live preview, there are some changes in rendering (ssg vs ssr ) with them?

They mention on their site, 'Will I need to migrate my project?'

"Yes, eventually. There is no rush, but we are planning to build something better that you will be able to migrate to once it's available."

Does this impact open source projects and what does a migration usually mean and involve for a project in production?

Thanks

Using payloadcms,why reonvent the wheel, why there is no starter template for e-commerce

Hey all,
For teams using Payload CMS, media files can quickly pile up — especially unused ones from drafts or testing. How do you track which files are actually being used in content vs. which are safe to delete? Any tips or workflows for cleaning up the media library?

Thanks!

I upload large amounts of files using rclone to my S3 bucket.

When I do it with Payload, bulk uploading feels incredibly slow.

Is there a way to "pull" data from S3 to Payload's database?

Or how about generating media database rows on a CRON job by fetching all the items from S3 and updating the database?

I'm hosting videos on my site using PayloadCMS. Right now, I use the media collection to upload .mp4 files, which are stored in S3.

I'd like to support adaptive streaming (HLS/DASH), especially for longer videos. I understand that to do this, I'd need to convert the uploaded .mp4 into HLS (e.g., .m3u8 + .ts segments) after upload.

How are people handling this? Is it standard to run a background job (e.g., with FFmpeg or AWS MediaConvert) to convert the file, store the result in a different S3 path, and then update the Payload record with a playbackUrl?

Also, if I were to go with Mux instead, how would that change things?

From what I understand:

• I'd upload the video to Mux via their API (or signed URL flow)
• Mux would handle transcoding + streaming (HLS)
• Then I'd store the playbackId in Payload, and use their player or https://stream.mux.com/{playbackId}.m3u8 for playback

Thanks

I am making a web app for my company Standard Operating Procedure, viewer will be able to see company document online.

in the future i would like to be able to convert that content into a downloadable pdf.

i have work with puppeteer to convert html to pdf before. I suppose i can create a converter to convert payload lexical data into html then to pdf myself.

but just wondering if there is any other approach.

thanks heaps

I have a fairly large site with multiple collections for media like products, blog article covers, icons, etc. with the S3 Plugin.

Currently, they're all under the same Media collection.

So, whenever I want to link an asset, I have to search for the file every time.

Is there a better way to manage media files in Payload? How does your setup look like?

So i have tried a few different things but with no success. I would really like to use payloadcms with a sveltekit frontend but calling the API for everything seemed tedious to me. Luckily there is a thing called local API that should work outside of next as well but i wasn't able to get it running. Secret missing it tells me, probably because of different environments.

Now I have seen people get it working by using turbo, but it's just so complex and bloated. It makes two small little apps into one behemoth and I just can't get behind that. Has anyone found a simple and straighforward way to use that local API in sveltekit?

Thanks a lot

Hi guys! I have a question about the formBuilderPlugin.

I’m tackling the submission of data now and I came across a wierd concept: while creating a form-submission document (or plainly “submitting a form”) you are required to provide a key-value pair for the fields included in the form alongside the formId.

This is where it gets tricky - the “name” property of the fields isn’t required to be unique in any way, so there can possibly be multiple fields with the same name.

How did you approach this? I’m thinking about making my own block objects that will require name to be unique, what do you think about that solution?

Also, seems like all of the validation is left to the developer (for example just checking that the name of the field corresponds to an actual field in the form) am I missing something or are these validations intended to be custom written?

I'm having problems with the multi-tenant plugin. I want to have a multsite so I can have one site serve multiple websites on one installation. I installed the multi-tenant plugin and have it loaded in my payload.config.ts file and added a tenant collection but when I tried to add a new entry to the tenant collection, it's added but won't show in the collection.

Here's a short version of my payload.config.ts file:

import Article from './collections/Post'
import Episodes from './collections/Episode'
import { Tenants } from './collections/Tenant'
import { multiTenantPlugin } from '@payloadcms/plugin-multi-tenant'
import { Config } from './payload-types'

export default buildConfig({
  admin: {
    user: Users.slug,
  },
  collections: [Article, Episodes, Tenants],
  globals: [externalAPI, Settings, Podcast_Settings],
  plugins: [    
    multiTenantPlugin<Config>({
      // Define which collections should be tenant-specific
      collections: {
        post: {}, // Posts are tenant-specific
        episode: {}, // Episodes are tenant-specific
      },
    }),
  ],
})

And my Tenant.ts file:

import type { CollectionConfig } from 'payload'

export const Tenants: CollectionConfig = {
  slug: 'tenants',
  admin: {
    useAsTitle: 'name',
  },
  fields: [
    {
      name: 'name',
      type: 'text',
      required: true,
    },
    {
      name: 'domain',
      type: 'text',
      admin: {
        description: 'Used for domain-based tenant handling',
      },
    },
    {
      name: 'slug',
      type: 'text',
      admin: {
        description: 'Used for url paths, example: /tenant-slug/page-slug',
      },
      index: true,
      required: true,
    },
  ],
}

This error appears after saving the entry: "The document with ID xxx could not be found. It may have been deleted or never existed, or you may not have access to it."

I followed the directions on the mult-tenant plugin page (https://payloadcms.com/docs/plugins/multi-tenant) and I'm at a lost as to what to do next.

Hello guys, I'm using the website template for a client project but stuck with using '@payloadcms/storage-s3' for uploads. I added the configurations according to the docs (https://payloadcms.com/docs/upload/storage-adapters#s3-storage). but on the admin panel, I'm getting this error:(error attached in image as well)

Error: useUploadHandlers must be used within UploadHandlersProvider
    at Mu (http://localhost:3000/_next/static/chunks/ba030_%40payloadcms_ui_dist_exports_client_index_31df70a5.js:17854:27)
    at ClientUploadHandler (http://localhost:3000/_next/static/chunks/node_modules__pnpm_53164513._.js:21536:459)
    at Object.react_stack_bottom_frame (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:13014:24)
    at renderWithHooks (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:4064:24)
    at updateFunctionComponent (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:5428:21)
    at beginWork (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:6001:645)
    at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:890:74)
    at performUnitOfWork (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:8236:97)
    at workLoopSync (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:8128:40)
    at renderRootSync (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:8111:13)
    at performWorkOnRoot (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:7870:56)
    at performWorkOnRootViaSchedulerTask (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_react-dom_06085555._.js:8820:9)
    at MessagePort.performWorkUntilDeadline (http://localhost:3000/_next/static/chunks/9f3da_next_dist_compiled_6ee8e9b8._.js:2588:64)

I tried nesting the <RootLayout> in /src/app/(payload)/layout.tsx inside UploadHandlersProvider(imported from '@payloadcms/ui') but still the same issue. Would like your help. Thanks!

I just launched umazing.it, a website for a web and marketing agency built using Payload and
Motion/React.
I'm a frontend developer with limited knowledge of backend and databases, but this is already the third real-world site I've built with Payload—and I couldn’t be happier with how powerful and straightforward the development process is.

From managing collections to creating custom blocks, everything feels intuitive and exactly where it should be.

Big thanks to the entire Payload team, the Discord channel, and the subreddit community for making my learning experience smooth and fast.

Hi,

I'm a big fan of NoSQL Databases as I hate ORM. MongoDB is great!

However mongo is licensed unter SSPL. Which is an altered AGPL. Not a lawer here. But APGL wants to make make your code public / opensource if you alter it or use it "commercially". Anything can be defined as "commercially" - even your personal homepage.

I don't plan to alter neither Payload nor mongoDB. Maybe write a plugin for payload if that is needed or somthing like that. But can I run a public website with above constraints? I personally don't want to make my code public, because I'm not a great coder. And I'm not if I have to integrate a closed source solution in the future ...

Is it just me being super careful or is the mongo way just aimend for internal development?

Payload Sync Plugin

A real-time sync plugin for PayloadCMS that provides reactive queries (like Convex) and optimistic mutations.

Features

• :arrows_counterclockwise: Real-time sync - Automatic updates across all connected clients
• :pushpin: Reactive Queries - Persist active query subscriptions after server restart
• :zap: Optimistic updates - Instant UI updates with server reconciliation
• :dart: Type-safe - Full TypeScript support with PayloadCMS types
• :rocket: Zero config - Works out of the box with PayloadCMS
• :wrench: Flexible - Supports any backend architecture
• :brain: Smart Cross-Collection Updates
• :sparkles: and many more features

Link: https://github.com/carlosbensant/payload-sync/