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!
Other than the fantastic content I really like the pacing. No fluf, straight to the point and lots of details. Super nice that you also showed the deployment. How do you dim the screen and only highlight a portion? Is that a piece of software or done manually in post?
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"
Hey jack, great video. I looked at your git repo for this and noticed your deployment to vercel failed and you get a 404 when you go to the link in the about section on the side. Just thought you should know. In any case, looking at the source code did help me figure out how to do something that i was struggling with in regards to data fetching and next js so thanks for that!
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.
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 :)
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!
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
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.
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
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
I struggle with demos that don't include user auth. For example if someone were to deploy this as-is the votes would be spammed and therefore useless and there's a possibility that someone scrapes themoviedb using this app (there's minimal logging, no cors, and no date limits on this posters). In short: there's still a lot of work to be done for someone to use this on a public-facing domain and many new devs will not know that
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 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?
"Slug" is a newspaper term en.wikipedia.org/wiki/Slug_%28publishing%29
6 місяців тому
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 !
@@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.
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 ?
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
@@juicer_777 Been running on coolify on a box in my shed - scales to thousands of users just fine 🤷🤷
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.
Glad to see Payload getting some love
Been waiting for v3 of Payload for quite a while - glad its finally out, the team there are killing it
This kind of sponsorship is harmonious 🙂
The content is spot on as always, thanks for taking the video ❤🎉
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.
I'm giving payload a shot today. Thanks for this, Jack.
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
All this for free and os??? damn is it Christmas already?
This looks good, should come handy in a project soon
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!
Other than the fantastic content I really like the pacing. No fluf, straight to the point and lots of details. Super nice that you also showed the deployment.
How do you dim the screen and only highlight a portion? Is that a piece of software or done manually in post?
Such a great video Jack, really appreciate it.
Thanks Jack❤
learned a lot from this video 😄
I am looking forward to using Payload in a project. Looks REALLY powerful
PayloadCMS looks great! But so few resources like this one. Would be great to have more
with payload i can deploy my ecommerce website completely on vercel and supabase as database. Love it.
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?
Using it on a project right now and loving it!
Hey jack, great video. I looked at your git repo for this and noticed your deployment to vercel failed and you get a 404 when you go to the link in the about section on the side. Just thought you should know. In any case, looking at the source code did help me figure out how to do something that i was struggling with in regards to data fetching and next js so thanks for that!
cann't wait for stable release
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.
it is so great, ,hope you can publish a full project based on payloadcms ,, that would be wonderfull and I will pay for it. haha
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 :)
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.
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 have just meet payload from payload developer itself now, i am going to use it
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
Great tutorial, thanks!
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
Would you use MongoDB or Postgres as database and why?
I use Directus though. It is actually because of timing. At the start, they never had PostgreSQL
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.
Shoutout to the @AllAboutPayload YT channel
if i already have an existing nextjs app can i add payload to it (i only discovered payload recently) ?
how do you do social logins with the new payload cms 3?
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.
Could you make a video deploying this app using coolify?
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
do you have a favorite database for working with next.js?
What do you use for the terminal?
JetBrains Mono Nerd Font
If I'm self-hosting this, what should I be considering RE postgres and security?
I struggle with demos that don't include user auth. For example if someone were to deploy this as-is the votes would be spammed and therefore useless and there's a possibility that someone scrapes themoviedb using this app (there's minimal logging, no cors, and no date limits on this posters).
In short: there's still a lot of work to be done for someone to use this on a public-facing domain and many new devs will not know that
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.
When will react-19 be released, nextjs15???
Payload looks nice. But I love sanity as a content management system.
Can you compare Payload and Strapi?
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 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?
"Slug" is a newspaper term en.wikipedia.org/wiki/Slug_%28publishing%29
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.
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.
running migrate with movies gives me this ``If you'd like to run migrations, data loss will occur. Would you like to proceed?``
It's addressed around 9 mins
cant do the migration.
yarn payload migrate:create initial
hello can you please do a blog website tutorial using payload 3.0🙏🙏
No SQLite support atm. Sadge.
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.
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).
👍
When we can use payload with sqlite and remix ❤❤❤❤
Wish tutorial with SvelteKit...
Anyone compared Payload with the king, Directus? Dont really care about react. Just need a damn good CMS
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 ,
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 😓
Nextjs + Payload + Vercel Postgres + Vercel Blob