Next.js 13中app/api路由无法提取limit和skip参数的问题

错误原因 #

Next.js 13 App Router下的API路由采用Web标准的Request对象作为参数，而非Pages Router里的Node.js HTTP请求对象，因此不存在req.query属性。直接尝试从req.query解构limit和skip会因为req.query为undefined抛出TypeError。

正确获取参数的方法 #

使用request.nextUrl.searchParams（URLSearchParams实例）来提取查询参数：

• 用.get('参数名')方法获取单个参数值（默认返回字符串）
• 建议将参数转换为对应类型（比如数字），避免后续逻辑出错
• 可设置默认值防止参数缺失

修改前后代码对比 #

错误的后端路由代码（app/api/prompt/route.js） #

export async function GET(req) {
  // 这里会报错：Cannot read properties of undefined (reading 'limit')
  const { limit, skip } = req.query;
  // ...业务逻辑
  return new Response(JSON.stringify({}), { status: 200 });
}

修正后的后端路由代码 #

export async function GET(request) {
  // 获取参数并转换为数字，设置默认值
  const limit = parseInt(request.nextUrl.searchParams.get('limit')) || 3;
  const skip = parseInt(request.nextUrl.searchParams.get('skip')) || 0;

  // 后续业务逻辑示例
  const prompts = await fetchSomeData(limit, skip);
  
  return new Response(JSON.stringify({ prompts }), {
    headers: { 'Content-Type': 'application/json' },
    status: 200
  });
}

可选：将searchParams转为对象解构 #

如果需要批量获取参数，可先将URLSearchParams转为普通对象：

export async function GET(request) {
  const params = Object.fromEntries(request.nextUrl.searchParams);
  // 解构并设置默认值，再转换类型
  const { limit = '3', skip = '0' } = params;
  const numLimit = parseInt(limit, 10);
  const numSkip = parseInt(skip, 10);
  
  // ...业务逻辑
}

前端请求代码（无需修改，确保请求URL携带正确参数） #

import { useEffect } from 'react';

export default function SomeComponent() {
  useEffect(() => {
    const fetchPrompts = async () => {
      const res = await fetch('/api/prompt?limit=3&skip=0');
      if (!res.ok) throw new Error('请求失败');
      const data = await res.json();
      console.log(data);
    };
    fetchPrompts();
  }, []);

  return <div>...</div>;
}

内容的提问来源于stack exchange，提问作者Kaushik Bhadra