feat!: update next@15.0.0-canary.173, react@19.0.0-rc-3edc000d-20240926 (#8489)

Updates the minimal supported versions of next.js to
[`15.0.0-canary.173`](https://github.com/vercel/next.js/releases/tag/v15.0.0-canary.173)
and react to `19.0.0-rc-3edc000d-20240926`.

Adds neccessary awaits according to this breaking change
https://github.com/vercel/next.js/pull/68812

## Breaking Changes

The `params` and `searchParams` types in
`app/(payload)/admin/[[...segments]]/page.tsx` and
`app/(payload)/admin/[[...segments]]/not-found.tsx` must be changed to
promises:

```diff
- type Args = {
-   params: {
-     segments: string[]
-   }
-   searchParams: {
-     [key: string]: string | string[]
-   }
- }

+ type Args = {
+   params: Promise<{
+     segments: string[]
+   }>
+   searchParams: Promise<{
+     [key: string]: string | string[]
+   }>
+ }

```

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -3,17 +3,17 @@ import type { Metadata } from 'next'
 
 import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
+  }>
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

app/(payload)/admin/[[...segments]]/page.tsx

@@ -3,17 +3,17 @@ import type { Metadata } from 'next'
 
 import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
+  }>
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

package.json

@@ -105,7 +105,7 @@
   "devDependencies": {
     "@jest/globals": "29.7.0",
     "@libsql/client": "0.6.2",
-    "@next/bundle-analyzer": "15.0.0-canary.160",
+    "@next/bundle-analyzer": "15.0.0-canary.173",
     "@payloadcms/db-postgres": "workspace:*",
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/eslint-plugin": "workspace:*",
@@ -143,15 +143,15 @@
     "lint-staged": "15.2.7",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9.0",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "open": "^10.1.0",
     "p-limit": "^5.0.0",
     "playwright": "1.46.0",
     "playwright-core": "1.46.0",
     "prettier": "3.3.3",
     "prompts": "2.4.2",
-    "react": "19.0.0-rc-5dcb0097-20240918",
+    "react": "19.0.0-rc-3edc000d-20240926",
-    "react-dom": "19.0.0-rc-5dcb0097-20240918",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
     "rimraf": "3.0.2",
     "semver": "^7.5.4",
     "sharp": "0.32.6",
@@ -165,8 +165,8 @@
     "typescript": "5.6.2"
   },
   "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "packageManager": "pnpm@9.7.1",
   "engines": {

packages/live-preview-react/package.json

@@ -43,8 +43,8 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "publishConfig": {
     "exports": {

packages/next/package.json

@@ -96,7 +96,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@next/eslint-plugin-next": "15.0.0-canary.160",
+    "@next/eslint-plugin-next": "15.0.0-canary.173",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/busboy": "1.5.4",
     "@types/react": "npm:types-react@19.0.0-rc.1",
@@ -112,7 +112,7 @@
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
-    "next": "^15.0.0-canary.160",
+    "next": "^15.0.0-canary.173",
     "payload": "workspace:*"
   },
   "engines": {

packages/next/src/layouts/Root/index.tsx

@@ -66,17 +66,17 @@ export const RootLayout = async ({
       dependencyVersions: {
         next: {
           required: false,
-          version: '>=15.0.0-canary.160',
+          version: '>=15.0.0-canary.173',
         },
         react: {
           customVersionParser: customReactVersionParser,
           required: false,
-          version: '>=19.0.0-rc-5dcb0097-20240918',
+          version: '>=19.0.0-rc-3edc000d-20240926',
         },
         'react-dom': {
           customVersionParser: customReactVersionParser,
           required: false,
-          version: '>=19.0.0-rc-5dcb0097-20240918',
+          version: '>=19.0.0-rc-3edc000d-20240926',
         },
       },
     })
@@ -84,7 +84,7 @@ export const RootLayout = async ({
 
   const config = await configPromise
 
-  const headers = getHeaders()
+  const headers = await getHeaders()
   const cookies = parseCookies(headers)
 
   const languageCode = getRequestLanguage({
@@ -131,10 +131,10 @@ export const RootLayout = async ({
     [],
   )
 
-  // eslint-disable-next-line @typescript-eslint/require-await
   async function switchLanguageServerAction(lang: string): Promise<void> {
     'use server'
-    nextCookies().set({
+    const cookies = await nextCookies()
+    cookies.set({
       name: `${config.cookiePrefix || 'payload'}-lng`,
       path: '/',
       value: lang,

packages/next/src/routes/rest/index.ts

@@ -229,7 +229,8 @@ export const OPTIONS =
 
 export const GET =
   (config: Promise<SanitizedConfig> | SanitizedConfig) =>
-  async (request: Request, { params: { slug } }: { params: { slug: string[] } }) => {
+  async (request: Request, { params: paramsPromise }: { params: Promise<{ slug: string[] }> }) => {
+    const { slug } = await paramsPromise
     const [slug1, slug2, slug3, slug4] = slug
     let req: PayloadRequest
     let res: Response
@@ -429,7 +430,8 @@ export const GET =
 
 export const POST =
   (config: Promise<SanitizedConfig> | SanitizedConfig) =>
-  async (request: Request, { params: { slug } }: { params: { slug: string[] } }) => {
+  async (request: Request, { params: paramsPromise }: { params: Promise<{ slug: string[] }> }) => {
+    const { slug } = await paramsPromise
     const [slug1, slug2, slug3, slug4] = slug
     let req: PayloadRequest
     let res: Response
@@ -437,7 +439,7 @@ export const POST =
 
     const overrideHttpMethod = request.headers.get('X-HTTP-Method-Override')
     if (overrideHttpMethod === 'GET') {
-      return await GET(config)(request, { params: { slug } })
+      return await GET(config)(request, { params: paramsPromise })
     }
 
     try {
@@ -619,7 +621,8 @@ export const POST =
 
 export const DELETE =
   (config: Promise<SanitizedConfig> | SanitizedConfig) =>
-  async (request: Request, { params: { slug } }: { params: { slug: string[] } }) => {
+  async (request: Request, { params: paramsPromise }: { params: Promise<{ slug: string[] }> }) => {
+    const { slug } = await paramsPromise
     const [slug1, slug2] = slug
     let req: PayloadRequest
     let res: Response
@@ -719,7 +722,8 @@ export const DELETE =
 
 export const PATCH =
   (config: Promise<SanitizedConfig> | SanitizedConfig) =>
-  async (request: Request, { params: { slug } }: { params: { slug: string[] } }) => {
+  async (request: Request, { params: paramsPromise }: { params: Promise<{ slug: string[] }> }) => {
+    const { slug } = await paramsPromise
     const [slug1, slug2] = slug
     let req: PayloadRequest
     let res: Response

packages/next/src/utilities/getNextRequestI18n.ts

@@ -29,6 +29,6 @@ export const getNextRequestI18n = async <
   return (await initI18n({
     config: config.i18n,
     context: 'client',
-    language: getRequestLanguage({ config, cookies: cookies(), headers: headers() }),
+    language: getRequestLanguage({ config, cookies: await cookies(), headers: await headers() }),
   })) as any
 }

packages/next/src/utilities/initPage/index.ts

@@ -19,7 +19,7 @@ export const initPage = async ({
   route,
   searchParams,
 }: Args): Promise<InitPageResult> => {
-  const headers = getHeaders()
+  const headers = await getHeaders()
   const payload = await getPayloadHMR({ config: configPromise, importMap })
   const queryString = `${qs.stringify(searchParams ?? {}, { addQueryPrefix: true })}`
 

packages/next/src/utilities/initReq.ts

@@ -19,7 +19,7 @@ type Result = {
 export const initReq = cache(async function (config: SanitizedConfig): Promise<Result> {
   const payload = await getPayloadHMR({ config })
 
-  const headers = getHeaders()
+  const headers = await getHeaders()
   const cookies = parseCookies(headers)
 
   const languageCode = getRequestLanguage({

packages/next/src/views/NotFound/index.tsx

@@ -41,21 +41,22 @@ export type GenerateViewMetadata = (args: {
 export const NotFoundPage = async ({
   config: configPromise,
   importMap,
-  params,
+  params: paramsPromise,
-  searchParams,
+  searchParams: searchParamsPromise,
 }: {
   config: Promise<SanitizedConfig>
   importMap: ImportMap
-  params: {
+  params: Promise<{
     segments: string[]
-  }
+  }>
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }) => {
   const config = await configPromise
   const { routes: { admin: adminRoute } = {} } = config
 
+  const searchParams = await searchParamsPromise
   const initPageResult = await initPage({
     config,
     importMap,
@@ -64,6 +65,8 @@ export const NotFoundPage = async ({
     searchParams,
   })
 
+  const params = await paramsPromise
+
   return (
     <DefaultTemplate
       i18n={initPageResult.req.i18n}

packages/next/src/views/Root/index.tsx

@@ -23,17 +23,17 @@ export type GenerateViewMetadata = (args: {
 export const RootPage = async ({
   config: configPromise,
   importMap,
-  params,
+  params: paramsPromise,
-  searchParams,
+  searchParams: searchParamsPromise,
 }: {
   readonly config: Promise<SanitizedConfig>
   readonly importMap: ImportMap
-  readonly params: {
+  readonly params: Promise<{
     segments: string[]
-  }
+  }>
-  readonly searchParams: {
+  readonly searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }) => {
   const config = await configPromise
 
@@ -45,6 +45,7 @@ export const RootPage = async ({
     routes: { admin: adminRoute },
   } = config
 
+  const params = await paramsPromise
   const currentRoute = formatAdminURL({
     adminRoute,
     path: `${Array.isArray(params.segments) ? `/${params.segments.join('/')}` : ''}`,
@@ -52,6 +53,8 @@ export const RootPage = async ({
 
   const segments = Array.isArray(params.segments) ? params.segments : []
 
+  const searchParams = await searchParamsPromise
+
   const { DefaultView, initPageOptions, templateClassName, templateType } = getViewFromConfig({
     adminRoute,
     config,

packages/next/src/views/Root/meta.ts

@@ -27,17 +27,21 @@ const oneSegmentMeta = {
 
 type Args = {
   config: Promise<SanitizedConfig>
-  params: {
+  params: Promise<{
     [key: string]: string | string[]
-  }
+  }>
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
-export const generatePageMetadata = async ({ config: configPromise, params }: Args) => {
+export const generatePageMetadata = async ({
+  config: configPromise,
+  params: paramsPromise,
+}: Args) => {
   const config = await configPromise
 
+  const params = await paramsPromise
   const segments = Array.isArray(params.segments) ? params.segments : []
 
   const currentRoute = `/${segments.join('/')}`

packages/payload/package.json

@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
-    "@next/env": "^15.0.0-canary.160",
+    "@next/env": "^15.0.0-canary.173",
     "@payloadcms/translations": "workspace:*",
     "@types/busboy": "1.5.4",
     "ajv": "8.17.1",

packages/plugin-form-builder/package.json

@@ -69,8 +69,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "publishConfig": {
     "exports": {

packages/plugin-search/package.json

@@ -62,8 +62,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "publishConfig": {
     "exports": {

packages/plugin-sentry/package.json

@@ -60,8 +60,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "publishConfig": {
     "exports": {

packages/plugin-seo/package.json

@@ -69,8 +69,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "publishConfig": {
     "exports": {

packages/richtext-lexical/package.json

@@ -108,8 +108,8 @@
     "@payloadcms/next": "workspace:*",
     "lexical": "0.18.0",
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"

packages/richtext-slate/package.json

@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"

packages/ui/package.json

@@ -90,7 +90,7 @@
     "react-datepicker": "6.9.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.8.0",
-    "scheduler": "0.0.0-experimental-5dcb0097-20240918",
+    "scheduler": "0.0.0-experimental-3edc000d-20240926",
     "sonner": "^1.5.0",
     "ts-essentials": "10.0.2",
     "use-context-selector": "2.0.0",
@@ -116,10 +116,10 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "next": "^15.0.0-canary.160",
+    "next": "^15.0.0-canary.173",
     "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
+    "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918"
+    "react-dom": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"

test/live-preview/app/live-preview/(pages)/[slug]/page.tsx

@@ -7,8 +7,12 @@ import { getDoc } from '../../_api/getDoc.js'
 import { getDocs } from '../../_api/getDocs.js'
 import { PageClient } from './page.client.js'
 
-export default async function Page({ params: { slug = 'home' } }) {
+type Args = {
-  let page: Page | null = null
+  params: Promise<{ slug?: string }>
+}
+export default async function Page({ params: paramsPromise }: Args) {
+  const { slug = 'home' } = await paramsPromise
+  let page: null | Page = null
 
   try {
     page = await getDoc<Page>({

test/live-preview/app/live-preview/(pages)/posts/[slug]/page.tsx

@@ -8,8 +8,15 @@ import { getDoc } from '../../../_api/getDoc.js'
 import { getDocs } from '../../../_api/getDocs.js'
 import { PostClient } from './page.client.js'
 
-export default async function Post({ params: { slug = '' } }) {
+type Args = {
-  let post: Post | null = null
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Post({ params: paramsPromise }: Args) {
+  const { slug = '' } = await paramsPromise
+  let post: null | Post = null
 
   try {
     post = await getDoc<Post>({

test/live-preview/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx

@@ -11,7 +11,14 @@ import { Blocks } from '../../../_components/Blocks/index.js'
 import { Hero } from '../../../_components/Hero/index.js'
 import { RefreshRouteOnSave } from './RefreshRouteOnSave.js'
 
-export default async function SSRAutosavePage({ params: { slug = '' } }) {
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function SSRAutosavePage({ params: paramsPromise }: Args) {
+  const { slug = '' } = await paramsPromise
   const data = await getDoc<Page>({
     slug,
     collection: ssrAutosavePagesSlug,

test/live-preview/app/live-preview/(pages)/ssr/[slug]/page.tsx

@@ -11,7 +11,14 @@ import { Blocks } from '../../../_components/Blocks/index.js'
 import { Hero } from '../../../_components/Hero/index.js'
 import { RefreshRouteOnSave } from './RefreshRouteOnSave.js'
 
-export default async function SSRPage({ params: { slug = '' } }) {
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function SSRPage({ params: paramsPromise }: Args) {
+  const { slug = ' ' } = await paramsPromise
   const data = await getDoc<Page>({
     slug,
     collection: ssrPagesSlug,

test/package.json

@@ -70,11 +70,11 @@
     "http-status": "1.6.2",
     "jwt-decode": "4.0.0",
     "lexical": "0.18.0",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "payload": "workspace:*",
     "qs-esm": "7.0.2",
-    "react": "19.0.0-rc-5dcb0097-20240918",
+    "react": "19.0.0-rc-3edc000d-20240926",
-    "react-dom": "19.0.0-rc-5dcb0097-20240918",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
     "server-only": "^0.0.1",
     "slate": "0.91.4",
     "tempy": "^1.0.1",