example-rule.mdc

---
alwaysApply: true
---
# Next.jsのパラメータ処理ガイドライン

## パラメータの型定義

### 基本ルール

- `params`と`searchParams`は必ず`Promise`型として定義する
- 型は明示的に定義し、`any`の使用は避ける
- パラメータの型は別途型定義として切り出す

```tsx
type PageParams = {
  slug: string
}

export default async function Page({
  params,
  searchParams,
}: {
  params: Promise<PageParams>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  // ...
}
```

## コンポーネントの責務分離

### Server Component

- パラメータの解決とバリデーションはServer Componentで行う
- 解決済みの値のみをClient Componentに渡す
- エラー処理（`notFound()`、`redirect()`など）はServer Componentで実装

### Client Component

- Client ComponentではPromiseとして渡されたパラメータを直接扱わない
- 解決済みの値のみを受け取る
- パラメータのバリデーションやエラー処理は行わない

## パラメータ処理のベストプラクティス

### 検証とエラー処理

- パラメータの検証は必ずServer Componentの先頭で行う
- 不正な値の場合は`notFound()`や`redirect()`で適切に処理
- 必要に応じてzodなどのバリデーションライブラリを使用

### searchParamsの処理

- `searchParams`の値は常に文字列として提供される
- 数値が必要な場合は明示的に型変換を行う
- オプショナルなパラメータにはデフォルト値を設定

```tsx
const { page } = await searchParams
const pageNumber = page ? parseInt(page, 10) : 1
```

## セキュリティ考慮事項

- ユーザー入力として扱い、適切なサニタイズを行う
- SQLインジェクションやXSSを防ぐため、エスケープ処理を実装
- 機密情報は`searchParams`に含めない