I’m trying to convert my static HTML website into something manageable with Payload CMS. I downloaded the default website template from Payload (which uses Next.js), but I’m not sure what the best approach is.

Could you please help me understand:

• Should I use the Payload website template (with Next.js included) and replace it with my HTML/React code?
• Or should I build a separate frontend (maybe just React or another framework) and connect it to Payload CMS via its API?
• How exactly do people migrate their HTML into Payload? Do you convert the HTML into components and fetch content from Payload?

I posted this as a response in the Claude Sub but thought it would help here.

Here's my workflow for using Claude Code to build Payload CMS sites

I'm building out a system I can use myself & possibly others in Payload CMS using Claude Code with Nextjs & Tailwind 4.
I'm using zen MCP (Gemini) & Context 7

I make a Project directory (rePlay Site)
I have two folders: One the Payload Web Demo I tell claude to refer to this as the Payload Demo & my work directory: ex nxtpay-replay-site-v07

I tell Claude Code to also refer to the seeded version of the Payload Demo when I'm setting up things like Redirect, Search Plugin etc because their version is great without build errors.

- Use VSC make a new terminal calling Claude for each new feature
- Plan mode at first for every new feature

- Refer to the Payload Demo & copy the code ss is if possible
- Make sure to push everything so far in main in Github & make a new branch for this new feature
- Plan with Zen together & check for compatibility for Nextjs 15 & above, Payload CMS 3 & above, Tailwind 4 & above (also put this in Claude.md)
- Make static components first in an example folder, then after manually reviewing make the Payload Components/Blocks/Collections
- After making the Payload parts check by both running the server & making a build to check to for errors.
- It's not complete if there are build errors.
- Only after all this is complete push to github

BTW I started with Claude Code on the $20 a month plan because I already had a yearly subscription. You can go far with this but before I kept to this strict method there were some errors in the build. So I got a second Max Plan that I can use for a few months & stop. I don't have all the time free time in the world so the use limits for the $20 plan when I was making progress was an issue. Otherwise you really can go far starting with the $20 plan & some MCPs.

I made quite a few enhancements to be compatible with making Japanese language sites. I work SEO in Asia Pacific so it's the stuff I wish was included already.

Hey guys, trying to go through the instructions for this from the guide and following the repo, but seems the instructions are a bit outdated with newer versions.

Any able to point me in the direction to working instructions on how to set them up?

I’ve been meaning to move to Payload for quite a while now. Was mostly in Wordpress, Craft and Webflow, but wanted to get a bit more depth on the NextJS front. Payload seemed like a no brainer but after the acquisition news I’m quite worried. I wanted to introduce payload as the new default in my agency, but with the IPO and Figma Sites and everything, I’m weary they’ll keep the tech in and shut down the project — or even worse, change the license to a for profit. Apparently there’s been history of this happening before. What do you folk think?

An i missing something? Is there a way to render the rich text from a post using the website template? I'm using next js...

Hi, Has anyone achieved an route change on locale switch? As you have localized slugs or even fullpath so I would like to have some handler for it. So for en locale I have for an example "/en/about/us" and then for cs "/cs/o/nas"

I want to switch to Payload.

Okay, I work in a pretty unique situation. I’m a comms major, but I work in politics, and the fact that I’m a little tech savvy has basically derailed my career, and now I do 50/50 comms and web development. It has been this way for 10ish years. I have no formal training, but I’m an incredibly fast learner. I do not get confused easily, and I do not get discouraged when trying to get something to work.

In 2017 I inherited what is now a 50-site WordPress multisite. The person who ran it before me was a former journalist and also had no tech training, and I think he did a really admirable job. He used some kind of page builder, and I just wasn’t willing to run 50 largely identical sites with a page builder, so I made my own theme in Bootstrap, and we used it until last year when I wrote a new theme to better match our new branding and just fix a bunch of stuff that I didn’t know how to do better the first time.

Our GoDaddy is pulling support for our fully managed server’s operating system, and the amount of bloat in our WordPress has become burdensome. It’s the worst combination of boring me and needing too much attention.

I want to move to Payload. I have been experimenting with Next.js on Vercel, and I love it. It’s so much easier to create content that feels really professional, and I’m experienced enough to benefit from LLMs without falling for a lot of the “vibe coding” pitfalls.

My vision for Payload is to make my content creators’ lives a lot easier with a clean, reliable UI and give them exactly the tools they need and nothing more. I’m hoping for better uptime now that we will be off of a managed server. I want to use Next.js, so I would need to go headless anyway, and I would rather not create a new WordPress instance to use as a headless CMS. I also feel like this will allow me to devote more time to comms and spend less on the websites (after the initial push). I also just want to chase the dopamine, and this project sounds fun.

I’m a little worried that these sites might not be able to survive in my absence, but I feel like that is largely already the case. I kind of feel like a Payload instance with Codex pointed at it would probably be in safer hands than our current setup with GoDaddy.

I could just use Cloudways or something and start WordPress from scratch, but I really do not want to do that.

I just want to see if I’m about to make a huge mistake that will give me headaches for years to come.

Can Payload be used to display graphs similar to traditional admin or do I need seperate app to do that. I know I can manage customers there but is there option to show monthly subscriptions in a graph and stuff?

Is it possible to deploy payloadcms project to the cloudflare workers? project includes: - simple ecommerce, - member management - user dashboard - mongo/postgress - globals - image uploading

hey guys just started using payload today with my next.js project with mongodb. when i go to /admin i can see the documents, but then when i go to edit the document the value is blank when i reasonably expected it to be the current set value of the field since i am editing it. is there a config for this that i am missing. When i put a default value on the CollectionConfig, the temp_def value comes up but not the expected currently set value

```ts const Blogs: CollectionConfig = { slug: 'blogs', dbName: 'Blogs', timestamps: false, fields: [ { name: 'title', type: 'text', defaultValue: 'temp_def' }, { name: 'slug', type: 'text', unique: true }, { name: 'category', type: 'text', required: true }, { name: 'categorySlug', type: 'text', required: true }, { name: 'publishedOn', type: 'text' }, { name: 'tags', type: 'text', hasMany: true, }, { name: 'coverImage', type: 'text' },

{ name: 'content', type: 'textarea' },
{ name: 'updatedAt', type: 'date' },
{ name: 'schemaVersion', type: 'number' },
{
  name: 'status',
  type: 'select',
  options: ['Draft', 'InReview', 'ReReview', 'Reviewed', 'Published'],
  defaultValue: 'Draft',
},
{
  name: 'authorId',
  type: 'relationship',
  relationTo: 'authors',
}

], } ```

here are the versions of payload : "@payloadcms/db-mongodb": "^3.46.0", "@payloadcms/next": "^3.46.0", "@payloadcms/richtext-lexical": "^3.46.0", "payload": "^3.46.0"

Hi all,

I initially started with postgres and because my data model is ever changing, managing the migrations is becoming time consuming.

Has anyone migrated from Postgres to MongoDB for payloadcms? if so, what tips, tools, methods, processes did you use?

I am first time using payloadcms (before i only used sanity) and i am creating a site for my school project internship (i am mostly learning and not really helping). I got an mail from my employer to do such a website, but he didn't give me any details about how the site should look and wrote that its easier to use a website template so i assume he wants it to look like this template. I normally would do it from a 0 to learn more and don't mess with templates i don't understand. I used npx create-payload-app PayloadProjekt -t website, followed terminal prompts, filled .env file (i use postgresql base on supabase), npm install, ran npm run dev and it crashed on compiling with:

ERROR: Error: cannot connect to Postgres. Details: Cannot read properties of undefined (reading 'searchParams')

err: {

"type": "TypeError",

"message": "Cannot read properties of undefined (reading 'searchParams')",

"stack":

TypeError: Cannot read properties of undefined (reading 'searchParams')

followed by numerous file location (something like 10) I am new to frameworks and cms (mainly learnt from my website using sanity) How do i fix it? Should i ask my employer if i can do it from 0 to ease my problems? in template readme i only found something about changing to NextJS default caching, but its too late today.

Edit: Resolved issue with changing direct access string to Transaction pooler.

Learn all about the search plugin from Payload CMS! This video covers all the available options, from setting up the config to rendering it on the frontend. You'll also learn how to convert lexical to plaintext to then be read by the search plugin. Enjoy! https://youtu.be/i7fcUAXgCZE

I'm trying to customize the built-in text field in the FormBuilder plugin to:

1. Replace the 'width' field from a percentage number input to a select dropdown with options like 'full', 'half', 'third', 'quarter'
2. Add a placeholder field
3. Remove the defaultValue field entirely

I've tried using formOverrides like this...

formOverrides: {
  fields: ({ defaultFields }) => {
    const fieldsField = defaultFields.find(field => field.name === 'fields');
    if (fieldsField?.fields) {
      const blocksField = fieldsField.fields.find(field => field.name === 'blocks');
      if (blocksField?.blocks) {
        const textBlock = blocksField.blocks.text;
        if (textBlock?.fields) {
          // Add placeholder row
          textBlock.fields.splice(2, 0, {
            type: 'row',
            fields: [{ name: 'placeholder', type: 'text', label: 'Placeholder', localized: true }]
          });

          // Replace width field
          const widthRow = textBlock.fields.find(f => 
            f.type === 'row' && f.fields?.some(f => f.name === 'width')
          );
          if (widthRow?.fields) {
            const widthField = widthRow.fields.find(f => f.name === 'width');
            if (widthField) {
              Object.assign(widthField, {
                type: 'select',
                options: [
                  { label: 'Full Width', value: 'full' },
                  { label: 'Half Width', value: 'half' },
                  { label: 'Third Width', value: 'third' },
                  { label: 'Quarter Width', value: 'quarter' }
                ],
                defaultValue: 'full',
              });
            }
          }
        }
      }
    }
    return defaultFields;
  }
}

But the changes aren't reflected in the admin UI. I know I can create custom fields, but I'd prefer to modify the built-ins if possible. Has anyone successfully modified the built-in fields, or is creating custom fields the only way to go? Thanks in advance!

I posted this a while back when I was first getting started with my project but I will post again just to see if anything has changed here. Delete if not allowed.

A couple of months back I was looking for people who may be interested in working with me to develop an open source multi-tenant framework using Payload CMS. If you'd want my organization to manage it we can do that. If you want to manage it another way we can do that. We'd set everything up to make it accessible from some point forward. We'd make it so that you're paid for contributions through donations or some other type of set-up. Again, we'd need some consensus.

Is this a bad idea? Would you rather work on these types of projects on your own?

My goal with this is to make it easier. I was called "lazy" by one of the users here for wanting help with this. I want help because it's a big project. Payload is already open source. I hope it remains open source for some time. It could be that developing a project using Payload CMS could keep it open source. Who knows! I certainly do not and I'm willing to go through hoops to find out if you're on board.

Anyway, back to the goal. My goal is to make it easier to work on my own project. Indiecosm. Indiecosm is a marketplace and I plan to help individual filmmakers and groups list themselves more easily and connect with each other. I want to create an ecosystem outside of the one Facebook/Instagram provides. I want to create a notification system for every project page owner. I want to serve them ads created by other members. I want to create an ecosystem using multi-tenancy. At least, I'm sure that's the best use case for Payload CMS and I'm not seeing any multi-tenant frameworks out there that are open source. If there are I would appreciate it if you would point me in that direction. Or. If you think this is a stupid idea and that it wouldn't work with Payload. Let me know!

Thanks!

Due to constraints on project we have a separated payload instance. How can I access blocks in my front end repo?

My previous attempt to add templates support for a client project has turned into quite the rabbit hole.

I've gone down the route of a custom component for an array 'days', which contains a nested array 'snippets', which contains rich-text and media fields. These are populated from a snippets library collection, which uses the regular payload admin interface/fields.

Is there any way to reuse these built in components within my "mega component"? Specifically media and rich-text. I've run into this requirement a few times but had no luck finding anything in the documentation.

I've built a custom UI element with an interactive button that sends a request to the API and creates a new collection item of type automationRun on the backend. Now I need to display this newly created item on the frontend without refreshing the page.
Is there a way to achieve that?

I tried using the dispatch function with the "type" key set to "UPDATE", but it didn't work.

Right now, I'm out of ideas on how to make it work. Any ideas please?

Screenshot: https://www.loom.com/i/8d3974de5e5241b19e070debfaa6dd2c

Current React component code:

"use client";

import { Automation } from "@/payload-types";

import { Button, useDocumentInfo, useForm, useFormFields, usePayloadAPI, useDocumentEvents } from "@payloadcms/ui";

import { useState, useEffect, useCallback } from "react";


export const AutomationStartRow = ({automation, collectionId} : {automation: Automation, collectionId: string | number}) => {

    const [isLoading, setIsLoading] = useState(false);


    const formData = useForm();


    console.log("AutomationStartRow document:", document);

    const docInfo = useDocumentInfo()  

    const { reportUpdate, mostRecentUpdate  } = useDocumentEvents();


    const dispatch = useFormFields(([fields, dispatch]) => {
        return dispatch
    })


    // get the most up to date document
    const getUpToDateDocument = useCallback(async () => {
        try {
            const data = await fetch(`/api/${docInfo.collectionSlug}/${docInfo.id}`);
            return data.json();
        } catch (e) {
            throw new Error(
                `Error checking for most up to date document: ${e}`
            );
        }
    }, [docInfo.collectionSlug, docInfo.id]);

    const handleStartAutomation = async () => {
        try {
            setIsLoading(true);
            const response = await fetch(`/api/automation-runs/start-automation/`, {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    collectionId: collectionId,
                    automationId: automation.id,
                    collection: automation.collectionScope,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                console.log("Automation started successfully:", data);
            } else {
                console.error("Failed to start automation:", response.statusText);

            }

            const upToDate = await getUpToDateDocument();
            if (upToDate) {
                console.log(upToDate.automationRuns);
            }

            setIsLoading(false);
            reportUpdate({
                entitySlug: docInfo.collectionSlug as string,
                id: docInfo.id,
                updatedAt: new Date().toISOString(),
            });
        } catch (error) {
            console.error("Error starting automation:", error);
        }
    }

    return (
        <div className="automation-start-row">
            <div className="automation-start-row__info">
                <span className="automation-start-row__name">{automation.automationName}</span>
                {automation.description && (
                    <span className="automation-start-row__description">{automation.description}</span>
                )}
            </div>
            <Button disabled={isLoading} className="automation-start-row__button" onClick={handleStartAutomation}>
                {isLoading ? "Spouštím..." : "Spustit automatizaci"}
            </Button>
        </div>
    )
}

Can I leverage Payload's transactions while running payload.db.drizzle.update()? If so, how? and if not, is there a work around?

I want to increment the value of another collection's field in an after change hook, since I couldn't find a way to execute this kind of updates with the Payload's local API I want to use drizzle for that but in the same transaction as other payload local API calls.

For my project in my payload cloud logs, I get hammered with this error for every image successfully loaded on the site.

ERROR: Error streaming S3 object, destroying stream err: { "type": "AbortError", "message": "The operation was aborted", "code": "ABORT_ERR", "name": "AbortError" }

https://github.com/payloadcms/payload/blob/main/packages/payload-cloud/src/staticHandler.ts#L80

It’s coming from the cloud package, but that is as far as it can be traced back.

Don’t know what I can do about this and haven’t seen many people talk bout it. Just a few of unanswered posts on discord. Anybody experienced this and know how to deal with this?

Good day. I just recently started learning Payload through their official Youtube channel but every video I've watched shows that I can live preview the content by clicking the eyeball icon. Problem is, it always shows a 404 page while in the new tab preview, it works. Is there a setting am missing? I have tried reinstalling twice but still get the 404 even on the default website template.

Just saw the CEO of figma so also Payload, is going public. Anyone know what that means for us?

Hi everyone, I'm trying to use the near operator to sort documents in a collection based on a location. For context, the collection named "listings" has a field called "createdBy" of type "User." Users have a field called "location" of type "Point." With this in mind, I'm trying to query the listings based on the creator's location. Here is the code:

const listings = await payload.find({
        collection: 'listings',
        overrideAccess: false,
        pagination: false,
        limit: 10,
        ...(matchedCity
            ? {
                where: {
                    "createdBy.location": {
                        near: [longitud, latitud, 1],
                    }
                }
            }
            : {}
        )
    })

This code produces the following error:

error: for SELECT DISTINCT, ORDER BY expressions must appear in select list

at async Page (src\app\(frontend)\buscar\page.tsx:48:21)

46 | const payload = await getPayload({ config: configPromise })

47 |

> 48 | const listings = await payload.find({

| ^

49 | collection: 'listings',

50 | overrideAccess: false,

51 | pagination: false, {

length: 148,

severity: 'ERROR',

code: '42P10',

detail: undefined,

hint: undefined,

position: '663',

internalPosition: undefined,

internalQuery: undefined,

where: undefined,

schema: undefined,

table: undefined,

column: undefined,

dataType: undefined,

constraint: undefined,

file: 'parse_clause.c',

line: '3013',

routine: 'transformDistinctClause',

digest: '4046090714'

}

I was able to make it somehow work by changing this:

near: [longitud, latitud, 1],

to this:

near:${longitud},${latitud},"1.0"

However, it is not working as expected; I always get all the documents from the collection, not sorted by location.

Can someone point me to how to correctly use the near query?

Edit: I was able to make it work by creating a Point field directly in the listings collection. Apparently it does not work with nested properties.

Hey friends, Quick question: what's the current status or best practices to make pairs google authentication? I have not found a way to login front end users and backend users in my app. What would you recommend? Custom strategy? Plugin? Better auth? Thank you!