Payload
Payload
  • 39
  • 371 610
How to migrate from Wordpress to Payload and Next.js
As Payload 3.0 nears stable, it is quickly becoming the de facto Next.js CMS, rendering WordPress obsolete. And an increasingly common request we hear is how to migrate an existing WordPress site to Payload. Considered a more flexible alternative to WordPress, Payload is fully TypeScript, offers an elegant admin panel to create content, and far more optimal developer experience.
In this final part of this tutorial, we walk through how to rebuild your WordPress front end using Payload & Next.js.
Part 1: ua-cam.com/video/t1du7NKb60Y/v-deo.html
⭐ Like what Payload is up to? Leave us a star ⭐
github.com/payloadcms/payload
🚚 In this migration tutorial, we walk through ...
- Rebuilding your WordPress front end using Payload and Next.js
- Setting up Tailwind CSS for faster and more flexible styling
- Creating and rendering dynamic blocks in Payload
- Implementing a custom header and footer that work across your site
- Generating dynamic routes for pages and blog posts using Next.js and Payload
🔗 Resources/code snippets used in video
10x-media-gmbh.notion.site/WP-to-Payload-2-19d5ccc2bae84468bb2024b8401560f2?pvs=4
A primer on Payload ...
- The fastest growing headless CMS in our category.
- Next.js native, so it can seamlessly integrate it into your Next app. You can also one-click deploy on Vercel.
- Fully open-source, offering the flexibility of self-hosting or managed hosting.
- Fully TypeScript, eliminating the need to navigate through a UI - simply configure everything in code.
- Highly extensible, granting you full control over custom hooks, endpoints, and more. It's not just a CMS; you can extend it to become a comprehensive backend for any application you build.
- Use as a standalone app if you're working with other frameworks.
Get started in one line: npx create-payload-app@beta
Big thanks to our friends at 10xMedia.de, a Payload preferred agency, who created this video.
Переглядів: 1 748

Відео

Payload 3.0 update: The Next.js utopia on the horizon
Переглядів 13 тис.Місяць тому
PAYLOAD 3.0 UPDATE: On our recent Discord Community Call, we walked through what's remaining to reach Payload 3.0 stable (yes, this will make us *the* Next.js CMS), along with an assortment of exciting updates and feature additions coming to Payload. This call included updates on Lexical, React Compiler, SQLite, bi-directional relationships, performance improvements, production migrations, admi...
How to migrate from Wordpress to Payload
Переглядів 3,9 тис.2 місяці тому
Payload is quickly becoming the developer-preferred Next.js CMS and full-stack backend. And an increasingly common request we get is how to migrate an existing WordPress site to Payload. Considered a more flexible alternative to WordPress, Payload is fully TypeScript, offers an elegant admin panel to create content, and far more optimal developer experience. ⭐ Like what Payload is up to? Leave ...
Build Custom Features for the Lexical Editor in Payload: Part I
Переглядів 4,3 тис.3 місяці тому
A step-by-step developer guide to building custom features for the Lexical Rich Text Editor in Payload, the leading open-source headless CMS and application framework. With Payload Lexical, leave behind the clunky Wordpress Gutenberg or TinyMCE, and create an editor on your own terms. ⭐ Like what we're up to? Give us a ⭐ github.com/payloadcms/payload One of Payload's goals is to build the best ...
Contributing to Payload on Github
Переглядів 1,2 тис.4 місяці тому
Getting started with Payload? Here's how to contribute to Payload by opening issues on Github and making the product better. 🧠 ✨ In this example, Jarrod walk through the importance of providing a reproduction when reporting a bug. Payload on Github (remember to give us a ⭐!): github.com/payloadcms/payload Payload on Discord: discord.gg/payload
How to set up Payload with Supabase
Переглядів 6 тис.4 місяці тому
Learn how to set up Payload with @Supabase to create a powerful backend for your Next.js app! 👇 If you're deploying Payload, you need a database. With Payload, you can choose MongoDB or Postgres. Supabase provides a Postgres database and multiple S3 storage buckets-along with a generous free plan (500 MB database, 1 GB storage). ⭐ Like what we're up to? Leave us a star ⭐ github.com/payloadcms/p...
How to setup Tailwind CSS and shadcn/ui in Payload
Переглядів 4,8 тис.5 місяців тому
One of the most requested tutorials we are asked for is how to integrate Tailwind CSS, the still-contentious CSS utility framework that warrants no introduction, into the Payload admin panel. As a bonus, this tutorial will also cover integrating shadcn/ui. #css #webdevelopment #nextjs #tutorial #javascript ⭐ Find this useful? Give us a star! github.com/payloadcms/payload Join us on Discord: dis...
How to migrate from Contentful to Payload, a Next.js native CMS & app framework
Переглядів 3 тис.5 місяців тому
🚚 Migrating from Contentful to Payload? This is a deep dive into how to migrate a Contentful project to Payload 3.0. Even if migration isn’t on your radar, stick around as we explore concepts that are applicable on leveraging Payload 3.0 in general. ⭐ We're open source! Like what we're up to? Leave us a star ⭐ github.com/payloadcms/payload A primer on Payload ... - The fastest growing CMS in ou...
Install Payload Into Any Next.js App With One Line - 3.0 Beta Is Here!
Переглядів 28 тис.6 місяців тому
🎉🎉 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...
2024 Roadmap: We’ve Made a Next.js Decision (And A Lot More)
Переглядів 11 тис.10 місяців тому
What's to come for Payload in 2024? James Mikrut breaks it all down, including a decision around the much anticipated move to Next.js. Love what we're up to? Give us a star: github.com/payloadcms/payload Questions? Take it to Discord: discord.gg/payload
Payload Planning: Should Payload Move to Next.js?
Переглядів 3,8 тис.11 місяців тому
James Mikrut asked the question during his Next.js conference presentation, "Should Payload Move from Express to Next.js?" In our follow-up Discord event, James breaks down his talk, what it all means going forward, and answers questions from the community. Join the Payload Discord: discord.gg/payload Give us a Star on Github: github.com/payloadcms/payload
Build a Vercel Postgres Backend with Payload in 5 Minutes
Переглядів 15 тис.11 місяців тому
James walks through how to use Payload with Vercel Postgres in five minutes. Get started in one line: npx create-payload-app Like what we're up to? Give us a star: github.com/payloadcms/payload What's Payload? Payload is the best way to build a modern backend and admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
Easy Image Cropping and Focal Point Selection in a Headless CMS
Переглядів 2,3 тис.Рік тому
New in Payload 2.0, Jessica walks you through seamless image cropping and focal point selection. Get started: payloadcms.com Give us a Star on Github: github.com/payloadcms/payload
Exploring Payload 2.0: Postgres, Lexical RTE, Live Preview, and So Much More
Переглядів 9 тис.Рік тому
Payload 2.0 is here, and founder James Mikrut breaks down everything that is new! If you like what we're up to, give us a Star: github.com/payloadcms/payload
Payload 2.0 Has Launched!
Переглядів 2,1 тис.Рік тому
Payload 2.0 is live! 💥 If you love what we're up to, we have a small but important ask: support on Product Hunt! www.producthunt.com/posts/payload-2-0
How to Create a Custom Select Field: A Step-by-Step Guide
Переглядів 4,8 тис.Рік тому
How to Create a Custom Select Field: A Step-by-Step Guide
How to 10x your digital agency part 1 - dev efficiency
Переглядів 3,2 тис.Рік тому
How to 10x your digital agency part 1 - dev efficiency
Simplified Authentication for Headless CMS: Unlocking Reusability in One Line
Переглядів 11 тис.Рік тому
Simplified Authentication for Headless CMS: Unlocking Reusability in One Line
Overview of the Payload Form Builder Plugin
Переглядів 6 тис.Рік тому
Overview of the Payload Form Builder Plugin
Payload Planning: Database Support
Переглядів 1,8 тис.Рік тому
Payload Planning: Database Support
Deploy your entire stack in one place with Payload Cloud
Переглядів 1,2 тис.Рік тому
Deploy your entire stack in one place with Payload Cloud
Overview of Payload CMS Access Control
Переглядів 17 тис.2 роки тому
Overview of Payload CMS Access Control
It's 2022 - time to stop using headless WordPress. Payload is your headless WordPress alternative.
Переглядів 11 тис.2 роки тому
It's 2022 - time to stop using headless WordPress. Payload is your headless WordPress alternative.
Payload CMS Introduction - Closing the Gap Between Headless CMS and Application Frameworks
Переглядів 70 тис.2 роки тому
Payload CMS Introduction - Closing the Gap Between Headless CMS and Application Frameworks
Payload 1.0 is now available
Переглядів 5 тис.2 роки тому
Payload 1.0 is now available
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 4
Переглядів 15 тис.3 роки тому
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 4
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 3
Переглядів 11 тис.3 роки тому
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 3
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 2
Переглядів 14 тис.3 роки тому
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 2
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 1
Переглядів 60 тис.3 роки тому
Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 1

КОМЕНТАРІ

  • @user-vk9ff9gr4x
    @user-vk9ff9gr4x 18 годин тому

    This is great timing, I’m off that stupid WordPress. Just switched all my sites and a client site to Astro. Building another 2 in Astro as well.

  • @kalidsherefuddin
    @kalidsherefuddin 2 дні тому

    Thanks for

  • @adamviarsson6124
    @adamviarsson6124 3 дні тому

    Lovely update - "From beta to stable in the next 30 days" 😅

  • @gkiokan
    @gkiokan 5 днів тому

    You did great. Don't be nervous :)

  • @yavallejo
    @yavallejo 6 днів тому

    With all this WordPress madness, we will start exploring new options and this one looks very interesting. Thanks

  • @ricozuares
    @ricozuares 12 днів тому

    What about AppWriter?

  • @KratosCY
    @KratosCY 23 дні тому

    What about signing up? Social logins?

  • @shootingsuppliesltd
    @shootingsuppliesltd 23 дні тому

    What's the keyboard shortcut used for copilot?

  • @portmanroll
    @portmanroll 24 дні тому

    This was helpful, thanks! Will there be a second part eventually?

  • @ImranKhanjoya
    @ImranKhanjoya 28 днів тому

    Have anyone deployed payload on vercel??

  • @payloadcms
    @payloadcms Місяць тому

    Part 1 (backend migration to Payload): ua-cam.com/video/t1du7NKb60Y/v-deo.html

  • @payloadcms
    @payloadcms Місяць тому

    Part 2 (frontend migration to Payload): ua-cam.com/video/dnvQLFAXKw0/v-deo.html

  • @IsraelHoltzhausen
    @IsraelHoltzhausen Місяць тому

    I would like to implement ReCaptcha, I have managed to implement the client-side part which generates the token and submits with the POST request... but I can't see anyway to implement the validation server-side before an entry is committed to the database. I would like to ensure the forms have adequate spam protection - how would you recommend I do this with the Payload Form Builder Plugin?

  • @KratosCY
    @KratosCY Місяць тому

    This Wordpress migration does not work. It didn't work on the backend tutorial. I like the idea you guys have about WP to Payload but the migration script is really poorly written and not doing the job..

  • @sergey_c
    @sergey_c Місяць тому

    Like for the cat and dog in your room. It looks like they miss you) . Also like for you wonderful sense of humor)

  • @intebuddy
    @intebuddy Місяць тому

    When Cillian Murphy is suggesting you to migrate to Payload, you better should do that.

  • @JohnBuildWebsites
    @JohnBuildWebsites Місяць тому

    I keep getting `ERROR: InvalidAccessKeyId: The Access Key Id you provided does not exist in our records.` despite repeated attempts to replace and copy/paste a fresh one. Any ideas?

  • @arturkre5793
    @arturkre5793 Місяць тому

    damn, this is ridiculous how complicated and verbose this system is. At this point i can code my own editor and have much less code.

    • @mikecebul
      @mikecebul Місяць тому

      The editor is already full featured. You clearly will never need to modify it. What you'll do is just create blocks when needed.

    • @buzzeins
      @buzzeins Місяць тому

      had a same thought :)

  • @mr_phamtastic
    @mr_phamtastic Місяць тому

    Appreciate this! Can't wait for this!

  • @aquual1462
    @aquual1462 Місяць тому

    30 days was a bit optimistic

  • @sadeghnakhjavani1986
    @sadeghnakhjavani1986 Місяць тому

    What about HTML status code while redirecting?

  • @indigetal
    @indigetal Місяць тому

    I'd like to see something akin to themes in Payload. I use the Blocksy theme for WordPress that offers just a ton of features for advanced customizations and based on that experience this all seems like a lot of work to get to something that is more like a starter wordpress theme that is just a skeleton to develop a custom theme. I know that Payload can be integrated with Webstudio, but if the objective is to be a WordPress replacement (which I believe it could be for simple sites on one end of the spectrum, and fully custom applications on the other end of the spectrum, but not so much for everything else in the middle without a theme and plugin ecosystem to match), it needs to offer more fully-formed solutions for the most common use-cases. This is a baaaaaasic blog site and was sooo much busywork just to get to there. Make a blogging website package with all of this preconfigured. That's not even going to do much, what you really need to do is launch an open theme and plugin repository like WordPress.org and invite developers to expand Payload.

  • @byGDur
    @byGDur Місяць тому

    just started using it and it's pretty nice so far. well done!

    • @Raden-xv5lo
      @Raden-xv5lo 29 днів тому

      what about ease of use for clients?

  • @Jennifer-ju8de
    @Jennifer-ju8de Місяць тому

    Please create a full working tutorial. Setting up mongodb. file storage, installation of payload + nextjs + deployment. I would love to test payload, I have basic coding skills. None of the payload 3 tutorials work for me.

  • @Syndro_Deathblade
    @Syndro_Deathblade Місяць тому

    The links provided in the external Document for the Lexical Seralize and nodeFormat nolonger exist, could you please update so that these files that you mentioned would be available, are indeed available.

  • @sergiocastano6960
    @sergiocastano6960 Місяць тому

    Great tutorial! Any chance to have access to the Github repo of this specific project?

  • @code.design
    @code.design Місяць тому

    Please do a install + deploy video. I can’t install it… I run the install command it keeps crashing

  • @ftbhabook6637
    @ftbhabook6637 Місяць тому

    come on payload be serious.. I cannot even see the text on the screen why even post such videos... I want to use it and want to learn but how come on ??? the text is too much small whyy??? seriously lol

  • @lgiorgos1
    @lgiorgos1 Місяць тому

    Is authorisation available? For example admin and customer?

  • @stylrart
    @stylrart Місяць тому

    Don't need these migration advice becaus I left Wordpress years ago but you did an awesome job explaining, so I still learned a lot. Thanx man!

  • @leonardorick2404
    @leonardorick2404 Місяць тому

    Any plans on adding something similar to nxut (vue)

  • @Albertinouu
    @Albertinouu Місяць тому

    Is 3.0 comming with same e commerce template as 2.0 was?

  • @abdrahman-d7
    @abdrahman-d7 Місяць тому

    HOPE, stable relase will be soon

  • @NuRRRL96
    @NuRRRL96 Місяць тому

    I don't mean to come off as lazy, but can you make shorter vids only showcasing the software?

  • @anhvuuc8693
    @anhvuuc8693 Місяць тому

    is it too early to talk about this? i don't even know how to use payloadcms 3.0. payloadcms is too young to be migrating from a feature rich platform like wp to

  • @timrudenauer6449
    @timrudenauer6449 Місяць тому

    This is all so great! Thanks so much for finally bringing Content Management to this century🔥

  • @steve-adams
    @steve-adams Місяць тому

    I'm so pumped about this. I admit I was a little annoyed by the "Hopefully 3.0 in a month" thing when the beta was announced, but after seeing the progress you've made since the hopeful date, I'm remembering that good things are worth waiting for. This is all excellent work. I have a lot of confidence in your team.

    • @MrLumatic
      @MrLumatic 11 днів тому

      @James is like Elon Mask, always too optimistic with timeframes, but finally overdelivering after long delay. Always worth to wait! :D

    • @steve-adams
      @steve-adams 11 днів тому

      @@MrLumatic Haha, in my opinion you haven't developed real software if you haven't blown a timeline or two anyways.

  • @CHEF_ALMERIA
    @CHEF_ALMERIA Місяць тому

    Please make membership implementation and stripe to manage monthly SUSCRIPTIONS....

  • @_Wild_Wanderlust_
    @_Wild_Wanderlust_ Місяць тому

    Thank you for this tutorial payload, I followed every step till I got to the storage-s3 part. After setting the legacy peer deps to true, I get the following error message. Wonder if you could help. Thank you very much in advance. Error: Mismatching payload dependency versions found: payload@3.0.0-beta.90, @payloadcms/plugin-cloud-storage@3.0.0-beta.29. All payload and @payloadcms/* packages must have the same version. This is an error with your set-up, caused by you, not a bug in payload. Please go to your package.json and ensure all payload and @payloadcms/* packages have the same version. Following are the dependencies: "dependencies": { "@payloadcms/db-postgres": "beta", "@payloadcms/next": "beta", "@payloadcms/plugin-cloud": "beta", "@payloadcms/richtext-lexical": "beta", "@payloadcms/storage-s3": "^3.0.0-beta.29", "cross-env": "^7.0.3", "graphql": "^16.8.1", "next": "15.0.0-canary.104", "payload": "beta", "react": "19.0.0-rc-06d0b89e-20240801", "react-dom": "19.0.0-rc-06d0b89e-20240801", "sharp": "0.32.6" },

    • @thezeppo
      @thezeppo Місяць тому

      You need to install the storage version that matches the payload beta version, so in your case you have "payload@3.0.0-beta.90" so install storage-s3@3.0.0-beta.90 You'll probably have a high vulnerability, if you audit fix it'll change the version so don't do that. I found this out the hard way :) Obviously (hopefully?) when out of beta these won't be issues

  • @quornik
    @quornik Місяць тому

    Quick question: Does it work in PayloadCMS 2.0 or in 3.0 beta only?

  • @__haah
    @__haah Місяць тому

    PL team, you are legends 🔥

  • @howuseehim
    @howuseehim Місяць тому

    Can we get ecommerce type tutorial

    • @payloadcms
      @payloadcms Місяць тому

      Yes, this is being planned upon release of 3.0.

    • @howuseehim
      @howuseehim Місяць тому

      ​@payloadcms thank you 🎉

  • @timsmith5449
    @timsmith5449 Місяць тому

    bud heavy... in any other country just called a normal beer :D

  • @sylensdrake9706
    @sylensdrake9706 Місяць тому

    I’m rly not a big fan of the component paths. You will no longer get references

  • @somaralhussien2899
    @somaralhussien2899 Місяць тому

    Amazing news 🎉

  • @M1a2n3o43
    @M1a2n3o43 Місяць тому

    I was wondering, why didnt payload use an orm like prisma or drizzle but instead invented yet another orm? I am familiar with prisma so i am wondering if i can use payload together with prisma. Is there a way to tell payload to use prisma schema instead of the payload collections

    • @JamesMikrut
      @JamesMikrut Місяць тому

      We do use Drizzle!

    • @M1a2n3o43
      @M1a2n3o43 Місяць тому

      @@JamesMikrut i apologize for my comment 🤦. I watched a short tutorial for payload and somehow i missed that. i have only used prisma before so maybe i didnt recognize that payload was using drizzle. I will surely learn drizzle because i want to use payload when v3 releases. You guys are doing amazing work 👍 keep it up.

  • @ssygon2
    @ssygon2 2 місяці тому

    When's the next update for an ecom solution (auth, cart, products, tax, payments, orders, emails, etc.) 😂 ? I'm just wishful thinking here like WooCommerce, if Payload can already replace Wordpress+ACF

    • @KratosCY
      @KratosCY 2 місяці тому

      I am also thinking that... Wordpress/Woocommerce/Shopify to Payload migration would be an EPIC advancement in CMS world

    • @payloadcms
      @payloadcms Місяць тому

      @@KratosCY There's a WP to Payload migration video (frontend coming by end of week). Woocommerce migration could be doable. 🤔ua-cam.com/video/t1du7NKb60Y/v-deo.html

  • @ssygon2
    @ssygon2 2 місяці тому

    Love how PayloadCMS just focuses on creating datamodels for different types of data(text, images, etc), like some other types of CMS I've used. Looks fast too: Question: When you setup the datamodels BlogCategories, etc at 12:24 Then register them at 13:00, and the collections now automatically show up. But what if I start adding new blogCategory data entries, and then via code, I rename or remove a fieldname, from that BlogCategories datamodel? After removing that field, will the data values for that field be corrupted/deleted or (still remain there, if i re-add back the removed fieldname via code)? Also I'm guessing just renaming the fieldname via code, shouldn't accidentally cause data corruption/loss?

  • @KratosCY
    @KratosCY 2 місяці тому

    Thanks for making this video for people who will convert to Payload from Wordpress. However, the migration scripts unfortunately didn't work for me. Additionally, don't you think it is better if we used wp-json API on Wordpress to fetch all the data instead of dealing with the difficulty of XML?

  • @vnrkk
    @vnrkk 2 місяці тому

    Inline blocks / references / links inside table cells would be really nice if not already there as this is a feature that is missing from many other CMSs and is always a thing that customers ask for.