chore(templates): update templates with next.js promises (#8547)

Updates templates according to this PR
#8489

templates/_template/package.json

@@ -21,18 +21,18 @@
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "payload": "beta",
-    "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",
     "sharp": "0.32.6"
   },
   "devDependencies": {
     "@types/node": "^22.5.4",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.160",
+    "eslint-config-next": "15.0.0-canary.173",
     "typescript": "5.6.2"
   },
   "engines": {

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

@@ -7,12 +7,12 @@ import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
 import { importMap } from '../importMap'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

templates/blank/package.json

@@ -21,18 +21,18 @@
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "payload": "beta",
-    "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",
     "sharp": "0.32.6"
   },
   "devDependencies": {
     "@types/node": "^22.5.4",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.160",
+    "eslint-config-next": "15.0.0-canary.173",
     "typescript": "5.6.2"
   },
   "engines": {

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

@@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
 import { importMap } from '../importMap'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

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

@@ -7,12 +7,12 @@ import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
 import { importMap } from '../importMap'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

templates/vercel-postgres/package.json

@@ -18,10 +18,10 @@
     "@payloadcms/storage-vercel-blob": "beta",
     "@vercel/blob": "^0.22.3",
     "cross-env": "^7.0.3",
-    "next": "15.0.0-canary.53",
+    "next": "15.0.0-canary.173",
     "payload": "beta",
-    "react": "19.0.0-rc-6230622a1a-20240610",
-    "react-dom": "19.0.0-rc-6230622a1a-20240610",
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
     "sharp": "0.32.6"
   },
   "devDependencies": {
@@ -30,7 +30,7 @@
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.53",
+    "eslint-config-next": "15.0.0-canary.173",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "5.6.2"

templates/vercel-postgres/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -6,12 +6,12 @@ import config from '@payload-config'
 import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

templates/website/package.json

@@ -41,12 +41,12 @@
     "jsonwebtoken": "9.0.2",
     "lexical": "0.18.0",
     "lucide-react": "^0.378.0",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "payload": "beta",
     "payload-admin-bar": "^1.0.6",
     "prism-react-renderer": "^2.3.1",
-    "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",
     "react-hook-form": "7.45.4",
     "sharp": "0.32.6",
     "tailwind-merge": "^2.3.0",
@@ -64,7 +64,7 @@
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.160",
+    "eslint-config-next": "15.0.0-canary.173",
     "postcss": "^8.4.38",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.4.3",

templates/website/src/app/(frontend)/[slug]/page.tsx

@@ -34,7 +34,14 @@ export async function generateStaticParams() {
   return params
 }
 
-export default async function Page({ params: { slug = 'home' } }) {
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+  const { slug = 'home' } = await paramsPromise
   const url = '/' + slug
 
   let page: PageType | null
@@ -75,7 +82,7 @@ export async function generateMetadata({ params: { slug = 'home' } }): Promise<M
 }
 
 const queryPageBySlug = cache(async ({ slug }: { slug: string }) => {
-  const { isEnabled: draft } = draftMode()
+  const { isEnabled: draft } = await draftMode()
 
   const payload = await getPayloadHMR({ config: configPromise })
 

templates/website/src/app/(frontend)/layout.tsx

@@ -17,7 +17,7 @@ import { draftMode } from 'next/headers'
 import './globals.css'
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const { isEnabled } = draftMode()
+  const { isEnabled } = await draftMode()
 
   return (
     <html className={cn(GeistSans.variable, GeistMono.variable)} lang="en" suppressHydrationWarning>

templates/website/src/app/(frontend)/next/exit-preview/GET.ts

@@ -1,6 +1,7 @@
 import { draftMode } from 'next/headers'
 
 export async function GET(): Promise<Response> {
-  draftMode().disable()
+  const draft = await draftMode()
+  draft.disable()
   return new Response('Draft mode is disabled')
 }

templates/website/src/app/(frontend)/next/exit-preview/route.ts

@@ -1,6 +1,7 @@
 import { draftMode } from 'next/headers'
 
 export async function GET(): Promise<Response> {
-  draftMode().disable()
+  const draft = await draftMode()
+  draft.disable()
   return new Response('Draft mode is disabled')
 }

templates/website/src/app/(frontend)/next/preview/route.ts

@@ -56,9 +56,11 @@ export async function GET(
       payload.logger.error('Error verifying token for live preview:', error)
     }
 
+    const draft = await draftMode()
+
     // You can add additional checks here to see if the user is allowed to preview this page
     if (!user) {
-      draftMode().disable()
+      draft.disable()
       return new Response('You are not allowed to preview this page', { status: 403 })
     }
 
@@ -80,7 +82,8 @@ export async function GET(
       payload.logger.error('Error verifying token for live preview:', error)
     }
 
-    draftMode().enable()
+    draft.enable()
+
     redirect(path)
   }
 }

templates/website/src/app/(frontend)/posts/[slug]/page.tsx

@@ -30,7 +30,14 @@ export async function generateStaticParams() {
   return params
 }
 
-export default async function Post({ params: { slug = '' } }) {
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Post({ params: paramsPromise }: Args) {
+  const { slug = '' } = await paramsPromise
   const url = '/posts/' + slug
   const post = await queryPostBySlug({ slug })
 
@@ -65,18 +72,15 @@ export default async function Post({ params: { slug = '' } }) {
   )
 }
 
-export async function generateMetadata({
-  params: { slug },
-}: {
-  params: { slug: string }
-}): Promise<Metadata> {
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+  const { slug = '' } = await paramsPromise
   const post = await queryPostBySlug({ slug })
 
   return generateMeta({ doc: post })
 }
 
 const queryPostBySlug = cache(async ({ slug }: { slug: string }) => {
-  const { isEnabled: draft } = draftMode()
+  const { isEnabled: draft } = await draftMode()
 
   const payload = await getPayloadHMR({ config: configPromise })
 

templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx

@@ -7,17 +7,29 @@ import configPromise from '@payload-config'
 import { getPayloadHMR } from '@payloadcms/next/utilities'
 import React from 'react'
 import PageClient from './page.client'
+import { notFound } from 'next/navigation'
 
 export const revalidate = 600
 
-export default async function Page({ params: { pageNumber } }) {
+type Args = {
+  params: Promise<{
+    pageNumber: string
+  }>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+  const { pageNumber } = await paramsPromise
   const payload = await getPayloadHMR({ config: configPromise })
 
+  const sanitizedPageNumber = Number(pageNumber)
+
+  if (!Number.isInteger(sanitizedPageNumber)) notFound()
+
   const posts = await payload.find({
     collection: 'posts',
     depth: 1,
     limit: 12,
-    page: pageNumber,
+    page: sanitizedPageNumber,
     overrideAccess: false,
   })
 
@@ -50,7 +62,8 @@ export default async function Page({ params: { pageNumber } }) {
   )
 }
 
-export function generateMetadata({ params: { pageNumber } }): Metadata {
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+  const { pageNumber } = await paramsPromise
   return {
     title: `Payload Website Template Posts Page ${pageNumber || ''}`,
   }

templates/website/src/app/(frontend)/search/page.tsx

@@ -7,8 +7,14 @@ import React from 'react'
 import { Post } from '@/payload-types'
 import { Search } from '@/search/Component'
 import PageClient from './page.client'
-export default async function Page({ searchParams }: { searchParams: { q: string } }) {
-  const query = searchParams.q
+
+type Args = {
+  searchParams: Promise<{
+    q: string
+  }>
+}
+export default async function Page({ searchParams: searchParamsPromise }: Args) {
+  const { q: query } = await searchParamsPromise
   const payload = await getPayloadHMR({ config: configPromise })
 
   const posts = await payload.find({

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

@@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
 import { importMap } from '../importMap'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

templates/with-payload-cloud/package.json

@@ -21,18 +21,18 @@
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-canary.173",
     "payload": "beta",
-    "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",
     "sharp": "0.32.6"
   },
   "devDependencies": {
     "@types/node": "^22.5.4",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.160",
+    "eslint-config-next": "15.0.0-canary.173",
     "typescript": "5.6.2"
   },
   "engines": {

templates/with-payload-cloud/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -7,12 +7,12 @@ import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
 import { importMap } from '../importMap'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>