Next.js App Router API路由获取Query实现分页及类型报错解决

在App Router的API路由中，传入的请求对象是Web标准的Request类型，而非Pages Router里的NextApiRequest，因此没有内置的query属性，这就是你看到「Property 'query' does not exist on type 'Request'」类型错误的原因。

要获取分页用的query参数，需要通过URLSearchParams从请求URL中解析，以下是完整的实现示例：

示例代码（app/api/posts/route.ts） #

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  // 解析请求URL的查询参数
  const { searchParams } = new URL(request.url);
  
  // 提取分页参数并做合法性校验
  const page = parseInt(searchParams.get('page') || '1', 10);
  const limit = parseInt(searchParams.get('limit') || '10', 10);
  
  // 确保参数为有效正数，设置合理边界
  const validPage = page > 0 ? page : 1;
  const validLimit = limit > 0 && limit <= 50 ? limit : 10;
  
  // 分页核心计算：跳过的条目数
  const skip = (validPage - 1) * validLimit;
  
  // --- 替换为你的实际数据查询逻辑 ---
  // 模拟从数据库获取分页数据
  const mockPosts = Array.from({ length: validLimit }, (_, index) => ({
    id: skip + index + 1,
    title: `文章 ${skip + index + 1}`,
    content: `这是第${validPage}页的第${index + 1}篇文章内容`
  }));
  // 模拟总条目数（实际从数据库查询统计）
  const totalCount = 120;
  const totalPages = Math.ceil(totalCount / validLimit);
  // -------------------------------
  
  // 返回带分页信息的响应
  return NextResponse.json({
    data: mockPosts,
    pagination: {
      currentPage: validPage,
      pageSize: validLimit,
      totalPages,
      totalCount
    }
  });
}

关键说明 #

• 用new URL(request.url)解析完整请求URL，通过searchParams获取所有query参数
• 对page和limit做类型转换与边界校验，避免非法参数导致逻辑错误
• 分页逻辑核心是计算skip（跳过的条目数），公式为(当前页-1)*每页条数
• 响应中返回分页元数据（总页数、总条目数等），方便前端做分页控件展示

优化：封装参数提取工具函数 #

如果多个API路由都需要分页逻辑，可以封装工具函数复用：

function extractPaginationParams(searchParams: URLSearchParams) {
  const page = parseInt(searchParams.get('page') || '1', 10);
  const limit = parseInt(searchParams.get('limit') || '10', 10);
  
  return {
    page: Math.max(page, 1),
    limit: Math.min(Math.max(limit, 1), 50) // 限制最大每页50条
  };
}

// 在GET函数中调用
const { page, limit } = extractPaginationParams(searchParams);

测试时直接访问类似/api/posts?page=3&limit=20的地址，即可得到对应分页的数据。

内容的提问来源于stack exchange，提问作者Satender maurya