I've fallen in love with PayloadCMS. You just feel powerful. Imagine a CMS that gives you full control over your models, auth, fetching, caching, admin, etc... I haven't seen this much utility since learning Django years ago. It's quickly become one of my go-to's.
Hi, its such a pain to render links on rich text (get the reference of the document to get the url) with other cms (sanity, strapi..) is it better with payload ?
I've started using Payload myself a few weeks ago, and while the 3.0 beta has been way better of an experience than 2.x, the amount of bugs from being built on top of a pre-alpha Next 15 + React 19 version is quite a problem
I fully agree - we've been moving quick for sure but it's starting to get more stable! there is a light at the end of the tunnel! we've also been working closely with the Next.js team to make sure that we are in a good spot for Next 15 and React 19. Will be releasing stable 3.0 alongside of those stable versions
Thanks for this Jack! It came at a perfect time for a Gatsby-to-NextJS migration project, where the Gatsby application was using a commercial CMS. (Including Payload lessons for your NextJS course would make a great bonus since it offers a turnkey solution for so many common problems. I love the Local API aspect of Payload 3 as it simplifies app management, e.g. multiple repos, multiple deployments, higher latency. The Local API just has a much better DX. I only wish the Payload team hadn't made the Payload 3.0 Beta dependent on a canary release of NextJS, as that introduces so many changing variables; i.e. Payload 3, NextJS 15, and React 19, all of which are in a state of flux. I've already discovered that Payload 3 won't work with the later NextJS canary versions. Thanks again!
The tight integration with Next/Nuxt (whatever you using) is nice. Gives you full control on schema, hooks, events, types. BUT, the CMS part lacks vision. No advanced/modern text editors, or easy to use drag-drop solutions. They really need to add in that components/blocks workflow. At this point I rather recommend Pocketbase/Supabase etc, it has better UI and even though is not technically a CMS, but rather a database UI, it offers a lot more control over login and other stuff.
Unrelated to much of anything - there was a point you were deleting a bunch of imports - you can remove all unused imports with Alt + Shift + O, I only realised this was a thing the other day :)
God, using payloadcms v3 beta with other betas like react 19 and nextjs15 is literally the best experience I could ever ask for, nevertheless, I fought with bugs day and night till I was able to deploy pheew, which is understandable as they are beta, but I can’t wait for stable release.. still enjoying the beta
Awesome walkthrough, Jack! One quick question I have, is it not possible to pass the already loaded data to the server action instead of doing another request with the movie ID? I mean data is already in the page right? In case I didn’t miss something around it. Thanks!
Hey Jack, why create the separate API route to searchMovies, instead of just calling the searchMovies function directly in your code? Why the extra step?
You could do that, but a lot of folks stress out about calling a server action that is a query and not an action. So I decided to avoid that controversy and go for an API endpoint. FWIW, server actions are POST requests, so they aren't cached normally.
Using vercel blob is a great option however using the same way as you’ve taught has a limitation of less than 4.5mb uploads which revolves around the use of server uploads I.e if you are uploading from payload directly, media files should be less than 4.5mb. But there’s a workaround. In vercel blob docs, it says we can opt to using client upload rather than server upload which has a less strict limit, But unfortunately for me, I have tried to implement it but it has failed to work. So I was wondering if you could address this on a video or personally please, I really need a solution… Also, even while using the sever upload, and when I upload a media of 4.5mb or less, it is successful, but it fails to reflect in my page where I’m fetching the uploads in production not until I redeploy again.. please your Help is needed. Thanks
I am always amazed by how simple these tutorials look, up until you try it yourself. Payload cms looks awesome but for me a pain in the ass to install. I am getting nothing but errors.
Payload looks nice. But I love sanity as a content management system.
2 หลายเดือนก่อน
Hi ! Thanks for your video, this is great content :) If one wants to deploy this project to Vercel, he would then need a host for the database and the blobstore for the medias ? Following your video I’m not sure if Vercel host the DB automatically with Neon and the Blob store for the media… Thank anyway, keep up the great work !
Yep. If you have multiple builds that may not go to all the environments, committing the migration files (say by build) is going to be critical. When you run payload migration command, it will automatically check against the target DB which migrations are not executed yet and only apply those. Really helps with DB migration automation as part of the pipeline. 👍👍
Hi Jack, you mentioned that it works on top of app router. Will it work with page router? I'm asking because module federation plugin made by Zack Jackson does not support app router and is not going too...
Absolutely! Though if you want to host payload in the same app, you'll need to use the app router. If you want to use the page router, you can host payload separately - just like any other cms - and still use payload v3.
A question about the votes, can we just make the vote button a client component so we can add an spinner and those things, and just revalidate the path should work to revalidate the list of movies
Great question! Not that I know of, but I haven't looked. What I can say is that Postgres (and probably Neon) offer a vector extension and a field type for that along with HNSW indexing. And since Payload offers hooks you could easily add embedding creation as a hook with insertion into the vector. Alternatively, if you don't want the user waiting around you could post an event to Inngest and let it do the work on the backend to get the embedding and add it to the record.
I love your video. But for me when I deployed on payloadcms it is extremely slow I don’t know. Could it be because of vercel-postgres and vercel-bolb region?
In your project's terminal, try 1) 'pnpm i' to install packages in package.json. 2) 'cp .env.local.example .env.local' to copy the example env file so your project can actually access the environment variables. Then 3) 'pnpm run payload migrate:create initial'
@@billy-bund yeah, Jack definitely left out a few bits in this video, thanks *unfortunately still doesn't work for me: ERROR: Error: cannot connect to Postgres: password authentication failed for user "postgres"
@@sufiblade only worked onces with it. It supports spaces in field names, at this project was that bad using it. We had to patch an ORM to use it (Doctrine, PHP).
have you tried it with our Postgres adapter? I bet it could work. Never tried it myself but would be willing to take a peek into it in the near-ish future for ya
@@JamesMikrut Yeah I spent several weeks trying everything I could. There's an issue with the naming conventions with using Postgres. Xata renames columns from id to xata_id, when using their beta postgres database. Why I think it's worth the effort, is that they don't put any db's to sleep, so building payload into applications that may not have as many reads and writes would appeal to a large amount of projects. Sure, I could just make a time trigger to auto update something in supabase every week but I'd rather work within the system than fight against it, and thats where I think Xata really shines.
That's our out of the box login to keep it simple for most use cases, but you have full control to integrate your authentication with whatever you need like SSO services or nextjs plugins
@@payloadcms Give a number from 0 to 100 to the possibility of some regular guy who chooses a cms to deal with his content to do that auth thing on his own. 42? 69? Good, now subtract number from 100 and you'll find the percentage of your websites you expose to the risk of deletion, or worse via un/pw attack because it's the default way of auth... We need TOTP in every un/pw application in 2024.
Payload CMS is such a great option. They've introduced Postgres support meaning you can self-host with a provider like Supabase.
You can also use MongoDB and self-host!
Ma man so deep in js and react land he not know what selfhosting actually is😂
@@sylensdrake9706 Alright, let's see you scale up a SaaS on your raspberry pi
I've fallen in love with PayloadCMS. You just feel powerful. Imagine a CMS that gives you full control over your models, auth, fetching, caching, admin, etc... I haven't seen this much utility since learning Django years ago. It's quickly become one of my go-to's.
Directus?
Hi, its such a pain to render links on rich text (get the reference of the document to get the url) with other cms (sanity, strapi..) is it better with payload ?
PayloadCMS is awesome, can't wait to build my first project with it. In the meantime I would love to see more tutorials like this on PayloadCMS.
This kind of sponsorship is harmonious 🙂
Glad to see Payload getting some love
It’s really good. Using 3.0bate now. Can’t wait for the release of 3.0.
It just works. So much more easier to use than all the other headless CMSs.
Been waiting for v3 of Payload for quite a while - glad its finally out, the team there are killing it
The content is spot on as always, thanks for taking the video ❤🎉
I've started using Payload myself a few weeks ago, and while the 3.0 beta has been way better of an experience than 2.x, the amount of bugs from being built on top of a pre-alpha Next 15 + React 19 version is quite a problem
I fully agree - we've been moving quick for sure but it's starting to get more stable! there is a light at the end of the tunnel! we've also been working closely with the Next.js team to make sure that we are in a good spot for Next 15 and React 19. Will be releasing stable 3.0 alongside of those stable versions
@@JamesMikrutsounds like music to my ears
I was thinking between Directus and NocoDB for my current project ! I will give Payload a try !
Thanks for this Jack! It came at a perfect time for a Gatsby-to-NextJS migration project, where the Gatsby application was using a commercial CMS. (Including Payload lessons for your NextJS course would make a great bonus since it offers a turnkey solution for so many common problems.
I love the Local API aspect of Payload 3 as it simplifies app management, e.g. multiple repos, multiple deployments, higher latency. The Local API just has a much better DX. I only wish the Payload team hadn't made the Payload 3.0 Beta dependent on a canary release of NextJS, as that introduces so many changing variables; i.e. Payload 3, NextJS 15, and React 19, all of which are in a state of flux. I've already discovered that Payload 3 won't work with the later NextJS canary versions.
Thanks again!
This looks good, should come handy in a project soon
All this for free and os??? damn is it Christmas already?
Using it on a project right now and loving it!
Such a great video Jack, really appreciate it.
Thanks Jack❤
learned a lot from this video 😄
The tight integration with Next/Nuxt (whatever you using) is nice. Gives you full control on schema, hooks, events, types.
BUT, the CMS part lacks vision. No advanced/modern text editors, or easy to use drag-drop solutions. They really need to add in that components/blocks workflow.
At this point I rather recommend Pocketbase/Supabase etc, it has better UI and even though is not technically a CMS, but rather a database UI, it offers a lot more control over login and other stuff.
Unrelated to much of anything - there was a point you were deleting a bunch of imports - you can remove all unused imports with Alt + Shift + O, I only realised this was a thing the other day :)
God, using payloadcms v3 beta with other betas like react 19 and nextjs15 is literally the best experience I could ever ask for, nevertheless, I fought with bugs day and night till I was able to deploy pheew, which is understandable as they are beta, but I can’t wait for stable release.. still enjoying the beta
Awesome walkthrough, Jack! One quick question I have, is it not possible to pass the already loaded data to the server action instead of doing another request with the movie ID? I mean data is already in the page right? In case I didn’t miss something around it.
Thanks!
I wouldn't. The data on the client could be out of date with what is on the server. Plus these server data fetches are extremely fast.
Hey Jack, why create the separate API route to searchMovies, instead of just calling the searchMovies function directly in your code? Why the extra step?
You could do that, but a lot of folks stress out about calling a server action that is a query and not an action. So I decided to avoid that controversy and go for an API endpoint. FWIW, server actions are POST requests, so they aren't cached normally.
Great tutorial, thanks!
cann't wait for stable release
Using vercel blob is a great option however using the same way as you’ve taught has a limitation of less than 4.5mb uploads which revolves around the use of server uploads I.e if you are uploading from payload directly, media files should be less than 4.5mb. But there’s a workaround. In vercel blob docs, it says we can opt to using client upload rather than server upload which has a less strict limit, But unfortunately for me, I have tried to implement it but it has failed to work. So I was wondering if you could address this on a video or personally please, I really need a solution… Also, even while using the sever upload, and when I upload a media of 4.5mb or less, it is successful, but it fails to reflect in my page where I’m fetching the uploads in production not until I redeploy again.. please your Help is needed. Thanks
I am always amazed by how simple these tutorials look, up until you try it yourself.
Payload cms looks awesome but for me a pain in the ass to install. I am getting nothing but errors.
I use Directus though. It is actually because of timing. At the start, they never had PostgreSQL
Payload looks nice. But I love sanity as a content management system.
Hi ! Thanks for your video, this is great content :) If one wants to deploy this project to Vercel, he would then need a host for the database and the blobstore for the medias ? Following your video I’m not sure if Vercel host the DB automatically with Neon and the Blob store for the media… Thank anyway, keep up the great work !
If you hit the verel deploy button it will use Neon fo the DB and the vercel blob store for the images.
Forgive for a dumb question as I'm quite inexperienced in back-end, but should I commit migration files?
Yes.
Yep. If you have multiple builds that may not go to all the environments, committing the migration files (say by build) is going to be critical. When you run payload migration command, it will automatically check against the target DB which migrations are not executed yet and only apply those. Really helps with DB migration automation as part of the pipeline. 👍👍
during development, I'd recommend you always only keep one migration file per version release. Makes things a lot easier.
Also, for anyone just learning payload, you don’t have to do the migrations manually. You can just let the dev server automatically create the tables.
Hi Jack, you mentioned that it works on top of app router. Will it work with page router? I'm asking because module federation plugin made by Zack Jackson does not support app router and is not going too...
Use payload v2
Absolutely! Though if you want to host payload in the same app, you'll need to use the app router. If you want to use the page router, you can host payload separately - just like any other cms - and still use payload v3.
A question about the votes, can we just make the vote button a client component so we can add an spinner and those things, and just revalidate the path should work to revalidate the list of movies
Are there any CMS options that offer elastic/semantic/vector search out of the box?
Great question! Not that I know of, but I haven't looked. What I can say is that Postgres (and probably Neon) offer a vector extension and a field type for that along with HNSW indexing. And since Payload offers hooks you could easily add embedding creation as a hook with insertion into the vector. Alternatively, if you don't want the user waiting around you could post an event to Inngest and let it do the work on the backend to get the embedding and add it to the record.
Mongo Atlas Search is another option is using Mongo with Payload
If I'm self-hosting this, what should I be considering RE postgres and security?
I love your video. But for me when I deployed on payloadcms it is extremely slow I don’t know. Could it be because of vercel-postgres and vercel-bolb region?
Would you use MongoDB or Postgres as database and why?
Could you make a video deploying this app using coolify?
Is there a option to connect my own API to publish content so I can maintain a local/demo db and publish it to my prod db.
the commmand for the migration is not working @ 4:47
In your project's terminal, try 1) 'pnpm i' to install packages in package.json. 2) 'cp .env.local.example .env.local' to copy the example env file so your project can actually access the environment variables. Then 3) 'pnpm run payload migrate:create initial'
@@billy-bund yeah, Jack definitely left out a few bits in this video, thanks
*unfortunately still doesn't work for me: ERROR: Error: cannot connect to Postgres: password authentication failed for user "postgres"
@@nickwoodward819 At 3:27, did you paste your POSTGRES_URI in correctly?
do you have a favorite database for working with next.js?
What do you use for the terminal?
JetBrains Mono Nerd Font
Shoutout to the @AllAboutPayload YT channel
When will react-19 be released, nextjs15???
👍
how do you do social logins with the new payload cms 3?
hello can you please do a blog website tutorial using payload 3.0🙏🙏
Can you compare Payload and Strapi?
How does it compare to strapi (CMS) and convex (BaaS)?
TBH, I would just try it and see. Clone my repo or clone the starter kit. Give it a go and see what you think.
No SQLite support atm. Sadge.
Anyone compared Payload with the king, Directus? Dont really care about react. Just need a damn good CMS
When we can use payload with sqlite and remix ❤❤❤❤
The best CMS, unfortunately doesn't support our db engine
Hopefully your DB engine is not MySQL. The finding a CMS is the least of your problem.
@@DominikZogg even if it is, mysql and sqlite support is around the corner
@@DominikZogg lmao
@@DominikZogg haha it is SQL server
@@sufiblade only worked onces with it. It supports spaces in field names, at this project was that bad using it. We had to patch an ORM to use it (Doctrine, PHP).
I have been asking them to make a Xata db adapter. If that’s something that interested you, please send them a message!
have you tried it with our Postgres adapter? I bet it could work. Never tried it myself but would be willing to take a peek into it in the near-ish future for ya
@@JamesMikrut Yeah I spent several weeks trying everything I could. There's an issue with the naming conventions with using Postgres. Xata renames columns from id to xata_id, when using their beta postgres database. Why I think it's worth the effort, is that they don't put any db's to sleep, so building payload into applications that may not have as many reads and writes would appeal to a large amount of projects. Sure, I could just make a time trigger to auto update something in supabase every week but I'd rather work within the system than fight against it, and thats where I think Xata really shines.
I was thinking that is good for making Ecommerce app ,
"Slug" is a newspaper term en.wikipedia.org/wiki/Slug_%28publishing%29
Wish tutorial with SvelteKit...
I'm getting very confused what "native" means in this context.
With 2.0 you had to use NextJS in a custom server mode. This version is just seamlessly integrated within any modification to the Next setup.
cant do the migration.
yarn payload migrate:create initial
Admin access through email and password...
Just don't use it! It's hackable in this day and age.
That's our out of the box login to keep it simple for most use cases, but you have full control to integrate your authentication with whatever you need like SSO services or nextjs plugins
@@payloadcms Give a number from 0 to 100 to the possibility of some regular guy who chooses a cms to deal with his content to do that auth thing on his own.
42? 69? Good, now subtract number from 100 and you'll find the percentage of your websites you expose to the risk of deletion, or worse via un/pw attack because it's the default way of auth... We need TOTP in every un/pw application in 2024.
Horrible name choice for search 😓