3ac66feba2
gitignore 의 *.md / .claude/ 차단을 풀어 다음 파일을 git 으로 추적. - /CLAUDE.md, /AGENTS.md (루트 에이전트 가이드) - .agents/**/*.md (skills 문서 95개) - .claude/settings.json (Claude Code 프로젝트 설정) .claude/worktrees/ 는 git worktree 메타이므로 신규 ignore 라인으로 제외. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
88 lines
1.6 KiB
Markdown
88 lines
1.6 KiB
Markdown
# Async Patterns
|
|
|
|
In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous.
|
|
|
|
## Async Params and SearchParams
|
|
|
|
Always type them as `Promise<...>` and await them.
|
|
|
|
### Pages and Layouts
|
|
|
|
```tsx
|
|
type Props = { params: Promise<{ slug: string }> }
|
|
|
|
export default async function Page({ params }: Props) {
|
|
const { slug } = await params
|
|
}
|
|
```
|
|
|
|
### Route Handlers
|
|
|
|
```tsx
|
|
export async function GET(
|
|
request: Request,
|
|
{ params }: { params: Promise<{ id: string }> }
|
|
) {
|
|
const { id } = await params
|
|
}
|
|
```
|
|
|
|
### SearchParams
|
|
|
|
```tsx
|
|
type Props = {
|
|
params: Promise<{ slug: string }>
|
|
searchParams: Promise<{ query?: string }>
|
|
}
|
|
|
|
export default async function Page({ params, searchParams }: Props) {
|
|
const { slug } = await params
|
|
const { query } = await searchParams
|
|
}
|
|
```
|
|
|
|
### Synchronous Components
|
|
|
|
Use `React.use()` for non-async components:
|
|
|
|
```tsx
|
|
import { use } from 'react'
|
|
|
|
type Props = { params: Promise<{ slug: string }> }
|
|
|
|
export default function Page({ params }: Props) {
|
|
const { slug } = use(params)
|
|
}
|
|
```
|
|
|
|
### generateMetadata
|
|
|
|
```tsx
|
|
type Props = { params: Promise<{ slug: string }> }
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { slug } = await params
|
|
return { title: slug }
|
|
}
|
|
```
|
|
|
|
## Async Cookies and Headers
|
|
|
|
```tsx
|
|
import { cookies, headers } from 'next/headers'
|
|
|
|
export default async function Page() {
|
|
const cookieStore = await cookies()
|
|
const headersList = await headers()
|
|
|
|
const theme = cookieStore.get('theme')
|
|
const userAgent = headersList.get('user-agent')
|
|
}
|
|
```
|
|
|
|
## Migration Codemod
|
|
|
|
```bash
|
|
npx @next/codemod@latest next-async-request-api .
|
|
```
|