Payload 3.0 now works seamlessly with Next.js
Have you heard about the latest release of Payload 3.0?
We are genuinely excited about this software update! The most amazing part of the update is that Payload can now be installed straight into the Next.js app with a single command, combining your CMS and front end into one unified project. Payload CMS installs directly into your Next.js app folder without any third-party SaaS services, the process can't get more open source. But only if you want to, there are options for those who want to keep them separated as well. All we can say is that his integration has simplified our workflows, improved performance, and enhanced our engineers' developer experience. If working with Payload was a breeze before, now it's even better!
Key new Payload 3.0 features include:
- Easy installation -use one simple line of code to get started quickly;
- Full ESM support - Payload is now fully modernized with ECMAScript Modules;
- Vercel deployment - deploy your app serverlessly with ease;
- Turbopack ready - enjoy faster build speeds and efficient bundling;
- Server components - separate server and client code effortlessly, improving maintainability.
The new integration ensures your CMS schema changes and frontend updates remain in sync, reducing complexity and enhancing productivity. Payload's modular architecture also makes it compatible with other frameworks like SvelteKit, Nuxt, and Remix. Its local API directly interacts with the database, eliminating unnecessary HTTP layers and improving performance.
So what changed in Payload 3.0
As we mentioned before, the main modernization in Payload 3.0 is that it is now Next.js native, allowing Payload to install directly in your Next.js app’s folder structure. There are no restrictions or a need to use third-party SaaS services with free trials or tiers—it’s entirely yours to use. You can deploy Payload anywhere, including serverless platforms like Vercel, for free, in containers, or any other environment you choose.
Payload's tight integration with Next.js means there’s no longer a need to maintain separate frontend and backend systems unless you specifically prefer to do so. For developers already using Next.js for their frontend, this effectively reintroduces a "head" to headless CMS functionality, combining advanced templating, rendering, and dynamic components directly within Payload.
Additionally, PostgreSQL and Lexical have now been declared stable after extensive testing over the past year. Payload 3.0 also introduced new database adapters for SQLite and Vercel PostgreSQL, leveraging Drizzle to ensure consistent functionality across all three.
Simplified exports and ESM integration
Payload’s exports are now straightforward and user-friendly. Utilities, types, and components can be easily imported using import { AnyType } from 'payload'. For UI components like buttons, use import { Button } from '@payloadcms/ui'. The entire export system is now simplified.
Payload has also transitioned to ECMAScript Modules (ESM), aligning with modern JavaScript standards and improving compatibility with current Node.js developments.
Direct database access with server components
Payload now uses server components and functions to access and manipulate data directly in your database, bypassing third-party APIs. This approach offers faster speed and efficiency for managing data in Next.js applications. Currently, Payload is the only CMS supporting this functionality.
Increased framework portability
Payload 3.0 is more adaptable than ever. It seamlessly integrates with frameworks like Astro, SvelteKit, Remix, and other Node environments. When used in setups like Remix, unnecessary features—such as the admin panel or GraphQL—are excluded, ensuring a lightweight and efficient implementation. The dependency count has been reduced significantly, from 88 in version 2.0 to just 27 in 3.0.
New features based on community feedback
Several new capabilities were added based on feedback from the community and enterprise clients:
- Join field: Simplifies complex database relationships, allowing efficient queries like listing movies by a specific director.
- Select and populate APIs: Optimize queries by fetching only required fields, reducing JSON output and improving performance.
- Enhanced lexical editor: Includes inline references, block-level components, and improved customization options for rich text editing.
- Task queue: A robust job queue system lets you schedule and manage tasks independently of the main API, supporting workflows with multiple steps.
- Bulk uploads: Upload multiple files simultaneously, ideal for galleries or large media collections.
Stability and performance enhancements
SQLite and Vercel PostgreSQL database adapters were introduced, offering consistent performance. Now relationships are stored more efficiently, and advanced PostgreSQL features like JSON and point data types are supported. Also, the live preview is now stable and supports server components for a fully server-rendered experience.
Usability improvements
Other updates include better file upload management, localized field indicators, improved logging customization, and more control over publishing locales.
Payload 3.0 also introduces design refinements, such as virtual fields, customized CSS layers, and new toast notifications, ensuring a smooth and intuitive user experience.
Deployment and integration
Payload is deployable on serverless platforms like Vercel, as well as in containerized environments. The addition of compatibility with services like UploadThing for file storage and potential support for Cloudflare Workers further expands its deployment versatility.
Overall, Payload 3.0 delivers powerful tools setting a new benchmark for CMS flexibility and efficiency.
With all these great improvements, Payload 3.0 is stable, and we suggest you check it out if you haven't yet. You can do so with this one line of code added to your Next.js app folder:
$ pnpx create-payload-app
You can also examine the new features more closely on Github or Payload's official website. With these great features in Payload 3.0, our team is looking forward to 4.0, which promises more features and a modernized admin panel to increase customization and usability.
