1# Async Patterns
2 
3In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous.
4 
5## Async Params and SearchParams
6 
7Always type them as `Promise<...>` and await them.
8 
9### Pages and Layouts
10 
11```tsx
12type Props = { params: Promise<{ slug: string }> }
13 
14export default async function Page({ params }: Props) {
15  const { slug } = await params
16}
17```
18 
19### Route Handlers
20 
21```tsx
22export async function GET(
23  request: Request,
24  { params }: { params: Promise<{ id: string }> }
25) {
26  const { id } = await params
27}
28```
29 
30### SearchParams
31 
32```tsx
33type Props = {
34  params: Promise<{ slug: string }>
35  searchParams: Promise<{ query?: string }>
36}
37 
38export default async function Page({ params, searchParams }: Props) {
39  const { slug } = await params
40  const { query } = await searchParams
41}
42```
43 
44### Synchronous Components
45 
46Use `React.use()` for non-async components:
47 
48```tsx
49import { use } from 'react'
50 
51type Props = { params: Promise<{ slug: string }> }
52 
53export default function Page({ params }: Props) {
54  const { slug } = use(params)
55}
56```
57 
58### generateMetadata
59 
60```tsx
61type Props = { params: Promise<{ slug: string }> }
62 
63export async function generateMetadata({ params }: Props): Promise<Metadata> {
64  const { slug } = await params
65  return { title: slug }
66}
67```
68 
69## Async Cookies and Headers
70 
71```tsx
72import { cookies, headers } from 'next/headers'
73 
74export default async function Page() {
75  const cookieStore = await cookies()
76  const headersList = await headers()
77 
78  const theme = cookieStore.get('theme')
79  const userAgent = headersList.get('user-agent')
80}
81```
82 
83## Migration Codemod
84 
85```bash
86npx @next/codemod@latest next-async-request-api .
87```
88