Next.js 14 API路由中如何通过GET方法获取查询参数？

在Next.js 14的App Router API路由中，Request对象遵循标准Web API规范，没有内置的query属性——这是旧版Pages Router的专属用法，因此你会触发TypeScript报错。要获取GET请求的查询参数，需要通过URLSearchParams来处理。

修复步骤： #

1. 从请求URL中提取查询参数集合
2. 将page参数转换为数字并设置默认值
3. 处理非法参数（比如非数字的page值）

修改后的完整代码如下：

import { NextResponse } from 'next/server';
import prismadb from '@/lib/prismadb'; // 请确保你的prismadb导入路径正确

export async function GET(req: Request) {
  try {
    // 解析请求URL的查询参数
    const searchParams = new URL(req.url).searchParams;
    // 获取page参数，转成整数，默认值设为1
    const page = parseInt(searchParams.get('page') || '1', 10);
    // 处理非数字的page值，避免计算出错
    const validPage = isNaN(page) ? 1 : page;

    const pageSize = 5; // 每页展示的视频数量

    const totalCount = await prismadb.video.count();
    const totalPages = Math.ceil(totalCount / pageSize);

    // 确保起始索引不小于0
    const startIndex = Math.max((validPage - 1) * pageSize, 0);

    // 随机排序并分页获取视频ID（注：RANDOM()是PostgreSQL语法，MySQL需替换为RAND()）
    const videoIds = await prismadb.$queryRaw<[{ id: number }]>`
      SELECT id FROM Video
      ORDER BY RANDOM()
      OFFSET ${startIndex} LIMIT ${pageSize}
    `;

    const videoIdStrings = videoIds.map((videoId) => String(videoId.id));

    const videos = await prismadb.video.findMany({
      where: { id: { in: videoIdStrings } },
      // 已通过SQL分页获取目标ID，此处无需再设置take/skip
    });

    return NextResponse.json({ videos, totalPages });
  } catch (error) {
    console.log('[GET_VIDEO_POST]', error);
    return new NextResponse('Internal Error', { status: 500 });
  }
}

关键说明： #

• new URL(req.url).searchParams：通过标准Web API解析请求URL的查询参数部分
• parseInt(searchParams.get('page') || '1', 10)：获取page参数，若参数不存在则默认使用1，同时转换为整数类型
• isNaN(page) ? 1 : page：处理用户传入非数字page的异常情况，避免后续计算出现错误
• 优化点：由于已经通过SQL的OFFSET/LIMIT获取了对应分页的ID集合，后续findMany无需再设置take和skip，直接通过ID数组过滤即可

内容的提问来源于stack exchange，提问作者Mohammed Bekele