nextjs-params
Ensures Next.js 15 dynamic route parameters are properly awaited. Checks for missing await on params destructuring and provides automatic fixes.
来源信息
- 仓库
- pmarashian/cursor-agent-skills
- 最近来源活动
- 2026年2月13日 19:51
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 2
- 分支
- 1
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- nextjs-params
- description
- Ensures Next.js 15 dynamic route parameters are properly awaited. Checks for missing await on params destructuring and provides automatic fixes.
# Next.js Dynamic Route Params Fixer
## Purpose
This skill detects and fixes Next.js 15 dynamic route parameter issues where `params` is used without `await`. In Next.js 15, dynamic route parameters became asynchronous and must be awaited.
## When to Use
This skill should trigger automatically when:
1. **File Analysis**: Analyzing TypeScript/JavaScript files in Next.js projects
2. **Code Review**: When reviewing route handler files
3. **Error Detection**: When Next.js throws the error: `params should be awaited before using its properties`
## Problem Detection
The skill looks for these patterns in Next.js route handlers:
### ❌ Incorrect Patterns:
```typescript
// Missing await on params destructuring
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
const { id } = params; // ERROR: params not awaited
}
// Missing Promise type annotation
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
const { id } = await params; // ERROR: type should be Promise<{ id: string }>
}
```
### ✅ Correct Patterns:
```typescript
// Proper async params usage
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params; // ✅ Correct
}
```
## Automatic Fixes
When the skill detects an issue, it provides these quick fixes:
### Fix 1: Add await to params destructuring
```typescript
// Before:
const { id } = params;
// After:
const { id } = await params;
```
### Fix 2: Update type annotation to Promise<>
```typescript
// Before:
{ params }: { params: { id: string } }
// After:
{ params }: { params: Promise<{ id: string }> }
```
### Fix 3: Combined fix (both await and type update)
```typescript
// Before:
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
const { id } = params;
}
// After:
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
}
```
## Implementation Details
### Detection Logic
The skill analyzes route handler functions by:
1. **Route Handler Identification**: Looks for functions exported as HTTP methods (GET, POST, PUT, DELETE) in files with dynamic routes (`[param]` in path)
2. **Params Usage Analysis**:
- Checks if `params` is destructured from function parameters
- Verifies if `await` is used when destructuring `params`
- Validates type annotations include `Promise<>`
3. **Context Awareness**: Only applies to Next.js 15+ projects (detected by package.json or Next.js version)
### File Patterns to Monitor
- `src/app/**/[**]/route.ts` (App Router dynamic routes)
- `src/pages/**/[**].tsx` (Pages Router dynamic routes - though less common in Next.js 15)
- Any TypeScript file with route handler patterns
## Error Prevention
This skill helps prevent the common Next.js 15 migration error:
```
Error: Route "/api/example/[id]" used `params.id`. `params` should be awaited before using its properties.
```
## Usage Examples
### Before Fix:
```typescript
export async function GET(
request: NextRequest,
{ params }: { params: { userId: string } }
) {
try {
const { userId } = params; // ❌ Error: params not awaited
// ... rest of handler
}
}
```
### After Automatic Fix:
```typescript
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ userId: string }> }
) {
try {
const { userId } = await params; // ✅ Fixed automatically
// ... rest of handler
}
}
```
## Benefits
- **Prevents Runtime Errors**: Eliminates Next.js 15 params errors
- **Automatic Migration**: Helps upgrade from Next.js 13/14 to 15
- **Type Safety**: Ensures proper TypeScript types for async params
- **Developer Experience**: Quick fixes reduce manual refactoring time
## Configuration
The skill is enabled by default for:
- Next.js projects (detected by `next` in package.json)
- TypeScript files with route handler patterns
- Files containing dynamic route segments `[param]`
Disable the skill for specific files by adding a comment:
```typescript
// @cursor-skill-disable nextjs-params
```
在 GitHub 查看