payload
payload copied to clipboard
payloadcms
feat: next.js 16 support
~~Latest pre-release: 3.64.0-internal.23abf20~~ use the latest Payload release.
This PR updates this monorepo and all templates to use Next.js 16. Running our test suites against Next.js 16 is required to guarantee support.
Individual, Next.js 16-related fixes, will be made in separate, smaller PRs (listed below).
Current Status / Known Issues
I do not recommend using Next.js 15.5+ or 16+ with Payload yet - please stay on Next.js 15.4.7. I you'd like to use Next.js 15.5 or 16, keep the following in mind:
- Turbopack build: Turbopack build is currently not supported. Previous attempts to support it resulted in bundle size issues. See this PR for details
-
HMR:
- On webpack (
next dev --webpack), HMR should work without any issues - On turbopack, HMR may flood your console with errors if you're using turbopack. This does not seem to break anything and can be ignored, just keep that in mind. I reproduced this only on live-preview enabled pages. Another user reported this with live-preview disabled when using Preview URLs
- On webpack (
-
Admin Panel:
- You may run into occasional hydration errors when navigating through the admin panel
- Navigating through the admin panel, at least during dev and when using turbopack, may feel slower. This issue was introduced in 15.4.2-canary.17. It's present in both Next.js 15.5 and Next.js 16
When is Next.js 16 support ready? What are we waiting on?
Before we can guarantee full support for Next.js 16, the following issue must be resolved:
- Turbopack HMR stability - vercel/next.js#85883 Currently breaks when a live-preview–enabled page is open (related Payload issue). The Next.js team is actively working on a fix: PR #86239.
We may also need to wait for vercel/next.js#84029 to be resolved. However, hydration errors can likely be suppressed temporarily, allowing us to ship Next.js 16 support without it.
Turbopack Build support is not required for the initial release. The Next.js team is developing a solution that will enable this: PR #86375.
List of Next.js 16-related PRs that were extracted from this branch
- https://github.com/payloadcms/payload/pull/14502
- https://github.com/payloadcms/payload/pull/14558
- https://github.com/payloadcms/payload/pull/14475
- https://github.com/payloadcms/payload/pull/14474
- https://github.com/payloadcms/payload/pull/14473
- https://github.com/payloadcms/payload/pull/14463
- https://github.com/payloadcms/payload/pull/14462
📦 esbuild Bundle Analysis for payload
This analysis was generated by esbuild-bundle-analyzer. 🤖
| Meta File | Out File | Size (raw) | Note |
|---|---|---|---|
| packages/next/meta_index.json | esbuild/index.js | 815.93 KB | ⚠️ +5.77 KB (+0.7%) |
| packages/payload/meta_index.json | esbuild/index.js | 1.23 MB | ⚠️ +2.04 KB (+0.2%) |
| packages/payload/meta_shared.json | esbuild/exports/shared.js | 164.33 KB | ⚠️ +204 B (+0.1%) |
| packages/richtext-lexical/meta_client.json | esbuild/exports/client_optimized/index.js | 281.03 KB | ✅ -2 B (-0.0%) |
| packages/ui/meta_client.json | esbuild/exports/client_optimized/index.js | 1.16 MB | ⚠️ +5.69 KB (+0.5%) |
| packages/ui/meta_shared.json | esbuild/exports/shared_optimized/index.js | 14.39 KB | ⚠️ +2 B (+0.0%) |
Largest paths
These visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
| Path | Size |
|---|---|
| ../../node_modules | ${{\color{Goldenrod}{ ████████████████████▎ }}}$ 81.4%, 660.47 KB |
| dist/views/Version | ${{\color{Goldenrod}{ █▌ }}}$ 6.2%, 50.26 KB |
| dist/views/Document | ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 15.45 KB |
| dist/views/List | ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 11.28 KB |
| dist/views/Root | ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 8.97 KB |
| dist/views/API | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 6.01 KB |
| dist/views/Versions | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.96 KB |
| dist/elements/Nav | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.53 KB |
| dist/views/Account | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.32 KB |
| dist/elements/DocumentHeader | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.81 KB |
| dist/views/Login | ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.39 KB |
| dist/views/Dashboard | ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 3.69 KB |
| dist/views/ForgotPassword | ${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB |
| dist/layouts/Root | ${{\color{Goldenrod}{ }}}$ 0.4%, 2.91 KB |
| dist/templates/Default | ${{\color{Goldenrod}{ }}}$ 0.3%, 2.83 KB |
| dist/views/CreateFirstUser | ${{\color{Goldenrod}{ }}}$ 0.3%, 2.76 KB |
| dist/views/BrowseByFolder | ${{\color{Goldenrod}{ }}}$ 0.3%, 2.58 KB |
| dist/views/CollectionFolders | ${{\color{Goldenrod}{ }}}$ 0.3%, 2.46 KB |
| dist/views/ResetPassword | ${{\color{Goldenrod}{ }}}$ 0.3%, 2.41 KB |
| dist/views/Logout | ${{\color{Goldenrod}{ }}}$ 0.2%, 1.92 KB |
| (other) | ${{\color{Goldenrod}{ ████▋ }}}$ 18.6%, 150.79 KB |
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
| Path | Size |
|---|---|
| ../../node_modules | ${{\color{Goldenrod}{ █████████████████▏ }}}$ 68.8%, 843.13 KB |
| dist/fields/hooks | ${{\color{Goldenrod}{ ▉ }}}$ 3.5%, 43.31 KB |
| dist/collections/operations | ${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 36.40 KB |
| dist/auth/operations | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 15.23 KB |
| dist/queues/operations | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.11 KB |
| dist/globals/operations | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.98 KB |
| dist/fields/config | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.95 KB |
| dist/utilities/configToJSONSchema.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.83 KB |
| dist/fields/validations.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.21 KB |
| dist/bin/generateImportMap | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB |
| dist/database/migrations | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.07 KB |
| dist/collections/config | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.90 KB |
| dist/uploads/fetchAPI-multipart | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.74 KB |
| dist/index.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.65 KB |
| dist/config/orderable | ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.27 KB |
| dist/collections/endpoints | ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.00 KB |
| dist/auth/strategies | ${{\color{Goldenrod}{ }}}$ 0.4%, 5.50 KB |
| dist/config/sanitize.js | ${{\color{Goldenrod}{ }}}$ 0.4%, 5.49 KB |
| dist/auth/endpoints | ${{\color{Goldenrod}{ }}}$ 0.4%, 5.42 KB |
| dist/utilities/telemetry | ${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB |
| (other) | ${{\color{Goldenrod}{ ███████▊ }}}$ 31.2%, 383.05 KB |
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
| Path | Size |
|---|---|
| ../../node_modules | ${{\color{Goldenrod}{ ███████████████████▊ }}}$ 79.1%, 127.13 KB |
| dist/fields/validations.js | ${{\color{Goldenrod}{ █▌ }}}$ 6.3%, 10.21 KB |
| dist/fields/baseFields | ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 2.79 KB |
| dist/utilities/deepCopyObject.js | ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 2.48 KB |
| dist/auth/cookies.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 1.55 KB |
| dist/utilities/flattenTopLevelFields.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 1.42 KB |
| dist/fields/config | ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.28 KB |
| dist/utilities/flattenAllFields.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 943 B |
| dist/folders/utils | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 916 B |
| dist/utilities/getVersionsConfig.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 895 B |
| dist/utilities/unflatten.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 779 B |
| dist/utilities/sanitizeUserDataForEmail.js | ${{\color{Goldenrod}{ }}}$ 0.4%, 713 B |
| dist/utilities/getFieldPermissions.js | ${{\color{Goldenrod}{ }}}$ 0.4%, 651 B |
| dist/collections/config | ${{\color{Goldenrod}{ }}}$ 0.4%, 570 B |
| dist/bin/generateImportMap | ${{\color{Goldenrod}{ }}}$ 0.3%, 561 B |
| dist/auth/sessions.js | ${{\color{Goldenrod}{ }}}$ 0.3%, 525 B |
| dist/utilities/getSafeRedirect.js | ${{\color{Goldenrod}{ }}}$ 0.3%, 423 B |
| dist/utilities/deepMerge.js | ${{\color{Goldenrod}{ }}}$ 0.3%, 413 B |
| dist/utilities/formatLabels.js | ${{\color{Goldenrod}{ }}}$ 0.2%, 380 B |
| dist/utilities/appendUploadSelectFields.js | ${{\color{Goldenrod}{ }}}$ 0.2%, 360 B |
| (other) | ${{\color{Goldenrod}{ █████▏ }}}$ 20.9%, 33.69 KB |
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
| Path | Size |
|---|---|
| dist/features/blocks | ${{\color{Goldenrod}{ ███▏ }}}$ 12.6%, 35.02 KB |
| dist/lexical/plugins | ${{\color{Goldenrod}{ ██▉ }}}$ 11.5%, 32.00 KB |
| dist/lexical/ui | ${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 24.36 KB |
| dist/features/experimental_table | ${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 23.70 KB |
| dist/packages/@lexical | ${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 18.99 KB |
| dist/features/link | ${{\color{Goldenrod}{ █▋ }}}$ 6.5%, 18.04 KB |
| dist/features/toolbars | ${{\color{Goldenrod}{ █▌ }}}$ 6.4%, 17.75 KB |
| dist/features/upload | ${{\color{Goldenrod}{ █▏ }}}$ 4.9%, 13.73 KB |
| dist/features/textState | ${{\color{Goldenrod}{ █ }}}$ 4.0%, 11.08 KB |
| dist/features/relationship | ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 8.96 KB |
| dist/lexical/utils | ${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 8.22 KB |
| dist/features/debug | ${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.39 KB |
| dist/utilities/fieldsDrawer | ${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 7.12 KB |
| dist/features/converters | ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 7.04 KB |
| dist/lexical/config | ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.08 KB |
| dist/features/lists | ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.00 KB |
| dist/features/format | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 3.46 KB |
| dist/lexical/LexicalEditor.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.17 KB |
| dist/lexical/theme | ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.62 KB |
| dist/features/indent | ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.50 KB |
| (other) | ${{\color{Goldenrod}{ █████████████████████▊ }}}$ 87.4%, 242.76 KB |
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
| Path | Size |
|---|---|
| ../../node_modules | ${{\color{Goldenrod}{ ████████████▌ }}}$ 50.1%, 578.42 KB |
| dist/elements/FolderView | ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 29.18 KB |
| dist/elements/BulkUpload | ${{\color{Goldenrod}{ ▌ }}}$ 2.3%, 27.11 KB |
| dist/elements/WhereBuilder | ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 16.85 KB |
| dist/views/Edit | ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.00 KB |
| dist/fields/Relationship | ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.76 KB |
| dist/elements/Table | ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.46 KB |
| dist/forms/Form | ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.19 KB |
| dist/fields/Upload | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.02 KB |
| dist/fields/Blocks | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 13.71 KB |
| dist/elements/QueryPresets | ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.28 KB |
| dist/elements/PublishButton | ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.69 KB |
| dist/providers/Folders | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.45 KB |
| dist/elements/LivePreview | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB |
| dist/elements/ListHeader | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.84 KB |
| dist/elements/HTMLDiff | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.81 KB |
| dist/fields/Array | ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.56 KB |
| dist/views/CollectionFolder | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.37 KB |
| dist/elements/ReactSelect | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.31 KB |
| dist/views/List | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.98 KB |
| (other) | ${{\color{Goldenrod}{ ████████████▍ }}}$ 49.9%, 575.88 KB |
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
| Path | Size |
|---|---|
| dist/graphics/Logo | ${{\color{Goldenrod}{ █████▋ }}}$ 22.6%, 3.12 KB |
| ../../node_modules | ${{\color{Goldenrod}{ ████▊ }}}$ 19.2%, 2.65 KB |
| dist/graphics/Icon | ${{\color{Goldenrod}{ ██▊ }}}$ 11.0%, 1.52 KB |
| dist/utilities/formatDocTitle | ${{\color{Goldenrod}{ ██▍ }}}$ 9.6%, 1.32 KB |
| dist/providers/TableColumns | ${{\color{Goldenrod}{ █▌ }}}$ 6.2%, 862 B |
| dist/utilities/groupNavItems.js | ${{\color{Goldenrod}{ █▍ }}}$ 5.9%, 816 B |
| dist/utilities/api.js | ${{\color{Goldenrod}{ █▍ }}}$ 5.5%, 756 B |
| dist/elements/Translation | ${{\color{Goldenrod}{ ▉ }}}$ 3.6%, 493 B |
| dist/utilities/handleTakeOver.js | ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 440 B |
| dist/elements/withMergedProps | ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 339 B |
| dist/elements/WithServerSideProps | ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 232 B |
| dist/utilities/handleGoBack.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 168 B |
| dist/fields/mergeFieldStyles.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 159 B |
| dist/forms/Form | ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 147 B |
| dist/utilities/abortAndIgnore.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 146 B |
| dist/utilities/hasSavePermission.js | ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 136 B |
| dist/utilities/handleBackToDashboard.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 129 B |
| dist/utilities/findLocaleFromCode.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 84 B |
| dist/utilities/sanitizeID.js | ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 77 B |
| dist/utilities/isEditing.js | ${{\color{Goldenrod}{ }}}$ 0.4%, 59 B |
| (other) | ${{\color{Goldenrod}{ ███████████████████▎ }}}$ 77.4%, 10.68 KB |
Details
Next to the size is how much the size has increased or decreased compared with the base branch of this PR.
- ‼️: Size increased by 20% or more. Special attention should be given to this.
- ⚠️: Size increased in acceptable range (lower than 20%).
- ✅: No change or even downsized.
- 🗑️: The out file is deleted: not found in base branch.
- 🆕: The out file is newly found: will be added to base branch.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thanks so much for working on this upgrade!
I spent yesterday trying to upgrade a project to Next v16 and ran into this exact issue, so this is really helpful.
Turbopack HMR got recently fixed: https://github.com/vercel/next.js/issues/85883. Progress 👍
Looking forward to having payload compatible next16 and turbo
Do we have an estimation on when this is going to be available ?
