Convert remaining sync (search)params access

vercel · Jan 28, 2025 · 8fc1aab · 8fc1aab
1 parent 03f6660
commit 8fc1aab
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 26 deletions.
diff --git a/docs/01-app/01-getting-started/08-error-handling.mdx b/docs/01-app/01-getting-started/08-error-handling.mdx
@@ -151,8 +151,8 @@ You can call the [`notFound`](/docs/app/api-reference/functions/not-found) funct
 ```tsx filename="app/blog/[slug]/page.tsx" switcher
 import { getPostBySlug } from '@/lib/posts'
 
-export default function Page({ params }: { params: { slug: string } }) {
-  const post = getPostBySlug(params.slug)
+export default async function Page({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug((await params).slug)
 
   if (!post) {
     notFound()
@@ -165,8 +165,8 @@ export default function Page({ params }: { params: { slug: string } }) {
 ```jsx filename="app/blog/[slug]/page.js" switcher
 import { getPostBySlug } from '@/lib/posts'
 
-export default function Page({ params }) {
-  const post = getPostBySlug(params.slug)
+export default async function Page({ params }) {
+  const post = getPostBySlug((await params).slug)
 
   if (!post) {
     notFound()

diff --git a/docs/01-app/03-building-your-application/01-routing/15-internationalization.mdx b/docs/01-app/03-building-your-application/01-routing/15-internationalization.mdx
@@ -177,15 +177,15 @@ export async function generateStaticParams() {
   return [{ lang: 'en-US' }, { lang: 'de' }]
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
   params,
 }: Readonly<{
   children: React.ReactNode
-  params: { lang: 'en-US' | 'de' }
+  params: Promise<{ lang: 'en-US' | 'de' }>
 }>) {
   return (
-    <html lang={params.lang}>
+    <html lang={(await params).lang}>
       <body>{children}</body>
     </html>
   )
@@ -197,9 +197,9 @@ export async function generateStaticParams() {
   return [{ lang: 'en-US' }, { lang: 'de' }]
 }
 
-export default function RootLayout({ children, params }) {
+export default async function RootLayout({ children, params }) {
   return (
-    <html lang={params.lang}>
+    <html lang={(await params).lang}>
       <body>{children}</body>
     </html>
   )

diff --git a/docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx b/docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx
@@ -298,7 +298,7 @@ Our current recommendation for JSON-LD is to render structured data as a `<scrip
 
 ```tsx filename="app/products/[id]/page.tsx" switcher
 export default async function Page({ params }) {
-  const product = await getProduct(params.id)
+  const product = await getProduct((await params).id)
 
   const jsonLd = {
     '@context': 'https://schema.org',
@@ -323,7 +323,7 @@ export default async function Page({ params }) {
 
 ```jsx filename="app/products/[id]/page.js" switcher
 export default async function Page({ params }) {
-  const product = await getProduct(params.id)
+  const product = await getProduct((await params).id)
 
   const jsonLd = {
     '@context': 'https://schema.org',

diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
@@ -287,7 +287,7 @@ export const dynamicParams = false
 
 ```jsx filename="app/blog/[slug]/page.js" switcher
 export default async function Page({ params }) {
-  const slug = params.slug
+  const slug = (await params).slug
   const { default: Post } = await import(`@/content/${slug}.mdx`)
 
   return <Post />

diff --git a/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx b/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx
@@ -748,7 +748,7 @@ export async function generateStaticParams() {
 }
 
 async function getPost(params) {
-  const res = await fetch(`https://.../posts/${params.id}`)
+  const res = await fetch(`https://.../posts/${(await params).id}`)
   const post = await res.json()
 
   return post

diff --git a/...1-app/03-building-your-application/11-upgrading/08-single-page-applications.mdx b/...1-app/03-building-your-application/11-upgrading/08-single-page-applications.mdx
@@ -310,9 +310,9 @@ export default function SortProducts() {
   const searchParams = useSearchParams()
 
   function updateSorting(sortOrder: string) {
-    const params = new URLSearchParams(searchParams.toString())
-    params.set('sort', sortOrder)
-    window.history.pushState(null, '', `?${params.toString()}`)
+    const urlSearchParams = new URLSearchParams(searchParams.toString())
+    urlSearchParams.set('sort', sortOrder)
+    window.history.pushState(null, '', `?${urlSearchParams.toString()}`)
   }
 
   return (
@@ -333,9 +333,9 @@ export default function SortProducts() {
   const searchParams = useSearchParams()
 
   function updateSorting(sortOrder) {
-    const params = new URLSearchParams(searchParams.toString())
-    params.set('sort', sortOrder)
-    window.history.pushState(null, '', `?${params.toString()}`)
+    const urlSearchParams = new URLSearchParams(searchParams.toString())
+    urlSearchParams.set('sort', sortOrder)
+    window.history.pushState(null, '', `?${urlSearchParams.toString()}`)
   }
 
   return (

diff --git a/docs/01-app/04-api-reference/04-functions/not-found.mdx b/docs/01-app/04-api-reference/04-functions/not-found.mdx
@@ -19,7 +19,7 @@ async function fetchUser(id) {
 }
 
 export default async function Profile({ params }) {
-  const user = await fetchUser(params.id)
+  const user = await fetchUser((await params).id)
 
   if (!user) {
     notFound()

diff --git a/docs/01-app/04-api-reference/04-functions/permanentRedirect.mdx b/docs/01-app/04-api-reference/04-functions/permanentRedirect.mdx
@@ -49,7 +49,7 @@ async function fetchTeam(id) {
 }
 
 export default async function Profile({ params }) {
-  const team = await fetchTeam(params.id)
+  const team = await fetchTeam((await params).id)
   if (!team) {
     permanentRedirect('/login')
   }

diff --git a/docs/01-app/04-api-reference/04-functions/unstable_cache.mdx b/docs/01-app/04-api-reference/04-functions/unstable_cache.mdx
@@ -50,12 +50,17 @@ const data = unstable_cache(fetchData, keyParts, options)()
 ```tsx filename="app/page.tsx" switcher
 import { unstable_cache } from 'next/cache'
 
-export default async function Page({ params }: { params: { userId: string } }) {
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ userId: string }>
+}) {
+  const userId = (await params).userId
   const getCachedUser = unstable_cache(
     async () => {
-      return { id: params.userId }
+      return { id: userId }
     },
-    [params.userId], // add the user ID to the cache key
+    [userId], // add the user ID to the cache key
     {
       tags: ['users'],
       revalidate: 60,
@@ -70,11 +75,12 @@ export default async function Page({ params }: { params: { userId: string } }) {
 import { unstable_cache } from 'next/cache';
 
 export default async function Page({ params } }) {
+  const userId = (await params).userId
   const getCachedUser = unstable_cache(
     async () => {
-      return { id: params.userId };
+      return { id: userId };
     },
-    [params.userId], // add the user ID to the cache key
+    [userId], // add the user ID to the cache key
     {
       tags: ["users"],
       revalidate: 60,