Install Payload Into Any Next.js App With One Line - 3.0 Beta Is Here!

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ก.ค. 2024
  • 🎉🎉 Big news: 🚀🚀 Payload 3.0 Beta is now available, making Payload truly Next.js native! You can get started in one line: npx create-payload-app@beta
    Chapters:
    0:00 3.0 Is Here
    0:50 A Turning Point for Headless CMS Industry
    1:39 Combining Payload Into Any Next.js App
    4:58 Modular Local API: Use Payload Anywhere
    7:27 Server-side HMR
    8:32 Deploy to Vercel
    9:35 Bundling: Get Turbopack Out of Box
    12:03 Migration: Use Express If You Want To
    13:03 Migration and Imports: Payload Has Moved to ESM
    13:46 React Components As Client or Server Components
    16:30 What's Next: Beta to Stable
    17:03 What's Next: Docs
    17:34 What's Next: Stable Release
    Love what we're up to? Give us a ⭐
    github.com/payloadcms/payload
    Payload 3.0 Demo on Github:
    github.com/payloadcms/payload...
    The big takeaways::
    - Turbopack works out of the box (this will get faster over time)
    - The Payload admin UI is built with React Server Components and automatically eliminates server-side code from your admin bundle, completely alleviating the need to use Webpack aliases to remove hooks, access control, etc.
    - Payload is now fully-ESM across the board
    - GraphQL is now initialized only when you hit the GraphQL endpoint, and does not affect overhead of REST API routes
    - All UI components have been abstracted into a separate @payloadcms/ui package, which will be fully documented and exposed for your re-use once we hit stable 3.0 or before
    - You can run your own Next.js site alongside of Payload in the same app
    - You can now deploy Payload to Vercel, and there will be official support for - Vercel Blob Storage coming soon (so no S3 needed for files)
    - Server-side HMR works out of the box, with no need for nodemon or similar. When the Payload config changes, your app will automatically re-initialize Payload seamlessly in the background
    - All custom React components can be server components by default, and you can decide if you want them to be server components or client components
    - Sharp has been abstracted to be an optional dependency
    - Payload now relies on the Web Request / Response APIs rather than the Node Request / Response
    - Express can still be used with Next.js' Custom Server functionality
    - Payload itself has slimmed down significantly and can now be fully portable, run anywhere. You can leverage the Payload Local API completely outside of Next.js if you want.
    - The data layer, including the shape of the database Payload used and the API responses in 2.0, has not been affected whatsoever
    With a lot more to come.
    payloadcms.com
    github.com/payloadcms/payload
    discord.gg/payload
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 126

  • @payloadcms
    @payloadcms  3 หลายเดือนก่อน +8

    How it started: th-cam.com/video/jCMU4qw6LqI/w-d-xo.html&t

  • @MrTingle-qi2ne
    @MrTingle-qi2ne 24 วันที่ผ่านมา +3

    Seriously, your CMS rules. I've always hissed at the various "out of box" CMS solutions because they're convoluted crap built for non-devs. I love how Payload can be as simple or complex as I like and it's so darned easy to customise and deploy. Thanks a bunch! I'll be promoting Payload for sure.

  • @Maximiliant6
    @Maximiliant6 3 หลายเดือนก่อน +19

    Congratulations payload team!

  • @JustinMenkveld
    @JustinMenkveld 3 หลายเดือนก่อน +7

    Congratz Payload Team! Excited to be building so many of our customer projects ontop of Payload 3.0.

  • @juicer_777
    @juicer_777 13 วันที่ผ่านมา +1

    Can't wait for the stable release cause this is one sick CMS

  • @iamlinkus
    @iamlinkus 3 หลายเดือนก่อน +12

    BOOM! The revolution is starting!

  • @robertbabinski
    @robertbabinski 3 หลายเดือนก่อน +6

    This is huuge - can't wait for 3.0 being stable! You guys did amazing job as a Payload Team, big shout out.

  • @nicolaslair42
    @nicolaslair42 3 หลายเดือนก่อน +5

    Congratz to the team, this is huge! Really exciting time!

  • @zorkname
    @zorkname 3 หลายเดือนก่อน +1

    I’ve been waiting for this! Looks great!

  • @RuChernChong
    @RuChernChong 3 หลายเดือนก่อน +1

    Congratulations! Looking forward to the 3.0 release!

  • @spacecore2077
    @spacecore2077 3 หลายเดือนก่อน +2

    I'm a developer, i work from home. I have colleagues that work from home. I know of other people that work from home. But man i have to say, seeing only the CEO in the office grinds my gears in a weird way! Where is everybody? Want to see smiles. But am thankful for payload 3.0, thanks.

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน +7

      i kicked everyone out so i could film in peace, i filmed this last night at like 6. but we generally have ~10 in the office every day!

  • @AronHawkins
    @AronHawkins 3 หลายเดือนก่อน +1

    This is huge! This is what I've been waiting for to dive fully into Payload! Congrats Payload team!

  • @pisitch1
    @pisitch1 3 หลายเดือนก่อน +4

    Congrats! Appreciate the focus and transparency on the quality and avoiding cutting corner just to get it out! Really boost the confidence with enterprise customers.

  • @fredrikliljedahl7288
    @fredrikliljedahl7288 3 หลายเดือนก่อน +3

    This is amazing! I was looking for this, TWO DAYS AGO, and now it's here. Perfect timing!

  • @brachypelma24
    @brachypelma24 3 หลายเดือนก่อน +1

    Yay! I have been waiting for this ever since you announced the move to Next.js last year. Will upgrade my work-in-progress Payload app ASAP!

  • @FriggoCZ
    @FriggoCZ 3 หลายเดือนก่อน +1

    🎉 Congratulations! Amazing work. The revolution is starting!

  • @JarrodKane
    @JarrodKane 3 หลายเดือนก่อน +1

    This is very exciting, I only found payload last week but I adore it and how developer friendly it is to set up and go. I'm still learning this but it's really good to see your content and support for the community as well in these videos

  • @jdubz8173
    @jdubz8173 3 หลายเดือนก่อน +2

    So excited for this! People who are sleeping on this are really missing out.

  • @sideral
    @sideral 3 หลายเดือนก่อน +1

    🎉 congrats, excited to try it

  • @josephmgift
    @josephmgift 3 หลายเดือนก่อน +3

    I was eagerly waiting for this one man.

  • @Michael-Martell
    @Michael-Martell 3 หลายเดือนก่อน +2

    Heck yeah!! Spent the last 2 weeks piecing the last version into my next.js app, but thats wonderful! Honestly, If you guys could convince the Next team to integrate React-email and Resend as next-native options, that would be sweet. Idk if those would fix your node-mailer issue, but They're awesome. Maybe a collab between teams?

  • @ali2kan
    @ali2kan 3 หลายเดือนก่อน +2

    Let's make developer happiness! And this will definitely do that.

  • @pratishlmc
    @pratishlmc 3 หลายเดือนก่อน +1

    Congratulations 🎉, waited for this a long time. Can't wait to migrate to v3.0

  • @Xemmness
    @Xemmness 3 หลายเดือนก่อน +1

    this is crazy, i had the same idea to include the cms inside nextjs apps with similar ideas from letting nextjs handle the bundling to e2e type safety.
    congrats on the work, and good job guys, you nailed it.

  • @lotanode
    @lotanode 3 หลายเดือนก่อน +2

    “Let’s make developer happiness“ love it. Well done guys 💪🏽

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน

      damn it

  • @adamleblanc5294
    @adamleblanc5294 3 หลายเดือนก่อน +2

    For the edge runtime you will need some kind of HTTP based mailer. I think the best way to go about it would be to make sending emails use an adapter with a standard interface. Have the default adapter use nodemailer, and then if someone wants to use the edge runtime, they can write a custom adapter to use whatever 3rd party email service they want, like resend, send grid or whatever. Wouldn't even have to be a breaking change, since you can keep the default behaviour the same.

  • @joshdprts
    @joshdprts 3 หลายเดือนก่อน +1

    This is extremely exciting, honestly, going to be pushing it for whatever project I can going forward once this is all stable

  • @mxpf26
    @mxpf26 3 หลายเดือนก่อน +1

    Awesome! 🎉 Keep going!

  • @Diego_Cabrera
    @Diego_Cabrera หลายเดือนก่อน

    I can feel your passion for payload through the screen. I have a project in the works and will definitely be using payload. I’m also going to be sharing it on my TH-cam channel for sure!

  • @behnoudmst
    @behnoudmst หลายเดือนก่อน +1

    I have been keen on payload for some time now and with version 3, I can use it for smaller projects instead of my go to nestjs backend. Thanks and keep up the hard work.

  • @xberna8156
    @xberna8156 3 หลายเดือนก่อน

    Really cool stuff! It makes a lot of sense having a first class integration with Next.js

  • @KeziahMoselle
    @KeziahMoselle 3 หลายเดือนก่อน

    Congratulations for the beta!

  • @EduBasabe
    @EduBasabe 3 หลายเดือนก่อน +1

    Looks awesome 👏🏻

  • @Bateleur90
    @Bateleur90 3 หลายเดือนก่อน +1

    Great work, and can also really feel by your energy that you really believe in this!

  • @deividasmacavariani8684
    @deividasmacavariani8684 3 หลายเดือนก่อน +1

    Amazing stuff, can't wait for more tutorials.

  • @abdullah6055
    @abdullah6055 3 หลายเดือนก่อน +1

    Excited🎉

  • @entrepreneerit4490
    @entrepreneerit4490 2 หลายเดือนก่อน

    Just added Payload 3.0 to my Next JS app. Worked beautifully! What a great accomplishment.

  • @muhadbk0
    @muhadbk0 3 หลายเดือนก่อน

    Congratulations Payload team,
    Excited 🎉

  • @_mahbubhasan
    @_mahbubhasan 2 หลายเดือนก่อน

    congratulations 🎉. Love you payload tem.

  • @RohanPoudel
    @RohanPoudel 3 หลายเดือนก่อน +1

    Congratulations 🎉

  • @aghileslounis
    @aghileslounis 3 หลายเดือนก่อน

    Crazy stuff, thank you !

  • @saman7378
    @saman7378 3 หลายเดือนก่อน

    one of the coolest demos, ty

  • @eric-jt
    @eric-jt 3 หลายเดือนก่อน

    NOWAY! I thought it would be a year haha Im pumped for this

  • @pablocarvalho9826
    @pablocarvalho9826 3 หลายเดือนก่อน

    This is so incredible! Nice job, i just started a 2.0 project but i might migrate!

  • @pazzak_
    @pazzak_ 2 วันที่ผ่านมา

    Great stuff. Looking forward for the 2.0 -> 3.0 migration guide. I am using a heavily modified payload 2.0 e-commerce template and I am trying to adapt it to 3.0beta but it's a lot of work.

  • @fiercecat410
    @fiercecat410 3 หลายเดือนก่อน +2

    🎉 congratulations!!!! I love the moment you said the stable version is aimed be out in 30 days😂

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน

      that part strikes fear into my heart

  • @i90_highway
    @i90_highway 3 หลายเดือนก่อน +1

    🎉..loving this

  • @MarJa3
    @MarJa3 2 หลายเดือนก่อน

    great news, can't wait for the stable release, thanks for your hard work

  • @rickheffren2044
    @rickheffren2044 3 หลายเดือนก่อน

    Congratulations!!

  • @thedunco
    @thedunco 3 หลายเดือนก่อน +1

    I'll need to give 3.0 a shot!

  • @tinotaylor
    @tinotaylor 3 หลายเดือนก่อน

    Amazing!!! 🙌🏻

  • @webologixmy
    @webologixmy 3 หลายเดือนก่อน

    Love it. Keep it up

  • @guiaflutterflow
    @guiaflutterflow 3 หลายเดือนก่อน +1

    Congratulations team

  • @miindaugas
    @miindaugas หลายเดือนก่อน

    Really cool stuff

  • @bioburden
    @bioburden 3 หลายเดือนก่อน

    Beer is good! 🤘 Congrats! 😎

  • @realitydesigners
    @realitydesigners 3 หลายเดือนก่อน +2

    coming from sanity - I'll give this a shot.

  • @kamilzielinski504
    @kamilzielinski504 19 วันที่ผ่านมา

    for me payload just works, good decisions about apis and architecture, thanks

  • @kenji933
    @kenji933 3 หลายเดือนก่อน +1

    Lets goooooo!!!!

  • @mamadjadali1159
    @mamadjadali1159 3 หลายเดือนก่อน

    amazing!!

  • @jim.....
    @jim..... 3 หลายเดือนก่อน +3

    Ive waited for 3.0 to jump onboard 🎉

    • @ruskasielu6261
      @ruskasielu6261 3 หลายเดือนก่อน +2

      Same here, been looking forward to v3 before diving in

  • @mauricewebb1098
    @mauricewebb1098 3 หลายเดือนก่อน +1

    This is amazing, great job! 🎉 Folks should join the discord if haven’t already

  • @peterkyle_0125
    @peterkyle_0125 3 หลายเดือนก่อน +1

    Awesome stuff

  • @dopetag
    @dopetag 2 หลายเดือนก่อน

    Great great great!
    Finally, we have something decent for managing dat easily in applications, blogs etc.

  • @eric-jt
    @eric-jt 3 หลายเดือนก่อน

    Cheers!🍻

  • @AnthonyCandaele
    @AnthonyCandaele 3 หลายเดือนก่อน +1

    Wow, one command to deploy everything on Next.js, that's so cool. I hope someone makes a video tutorial on building a project with PayloadCMS.

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน +1

      lots of them are coming soon!

    • @AnthonyCandaele
      @AnthonyCandaele 3 หลายเดือนก่อน

      @@JamesMikrut that is beyond awesome 😄

  • @kumarvishalben
    @kumarvishalben 3 หลายเดือนก่อน

    Great job

  • @anhvuuc8693
    @anhvuuc8693 3 หลายเดือนก่อน +1

    I love this

  • @nikhilpsathyanathan
    @nikhilpsathyanathan 3 หลายเดือนก่อน

    Nice work

  • @leminh597
    @leminh597 3 หลายเดือนก่อน +1

    Hugee 🎉🎉

  • @konstantin8319
    @konstantin8319 3 หลายเดือนก่อน +1

    Looks amazing! As you teased running inside Nuxt, i had to try :D Importing payload and using the DB functions works instantly! For the admin panel running a seperate Nextjs app would probably be easiest...

    • @nearMintGraphics
      @nearMintGraphics 3 หลายเดือนก่อน

      Is there any way for you to share how you got it working with Nuxt? Did you keep Payload with Next and built a Nuxt project alongside for the client? If you have a Git repo with a boilerplate it would be awesome!

    • @nearMintGraphics
      @nearMintGraphics 3 หลายเดือนก่อน

      @@konstantin8319 Great, thanks for your answer ✨

    • @konstantin8319
      @konstantin8319 3 หลายเดือนก่อน

      @@nearMintGraphics im devkon-at on github, sorry youtube blocks my efforts to post a link

    • @konstantin8319
      @konstantin8319 3 หลายเดือนก่อน

      @@nearMintGraphics ok youtube keeps deleteing my response so here i try again, i uploaded a repo on gh username devkon-at

    • @konstantin8319
      @konstantin8319 3 หลายเดือนก่อน

      @@nearMintGraphics Added it to my youtube profile

  • @PraiseYeezus
    @PraiseYeezus 3 หลายเดือนก่อน

    Not gonna lie this sounds kinda sexy. Will definitely try Payload now. This is what was holding me back from giving it a try instead of stucking to Sanity, I really like having the CMS attached.

  • @swordali
    @swordali 29 วันที่ผ่านมา

    Cool

  • @MichaelPresecan
    @MichaelPresecan 3 หลายเดือนก่อน +1

    I have been ditching nodemailer for resend. Is it possible to make the emailing as a adapter? So you could have adapter for resend, sendgrid and nodemailer itself?

  • @user-go7xl3dk6y
    @user-go7xl3dk6y หลายเดือนก่อน +1

    I am still a beginner in payload, how can I learn about it without confusion between 3.0 and previous versions?

  • @mohamed_l3id
    @mohamed_l3id 2 หลายเดือนก่อน +1

    i have a problem when i try to run my payload admin dashboard it's doesn't post it's just stay with white screen

  • @rlBrave
    @rlBrave 3 หลายเดือนก่อน +1

    I want my websockets!!!! 😂

  • @philmoody5888
    @philmoody5888 3 หลายเดือนก่อน +1

    👏

  • @euanmorgann
    @euanmorgann 3 หลายเดือนก่อน

    🍻

  • @MrDevianceh
    @MrDevianceh 4 วันที่ผ่านมา

    Would you be willing to create a short demo on how would payload work with sveltekit?

  • @seanZG
    @seanZG หลายเดือนก่อน

    How can we migrate an existing postgress database into Payload, is there any introspection and codegen?

  • @greendsnow
    @greendsnow 3 หลายเดือนก่อน +2

    Good but system requirements are too demanding. I'd go for Directus. Plus you don't have 2fa for admins, big security issue tbh.

    • @FuriousFurion
      @FuriousFurion 3 หลายเดือนก่อน +2

      Yes, 2FA is baseline.

  • @justingauthier1873
    @justingauthier1873 3 หลายเดือนก่อน +1

    Mostly stable beta until full release you say? Please don't tempt me with a good time.

  • @jatiquep5543
    @jatiquep5543 3 หลายเดือนก่อน +1

    Tailwindcss support out of the box 😭😭

    • @dev0_018
      @dev0_018 หลายเดือนก่อน

      this would help a lot

  • @mr.random8447
    @mr.random8447 หลายเดือนก่อน

    Can we get an example of SvelteKit and Payload 3?

  • @ashirvadsatapathy4542
    @ashirvadsatapathy4542 3 หลายเดือนก่อน

    Need A Tutorial on Hooks How we can add fields in doc before saving in database

  • @poojakhatri30
    @poojakhatri30 2 หลายเดือนก่อน

    can't we create dynamic blocks in it?

  • @yugaank100
    @yugaank100 2 หลายเดือนก่อน

    I've been racking my brain but I cant seem to figure this out. Is there any way to not let "regular users" access the admin dashboard? Any help is appreciated.

  • @aunumever
    @aunumever 18 วันที่ผ่านมา

    How do we implement this with Sveltekit?

  • @aLfRemArShMeLlOw
    @aLfRemArShMeLlOw 3 หลายเดือนก่อน +2

    Consider an SQLite/Turso adapter when you get the edge functionality nailed down.

    • @aLfRemArShMeLlOw
      @aLfRemArShMeLlOw 3 หลายเดือนก่อน

      Also, for the nodemailer problem, I would just make the dependency optional and create adapters for http email providers, like Resend or some such.

  • @raiyansarker
    @raiyansarker 26 วันที่ผ่านมา

    how to try the beta?

  • @JohnVandivier
    @JohnVandivier หลายเดือนก่อน

    that app dir is under src/ but isn't src no longer recommended by default

  • @JohnVandivier
    @JohnVandivier หลายเดือนก่อน

    trying to get started right now. this is full of friction. it is not a one line command to add on to a next app. it is not a 5 minute setup. i'm having to basically rip the demo site and there are tons of deps that weren't mentioned in docs or installed by the one line command etc
    i'm having to go back and change most config files as i spawned an app without a src dir via create-next-app

  • @himanshuahujaofficial7813
    @himanshuahujaofficial7813 3 หลายเดือนก่อน +1

    Is it going to work on cloudflare workers? :)

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน +1

      I really want it to - we're close, but not quite there yet. Need to do a few more things like get rid of Nodemailer, or make an adapter pattern for sending email

    • @himanshuahujaofficial7813
      @himanshuahujaofficial7813 3 หลายเดือนก่อน

      @@JamesMikrut Thanks, love Payload. You guys rock!!

    • @himanshuahujaofficial7813
      @himanshuahujaofficial7813 3 หลายเดือนก่อน

      @@JamesMikrut Curious, how you guys will hangle mongoose compatibility with Edge?

    • @PTBKoo
      @PTBKoo 3 หลายเดือนก่อน

      Hopefully they create an adapter for SQLite soon so I can use with cloudflare d1 or turso. It would be great to have everything running on cloudflare.

  • @shailendroncooparambam2572
    @shailendroncooparambam2572 3 หลายเดือนก่อน

    with all the excitement about the features (demo code that was showing commit date of 4 months ago though) - I was waaaaay more excited in trying to predict whether "that guy" will back up and crash his car through the glass door!!!
    alas, it was all excitement, and no action 😔
    maybe action comes with Payload in about May? cannot wait to try it

  • @kH-ul4hk
    @kH-ul4hk 3 หลายเดือนก่อน +1

    Amazing!! Does James have adhd? xD

    • @JamesMikrut
      @JamesMikrut 3 หลายเดือนก่อน +1

      my doc and my mom said no

  • @KamalSingh-zo1ol
    @KamalSingh-zo1ol 2 หลายเดือนก่อน

    The demo admin user and password does not work.

    • @payloadcms
      @payloadcms  2 หลายเดือนก่อน

      Yep, it's just demonstrating that it's deployed (but not publicly accessible).

  • @Yukiixs
    @Yukiixs 3 หลายเดือนก่อน

    I don’t use next :(

  • @jonniem
    @jonniem 3 หลายเดือนก่อน

    a bud heavy 😂