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[] + }> + } ```
2024-10-01 20:16:11 +03:00
parent d80410b228
commit fa59d4c0b2
27 changed files with 499 additions and 344 deletions
--- a/app/(payload)/admin/[[...segments]]/not-found.tsx
+++ b/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> =>
--- a/app/(payload)/admin/[[...segments]]/page.tsx
+++ b/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> =>
--- a/package.json
+++ b/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-dom": "19.0.0-rc-5dcb0097-20240918",
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "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-dom": "^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-3edc000d-20240926"
  },
  "packageManager": "pnpm@9.7.1",
  "engines": {
--- a/packages/live-preview-react/package.json
+++ b/packages/live-preview-react/package.json
@@ -43,8 +43,8 @@
    "payload": "workspace:*"
  },
  "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "^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-3edc000d-20240926"
  },
  "publishConfig": {
    "exports": {
--- a/packages/next/package.json
+++ b/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": {
--- a/packages/next/src/layouts/Root/index.tsx
+++ b/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,
--- a/packages/next/src/routes/rest/index.ts
+++ b/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
--- a/packages/next/src/utilities/getNextRequestI18n.ts
+++ b/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
 }
--- a/packages/next/src/utilities/initPage/index.ts
+++ b/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 })}`

--- a/packages/next/src/utilities/initReq.ts
+++ b/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({
--- a/packages/next/src/views/NotFound/index.tsx
+++ b/packages/next/src/views/NotFound/index.tsx
@@ -41,21 +41,22 @@ export type GenerateViewMetadata = (args: {
 export const NotFoundPage = async ({
  config: configPromise,
  importMap,
-  params,
-  searchParams,
+  params: paramsPromise,
+  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}
--- a/packages/next/src/views/Root/index.tsx
+++ b/packages/next/src/views/Root/index.tsx
@@ -23,17 +23,17 @@ export type GenerateViewMetadata = (args: {
 export const RootPage = async ({
  config: configPromise,
  importMap,
-  params,
-  searchParams,
+  params: paramsPromise,
+  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,
--- a/packages/next/src/views/Root/meta.ts
+++ b/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('/')}`
--- a/packages/payload/package.json
+++ b/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",
--- a/packages/plugin-form-builder/package.json
+++ b/packages/plugin-form-builder/package.json
@@ -69,8 +69,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "^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-3edc000d-20240926"
  },
  "publishConfig": {
    "exports": {
--- a/packages/plugin-search/package.json
+++ b/packages/plugin-search/package.json
@@ -62,8 +62,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "^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-3edc000d-20240926"
  },
  "publishConfig": {
    "exports": {
--- a/packages/plugin-sentry/package.json
+++ b/packages/plugin-sentry/package.json
@@ -60,8 +60,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "^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-3edc000d-20240926"
  },
  "publishConfig": {
    "exports": {
--- a/packages/plugin-seo/package.json
+++ b/packages/plugin-seo/package.json
@@ -69,8 +69,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^19.0.0 || ^19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "^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-3edc000d-20240926"
  },
  "publishConfig": {
    "exports": {
--- a/packages/richtext-lexical/package.json
+++ b/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-dom": "^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-3edc000d-20240926"
  },
  "engines": {
    "node": "^18.20.2 || >=20.9.0"
--- a/packages/richtext-slate/package.json
+++ b/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"
--- a/packages/ui/package.json
+++ b/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-dom": "^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-3edc000d-20240926"
  },
  "engines": {
    "node": "^18.20.2 || >=20.9.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/test/live-preview/app/live-preview/(pages)/[slug]/page.tsx
+++ b/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' } }) {
-  let page: Page | null = null
+type Args = {
+  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>({
--- a/test/live-preview/app/live-preview/(pages)/posts/[slug]/page.tsx
+++ b/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 = '' } }) {
-  let post: Post | null = null
+type Args = {
+  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>({
--- a/test/live-preview/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx
+++ b/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,
--- a/test/live-preview/app/live-preview/(pages)/ssr/[slug]/page.tsx
+++ b/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,
--- a/test/package.json
+++ b/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-dom": "19.0.0-rc-5dcb0097-20240918",
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
    "server-only": "^0.0.1",
    "slate": "0.91.4",
    "tempy": "^1.0.1",