Exploring the Game-Changing Features of Payload CMS 3.0
With the release of Payload CMS 3.0, content management just became even more powerful and flexible. Packed with new features, improved performance, and enhanced customization options, Payload 3.0 brings exciting changes that will help developers and content managers take full control of their digital experience.
Whether you're creating custom endpoints, streamlining your workflows, or building highly tailored content structures, this latest version is designed to give you the tools you need to elevate your projects to the next level.
In this post, I'll cover the standout features of Payload 3.0 and how you can leverage them to build faster, more dynamic applications.
In this article:
- What are the key standout features in the new release.
- Benefits of Payload 3.0 on Next.js
- Does Payload make the ideal stack?
- Advantages over other cloud based solutions.
- Improved benefits for content managers.
- Who is most likely to benefit from using Payload 3.0?
- Seamless Cloud deployment.
When I first heard the Payload team mention that they were considering a full move to a native Next.js solution, I was definitely curious and began to experiment and follow the early beta releases.
After building a couple apps on the new version, I have been extremely satisfied with the latest release and definitely wanted to take a minute to highlight some of the new features.
So without too much build up, let's dive in.
Payload 3.0 is now native Next.js
The big news is that Payload 3.0 is now a fully native Next.js CMS framework. This change alone really sets it apart from the previous versions and streamlines setup and configuration.
Challenges In Payload Version 2.0
Here's a quick breakdown of the pain points on version 2.0:
- Used Express server using nodemon.
- Needed full nodemon restarts in dev mode versus using HMR.
- Both Next.js and Payload 2.0 needed some complex route mapping and redirects, plus, configuration was a bit tricky due to different compilation cycles.
- Different bundles for server and client.
- Deployment was not as streamlined and required some NPM scripts to prep code.
Improvements in Payload Version 3.0
Here are the benefits of going Next.js native, which include:
- No more nodemon server restarts for dev mode.
- All Payload services now use Next.js app router instead of Express.
- Next.js optimizes Payload endpoints to be Edge ready.
- Improved developer-friendly experience with HMR powered by Next.js.
- Utilizes Next.js SWC Rust based compilation which offers significantly faster build times over Babel transpilers.
- Next.js builds Payload and your apps into a single fully optimized bundle for deployment.
- Can be used in workspace environments since Next.js will handle builds.
- Can be easily deployed to any cloud or legacy shared hosting that supports Node and Next.js.
These are just some of the key benefits of moving to Next.js native.
Now I'll cover some of the key feature enhancements that are noteworthy.
Payload 3.0 now uses the Next.js app router
Benefits of using the app router:
- All Payload framework services are now under the app router.
- Next.js can now manage these endpoints and pages to provide a better developer experience overall.
- No need for unnecessisary redirects and mapping in configuration to bring these two environmemts together.
- Payload uses route groups to isolate the Payload framework and Admin UI from your actual app (your-app).
- route groups provide the ideal isolation for each route group to have its own layouts and styles.
- Admin UI is completely customizable using the custom.scss under (payload)
- Payload framework routes are fully managed by Next.js and build into the .next folder.
- Payload can now utilize better (SSR) Server Side Rendering than before using (RSC) React Server Components.
- Payload can now benefit from Next.js streaming for better UI experience.
- Lastly, both Payload and your apps can benefit from (SSG) Static Site Generation during Next.js production build lifecycle for better performance.
The Payload framework fits nicely into its own route group and has complete separation from (your-app) and routes.
Payload inside app directory
└── src
└── app
├── (your-app)
│ ├── home
│ │ └── page.tsx
│ └── layout.tsx
└── (payload)
├── admin
├── api
├── custom.scss
└── layout.tsx
Improved Payload Collections
One of the key feature improvements of Payload 3.0 is its powerful ORM-like Collections which might sound familiar if your coming from relational database management background.
Payload provides an excellent way to abstract the complexity of database interaction using a strongly typed configuration file.
For more information, you can read an Payload CMS Collections: How They Streamline Content Management for a more in-depth overview of Collections.
Collections can be completely defined without having to make any schema changes through a UI interface.
Each Collection can be configured with built-in fields to create easy to manage content authoring interfaces.
Collections Now Support Join Fields
Here's some of the Collection relationship enhancements in Payload 3.0:
- Addition of the join field type to provide full support for bi-directional relationships used in one-to-one, one-to-many or many-to-many mappings.
- Full Admin UI support for managing content for both relationship and join types.
- Support for bi-directional querying, which is useful when you need the inverse adjoining Collection data in a query response.
The Payload Admin UI view for a simple post Collection has built-in support for managing adjoining relationship columns.
- posts: Shows column data for categories.
- categories: Shows column data for related posts.
The inverse categories join shows the related posts.
These changes are a great enhancement and give developers more flexibility over querying data. It also adds completeness to Collection relationships.
Support for Context Hooks
Prior to Payload 3.0, all hooks acted on data independently, so the context hook was added with the following benefits:
- Allows hooks at all scopes, global, collection and field level to have access to a common request context object to share context data throughout the life of an API request.
- Can pass along contextual data across many Collections and different hooks.
Traditional backend frameworks like Java have supported a similar request context model and now Payload provides maximum flexibility over the request lifecycles.
Enhanced Rich Text For Content Authoring
Payload has already provided full support for the following rich text editors:
- Lexical (Default): Using the Payload package
@payloadcms/richtext-lexical.
- Slate: Using the Payload package
@payloadcms/richtext-slate.
The default Lexical editor is set up for basic text editing but can be fully customized to support custom blocks.
Rich Text Supports Custom Content Blocks
Having a fully customizable rich text editor has become a key component for optimal content authoring.
Payload's rich text content editors are capable of page building and inserting block level content, such as banners, media, heros and other useful custom components.
This makes it possible to create and use your own custom Payload content block components over preset block options or standard HTML tag insertion.
For a more in-depth article on creating content blocks see Maximizing Efficiency: The Power of Payload CMS Blocks
These rich text editors are highly configurable and customizable, so this is a huge plus for content managers. This goes way beyond simple WYSIWYG editors of the past.
Jobs Queue
Another really powerful addition to the Payload 3.0 framework is its Jobs Queue.
This is an excellent way to offload longer running workloads in a non-blocking way. Benefits include support for:
- Tasks: a simple function that performs operations on input and output, like sending a welcome email, or other needed tasks.
- Workflows: Combines multiple Tasks together to chain certain responsibilites in a non-blocking way. For example, a media upload may need to go through moderation steps.
- Job: While Workflows and Tasks control the logic of units of work, Jobs oversee the execution and completeness of work.
- Queues: Similar to Jobs but Queues process Workflows and Tasks in order, or first in, first out basis.
- Scheduled actions: Similar to cron jobs and executes on scheduled times.
- Periodic sync: Similar to Scheduled actions but more for things like syncing with 3rd party services and such.
This is a very powerful addition and essential for any full stack system.
Note: This is not a replacement for high volume injestion cloud computing clusters but more for non-blocking Collection operations. Having the ability to start a job to do some background work rather than relying on a Promise operation is essential.
Payload Plugins
Even though plugins are not a new feature in the Payload 3.0 release, they are a key part of the Payload CMS framework.
The benefits of plugins include:
- Makes functionality reusable and can be externalized and published as NPM packages.
- Plugins have access to the root configuration and can transform it anyway needed.
- Can add, remove, modify any Collections, Fields and Globals.
- An Excellent way to offload configuration responsibility and make functionality modular on the backend.
Plugins offer the perfect way to build a community of modular features to enhance future versions of Payload.
Payload currently provides many very useful plugins to enhance any project.
The Payload SEO plugin is great place to start if you want to learn more about what plugins can do on Payload framework, see Payload CMS SEO Plugin: Boosting Your Site's Search Ranking
Advantages over other cloud based solutions?
Now that we've seen a few of the latest features, how is Next.js and Payload 3.0 different from other Headless CMS stacks?
- Payload CMS is local and lives in your own code base.
- Payload CMS is a headless, API-first CMS built with flexibility and developer control in mind.
- Better collaboration for content managers, developers and designers.
- No predefined themes, structures or interfaces, Payload allows developers to create full custom content models.
- Payload has one of the most advanced content management interface building systems that I've worked on. It not only supports data management but builds powerful Admin UI forms that truly represent your data.
- Has powerful hooks for transforming and validating data without the need to rely on webhooks or additional endpoints.
With the latest version moving entirely to Next.js, let's also take a look at some of the benefits of even using Next.js.
Next.js and Server Side Rendering (SSR)
As fast as the JavaScript React industry rushed to make everything a Single Page App (SPA) and render purely on the client browser, everything has shifted back to a Server Side Rendering (SSR) first aproach.
If you've been a full stack developer for a while, you might have noticed that we've come full circle back to server first rendering.
Benefits of using Next.js:
- Simplifies building SSR React apps.
- Improves page load times overall by maximizing SSR.
- Supports some of the latest React features like React Server Components (RSC) and Server Actions to make server side functionality easier than ever before.
- Provides advanced compilation strategies to opimize pages for SSR and SSG
- A great developer experience.
Content Management and Authoring
The true advantage in a framework like Payload over other solutions is that it provides optimal content authoring benefits including:
- Full Admin UI to management content without the need to build these interfaces in-house.
- Allows developers, designers and content authors to work closer together in a more collaborative way.
- Developers will spend more time implementing new design ideas like custom block components and admin pages, rather than building low-level boilerplate code.
- Most of development time will be spent on business and marketing solutions.
Who is Payload's Ideal Customer?
After building several apps using Payload CMS and getting the feel for this framework, it has really become a solid choice as an end to end solution.
As with every application framework there are a few things to note:
- Every technology has its learning curves and Payload has its share. However, it's a very intuitive framework and I was able to quickly start building apps.
- Paload does require developer experience to add new features, so that should be understood at the start but it can be managed by a single full stack developer or a team to build amazing apps.
In Conclusion
Payload and Next.js in my opinion is an excellent combination for building your next business idea with any size team. Using a Headless CMS is fastest way to build enterprise SaaS apps.
After migrating from Payload 2.x to 3.x, the framework has become a very stable and reliable framework for building any kind of application.
I'm excited and curious to see how the framework evolves over time and on its current trajectory it's likely to continue to get better.
I hope this article has helped to better understand the latest features and enhancements of Payload CMS 3.0.