test: migrate rest async api usage in tests (#71663)

test/e2e/app-dir/actions/app/header/edge/validator.js

@@ -3,7 +3,7 @@ import { cookies } from 'next/headers'
 export function validator(action) {
   return async function (arg) {
     'use server'
-    const auth = cookies().get('edge-auth')
+    const auth = (await cookies()).get('edge-auth')
     if (auth?.value !== '1') {
       throw new Error('Unauthorized request')
     }

test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/@breadcrumbs/[id]/page.js

@@ -1,4 +1,5 @@
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <div>
       Catchall <pre>{JSON.stringify(params)}</pre>{' '}

test/e2e/app-dir/app-css/app/loading-bug/[categorySlug]/page.js

@@ -7,7 +7,8 @@ const fetchCategory = async (categorySlug) => {
   return categorySlug + 'abc'
 }
 
-export default function Page({ params }) {
+export default function Page(props) {
+  const params = use(props.params)
   const category = use(fetchCategory(params.categorySlug))
 
   return <div id="category-id">{category}</div>

test/e2e/app-dir/app-css/app/not-found/clientcomponent/page.js

@@ -2,8 +2,8 @@
 import ClientComp from './client-component'
 import { headers } from 'next/headers'
 
-export default function Page() {
+export default async function Page() {
   // Opt-in to SSR.
-  headers()
+  await headers()
   return <ClientComp />
 }

test/e2e/app-dir/app-esm-js/app/app/hooks.js

@@ -3,7 +3,7 @@ import { ClientHooks } from './client-hooks'
 import { headers, cookies } from 'next/headers'
 
 export function useHooks() {
-  headers()
+  use(headers())
   use(cookies())
   return <ClientHooks />
 }

test/e2e/app-dir/app-fetch-deduping/app/bad-response-page/[slug]/page.js

@@ -20,7 +20,7 @@ export async function generateStaticParams() {
   ]
 }
 
-export default async function Page({ params }) {
+export default async function Page() {
   const data = await fetch(
     `http://localhost:${process.env.TEST_SERVER_PORT}?status=404`
   ).then((res) => res.text())

test/e2e/app-dir/app-fetch-deduping/app/blog/[slug]/page.js

@@ -18,7 +18,7 @@ export async function generateStaticParams() {
   ]
 }
 
-export default async function Page({ params }) {
+export default async function Page() {
   const data = await fetch(
     `http://localhost:${process.env.TEST_SERVER_PORT}`
   ).then((res) => res.text())

test/e2e/app-dir/app-middleware/app/headers/page.js

@@ -1,7 +1,7 @@
 import { headers } from 'next/headers'
 
-export default function SSRPage() {
-  const headersObj = Object.fromEntries(headers())
+export default async function SSRPage() {
+  const headersObj = Object.fromEntries(await headers())
   return (
     <>
       <p>app-dir</p>

test/e2e/app-dir/app-middleware/middleware.js

@@ -8,7 +8,7 @@ import { headers as nextHeaders, draftMode } from 'next/headers'
 export async function middleware(request) {
   const headersFromRequest = new Headers(request.headers)
   // It should be able to import and use `headers` inside middleware
-  const headersFromNext = nextHeaders()
+  const headersFromNext = await nextHeaders()
   headersFromRequest.set('x-from-middleware', 'hello-from-middleware')
 
   // make sure headers() from `next/headers` is behaving properly

test/e2e/app-dir/app-prefetch-static/app/[region]/(default)/dynamic-area/[slug]/page.js

@@ -1,3 +1,3 @@
-export default async function DynamicPage({ params, searchParams }) {
+export default async function DynamicPage(props) {
   return <div id="dynamic-prefetch-page">Hello from Dynamic Prefetch Page</div>
 }

test/e2e/app-dir/app-prefetch-static/app/[region]/(default)/layout.js

@@ -1,6 +1,6 @@
 export const regions = ['SE', 'DE']
 
-export default async function Layout({ children, params }) {
+export default function Layout({ children }) {
   return children
 }
 

test/e2e/app-dir/app-prefetch-static/app/[region]/(default)/static-prefetch/page.js

@@ -1,6 +1,6 @@
 export const dynamic = 'force-dynamic'
 
-export default async function StaticPrefetchPage({ params }) {
+export default function StaticPrefetchPage(props) {
   return (
     <div id="static-prefetch-page">
       <h1>Hello from Static Prefetch Page</h1>

test/e2e/app-dir/app-prefetch/app/dashboard/[id]/page.js

@@ -12,7 +12,8 @@ export function generateStaticParams() {
   return [{ id: 'static' }]
 }
 
-export default function IdPage({ params }) {
+export default function IdPage(props) {
+  const params = use(props.params)
   const data = use(getData())
   console.log(data)
 

test/e2e/app-dir/app-prefetch/app/prefetch-auto/[slug]/page.js

@@ -9,7 +9,8 @@ function getData() {
   return res
 }
 
-export default async function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   const result = await getData()
 
   return (

test/e2e/app-dir/app-routes/app/revalidate-1/[slug]/data.json/route.ts

@@ -9,8 +9,9 @@ export function generateStaticParams() {
 
 export const GET = async (
   req: NextRequest,
-  { params }: { params: Promise<{ slug: string }> }
+  props: { params: Promise<{ slug: string }> }
 ) => {
+  const params = await props.params
   const resolvedParams = await params
   return NextResponse.json({ params: resolvedParams, now: Date.now() })
 }

test/e2e/app-dir/app-routes/app/static/[slug]/data.json/route.ts

@@ -7,8 +7,9 @@ export function generateStaticParams() {
 
 export const GET = async (
   req: NextRequest,
-  { params }: { params: Promise<{ slug: string }> }
+  props: { params: Promise<{ slug: string }> }
 ) => {
+  const params = await props.params
   const resolvedParams = await params
   return NextResponse.json({ params: resolvedParams, now: Date.now() })
 }

test/e2e/app-dir/app-static/app/blog/[author]/[slug]/page.js

@@ -2,7 +2,8 @@ import { notFound } from 'next/navigation'
 
 export const dynamicParams = true
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   if (params.author === 'shu') {
     notFound()
   }

test/e2e/app-dir/app-static/app/blog/[author]/layout.js

@@ -1,4 +1,8 @@
-export default function Layout({ children, params }) {
+export default async function Layout(props) {
+  const params = await props.params
+
+  const { children } = props
+
   return (
     <>
       <p id="author-layout-params">{JSON.stringify(params)}</p>

test/e2e/app-dir/app-static/app/blog/[author]/page.js

@@ -2,7 +2,8 @@ import Link from 'next/link'
 
 export const dynamicParams = false
 
-export default async function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   await fetch('https://example.vercel.sh', {
     next: { revalidate: 10 },
   })

test/e2e/app-dir/app-static/app/dynamic-error/[id]/page.js

@@ -2,7 +2,8 @@ import { cookies } from 'next/headers'
 
 export const dynamic = 'error'
 
-export default async function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   // When PPR is enabled, we will bailout on parameter access.
   if (!process.env.__NEXT_EXPERIMENTAL_PPR) {
     if (params.id.includes('static-bailout')) {

test/e2e/app-dir/app-static/app/dynamic-no-gen-params-ssr/[slug]/page.js

@@ -1,6 +1,7 @@
 export const revalidate = 0
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p id="page">/dynamic-no-gen-params-ssr</p>

test/e2e/app-dir/app-static/app/dynamic-no-gen-params/[slug]/page.js

@@ -1,8 +1,10 @@
 'use client'
+import { use } from 'react'
 
 import Link from 'next/link'
 
-export default function Page({ params }) {
+export default function Page(props) {
+  const params = use(props.params)
   return (
     <>
       <p id="page">/dynamic-no-gen-params</p>

test/e2e/app-dir/app-static/app/force-dynamic-no-prerender/[id]/page.js

@@ -1,5 +1,5 @@
 export const dynamic = 'force-dynamic'
 
-export default function Page({ params }) {
+export default function Page(props) {
   throw new Error('this should not attempt prerendering with force-dynamic')
 }

test/e2e/app-dir/app-static/app/force-dynamic-prerender/[slug]/page.js

@@ -8,7 +8,8 @@ export const generateStaticParams = async () => {
   return [{ slug: 'frameworks' }]
 }
 
-export default async function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   const result = (await cookies()).get('session')?.value
     ? 'has cookie'
     : 'no cookie'

test/e2e/app-dir/app-static/app/force-static/[slug]/page.js

@@ -13,7 +13,8 @@ function Dynamic({ params }) {
   return <p id="params">{JSON.stringify(params)}</p>
 }
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <Suspense>
       <p id="page">/force-static/[slug]</p>

test/e2e/app-dir/app-static/app/force-static/layout.js

@@ -1,8 +1,8 @@
 import { cookies, headers } from 'next/headers'
 
-export default function Layout({ children }) {
-  const curHeaders = headers()
-  const curCookies = cookies()
+export default async function Layout({ children }) {
+  const curHeaders = await headers()
+  const curCookies = await cookies()
 
   return (
     <>

test/e2e/app-dir/app-static/app/gen-params-dynamic-revalidate/[slug]/page.js

@@ -6,7 +6,8 @@ export async function generateStaticParams() {
   return [{ slug: 'one' }]
 }
 
-export default async function page({ params }) {
+export default async function page(props) {
+  const params = await props.params
   const { slug } = params
   let data
 

test/e2e/app-dir/app-static/app/gen-params-dynamic/[slug]/page.js

@@ -4,7 +4,8 @@ export async function generateStaticParams() {
   return [{ slug: 'one' }]
 }
 
-export default async function page({ params }) {
+export default async function page(props) {
+  const params = await props.params
   const { slug } = params
   const data = await fetchRetry(
     'https://next-data-api-endpoint.vercel.app/api/random',

test/e2e/app-dir/app-static/app/partial-gen-params-no-additional-lang/[lang]/[slug]/page.js

@@ -23,7 +23,8 @@ export async function generateStaticParams() {
   ]
 }
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p id="page">/partial-gen-params/[lang]/[slug]</p>

test/e2e/app-dir/app-static/app/partial-gen-params-no-additional-slug/[lang]/[slug]/page.js

@@ -23,7 +23,8 @@ export async function generateStaticParams() {
   ]
 }
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p id="page">/partial-gen-params/[lang]/[slug]</p>

test/e2e/app-dir/app-static/app/partial-gen-params/[lang]/[slug]/page.js

@@ -1,4 +1,5 @@
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p id="page">/partial-gen-params/[lang]/[slug]</p>

test/e2e/app-dir/app-static/app/ssg-draft-mode/[[...route]]/page.js

@@ -5,7 +5,7 @@ export default async function Page() {
     'https://next-data-api-endpoint.vercel.app/api/random'
   ).then((res) => res.text())
 
-  const { isEnabled } = draftMode()
+  const { isEnabled } = await draftMode()
 
   return (
     <main>

test/e2e/app-dir/app-static/app/static-to-dynamic-error-forced/[id]/page.js

@@ -2,9 +2,10 @@ import { cookies } from 'next/headers'
 
 export const dynamic = 'force-static'
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   if (params.id.includes('static-bailout')) {
-    console.log('calling cookies', cookies())
+    console.log('calling cookies', await cookies())
   }
 
   return (

test/e2e/app-dir/app-static/app/static-to-dynamic-error/[id]/page.js

@@ -1,8 +1,9 @@
 import { cookies } from 'next/headers'
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   if (params.id.includes('static-bailout')) {
-    console.log('calling cookies', cookies())
+    console.log('calling cookies', await cookies())
   }
 
   return (

test/e2e/app-dir/app-static/app/variable-revalidate/authorization/route-cookies/route.js

@@ -2,7 +2,7 @@ import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
 export async function GET() {
-  const cookieData = cookies()
+  const cookieData = await cookies()
 
   const data = await fetch(
     'https://next-data-api-endpoint.vercel.app/api/random',

test/e2e/app-dir/app/app/back-forward/[id]/page.js

@@ -1,8 +1,10 @@
 'use client'
+import { use } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
-export default function Page({ params }) {
+export default function Page(props) {
+  const params = use(props.params)
   const router = useRouter()
   return (
     <>

test/e2e/app-dir/app/app/catch-all-edge/[...slug]/page.js

@@ -1,6 +1,7 @@
 export const runtime = 'edge'
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p>catch-all edge page</p>

test/e2e/app-dir/app/app/catch-all-optional/[[...slug]]/page.js

@@ -1,4 +1,5 @@
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <h1 id="text" data-params={params.slug?.join('/') ?? ''}>
       hello from /catch-all-optional/{params.slug?.join('/')}

test/e2e/app-dir/app/app/catch-all/[...slug]/page.js

@@ -1,7 +1,8 @@
 import Widget from './components/widget'
 import NotAPage from './not-a-page'
 
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <h1 id="text" data-params={params.slug.join('/') ?? ''}>

test/e2e/app-dir/app/app/dashboard/deployments/info/[id]/page.js

@@ -1,4 +1,5 @@
-export default function Page({ params }) {
+export default async function Page(props) {
+  const params = await props.params
   return (
     <>
       <p id="message">

test/e2e/app-dir/app/app/dynamic-client/[category]/[id]/layout.js

@@ -1,4 +1,8 @@
-export default function IdLayout({ children, params }) {
+export default async function IdLayout(props) {
+  const params = await props.params
+
+  const { children } = props
+
   return (
     <>
       <h3>