Payload CMS Release: 3.0.0-beta.36

TL;DR

Payload CMS v3.0.0-beta.36 brings significant updates including React 19 and Next.js 15 support, UI improvements, and rich text editor enhancements. This release introduces breaking changes with updated minimum version requirements and component import path changes, but delivers improved performance, better UX, and new features like server-side theme detection and Hebrew translations.

Highlight of the Release

• Support for Next.js 15 and React 19 with React Compiler compatibility
• New website template added to the CMS
• Significant UX and performance improvements to the Lexical rich text editor
• Server-side theme detection for improved user experience
• Added Hebrew translation support
• Fixed various UI issues including field errors in light mode
• Improved block dragging experience in the rich text editor

Migration Guide

Upgrading to Next.js 15 and React 19

1. Update your Next.js dependency to version 15.0.0-rc.0 or higher:

   npm install next@latest
   # or
   yarn add next@latest
   # or
   pnpm add next@latest
   

2. Update React and React DOM to version 19.0.0:

   npm install [email protected] [email protected]
   # or
   yarn add [email protected] [email protected]
   # or
   pnpm add [email protected] [email protected]
   

3. For correct TypeScript types, update your type definitions using overrides:

   // package.json
   "overrides": {
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]"
   }
   

   For pnpm users:

   // package.json
   "pnpm": {
     "overrides": {
       "@types/react": "npm:[email protected]",
       "@types/react-dom": "npm:[email protected]"
     }
   }
   

Button Component Import Path Changes

If you were importing button components directly, update your import paths:

Old:

import { PublishButton } from '@payloadcms/ui/elements/Publish'
import { SaveButton } from '@payloadcms/ui/elements/Save'
import { SaveDraftButton } from '@payloadcms/ui/elements/SaveDraft'

New:

import { PublishButton } from '@payloadcms/ui/elements/PublishButton'
import { SaveButton } from '@payloadcms/ui/elements/SaveButton'
import { SaveDraftButton } from '@payloadcms/ui/elements/SaveDraftButton'

Upgrade Recommendations

This is a beta release (v3.0.0-beta.36) with significant changes, including breaking changes to minimum required versions of Next.js and React.

For production environments:

• If you're already using the v3 beta series, upgrading to this version is recommended to benefit from the bug fixes and performance improvements.
• If you're on a stable v2.x release, it's advisable to wait for the final v3.0.0 release before upgrading production environments.

For development and testing environments:

• Upgrading to this beta is recommended to test compatibility with your codebase and prepare for the upcoming stable release.
• Pay special attention to the breaking changes, particularly the React 19 and Next.js 15 requirements.

Before upgrading:

1. Review the breaking changes section carefully
2. Update your Next.js and React dependencies as specified
3. Test thoroughly in a development environment before deploying to production
4. Update any custom components that import the renamed button components

Bug Fixes

UI and Accessibility Fixes

• Fixed field errors not appearing in red in light mode, improving error visibility
• Fixed disableListColumn fields not being properly hidden in table columns
• Added host to initPage request creation for proper request handling

Rich Text Editor Fixes

• Fixed inconsistent ordering of add/drag handles between gutter and no-gutter modes
• Resolved issue with link drawer sending too many form state requests for actions unrelated to links
• Fixed isHotKey webpack error affecting keyboard shortcuts

Performance and Optimization

• Optimized global document permissions and publish access data loading
• Fixed various performance bottlenecks in the rich text editor

New Features

Next.js 15 and React 19 Support

The CMS now supports Next.js 15 and React 19, including compatibility with the React Compiler. This brings performance improvements and access to the latest features from these frameworks.

Website Template

A new website template has been added to the CMS, providing developers with a ready-to-use foundation for website projects.

Rich Text Editor Improvements

The Lexical rich text editor has received numerous enhancements:

• Improved block dragging UX for more intuitive content manipulation
• Better gutter, error states, and add/drag handle interactions
• Performance optimizations for smoother editing experience
• More consistent ordering of add/drag handles between gutter and no-gutter modes

UI Enhancements

• Split up Select component into Select and SelectInput for better flexibility
• More consistent button naming conventions (though this introduces breaking changes to import paths)
• Server-side theme detection for improved user experience

Internationalization

Added Hebrew translation support, expanding the CMS's language capabilities.

Security Updates

No specific security fixes were mentioned in this release.

Performance Improvements

Rich Text Editor Performance

The Lexical rich text editor has received significant performance improvements:

• Reduced unnecessary form state requests from the link drawer
• Optimized block handling and rendering
• Improved overall responsiveness during editing operations

Data Loading Optimization

• Optimized global document permissions and publish access data loading
• More efficient handling of form state requests

UI Rendering Improvements

• Better handling of component rendering and updates
• Improved theme detection and application
• More efficient table column handling

Impact Summary

This beta release represents a significant step forward for Payload CMS with its adoption of React 19 and Next.js 15, positioning the CMS at the cutting edge of web development technologies. The upgrade brings notable performance improvements through React Compiler compatibility and optimized data handling.

For developers, the most impactful changes are the breaking updates to minimum required versions and component import paths, which will require code modifications. However, these changes enable access to the latest features and performance improvements from React and Next.js.

Content editors will benefit from the enhanced rich text editing experience, with improved block dragging, better error states, and more intuitive UI elements. The server-side theme detection also provides a more consistent user experience.

The addition of Hebrew translations expands the CMS's accessibility to more users worldwide, while the new website template offers developers a valuable starting point for new projects.

Overall, this release balances forward-looking technology adoption with practical improvements to the user experience, making it a worthwhile upgrade despite the breaking changes required.

Full Release Notes