NextJS 13.4 App Router中GET请求的正确实现方法

在Next.js 13.4的App Router中，API路由的实现逻辑已完全替代旧的pages/api模式——无需再通过NextAPIRequest/NextAPIResponse判断请求方法，直接导出对应HTTP方法的函数即可处理请求。以下是两种场景的具体实现：

场景1：获取全部数据的GET请求 #

创建app/api/items/route.ts文件（对应请求地址GET /api/items）：

// app/api/items/route.ts
import { NextResponse } from 'next/server';

// 模拟业务数据源，实际开发中替换为数据库查询/ORM操作
const mockItems = [
  { uuid: 'a1b2c3', name: '商品A', description: '测试商品A' },
  { uuid: 'd4e5f6', name: '商品B', description: '测试商品B' },
];

// 直接导出GET函数处理GET请求
export async function GET() {
  // 此处可执行异步数据查询，比如：
  // const items = await prisma.item.findMany();
  
  return NextResponse.json(mockItems);
}

说明： #

• 路由文件固定命名为route.ts，放在app/api下的对应子目录中
• 导出的GET函数自动绑定到该路由的GET请求，无需手动判断请求方法
• 用NextResponse.json()直接返回JSON格式响应，支持传入状态码、headers等配置

场景2：按UUID获取单条数据的GET请求 #

使用动态路由实现，创建app/api/items/[uuid]/route.ts文件（对应请求地址GET /api/items/{uuid}）：

// app/api/items/[uuid]/route.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const mockItems = [
  { uuid: 'a1b2c3', name: '商品A', description: '测试商品A' },
  { uuid: 'd4e5f6', name: '商品B', description: '测试商品B' },
];

export async function GET(_request: NextRequest, { params }: { params: { uuid: string } }) {
  // 从动态路由参数中解构出uuid
  const targetUuid = params.uuid;
  const matchedItem = mockItems.find(item => item.uuid === targetUuid);

  if (!matchedItem) {
    // 数据不存在时返回404响应
    return NextResponse.json({ error: '指定数据不存在' }, { status: 404 });
  }

  return NextResponse.json(matchedItem);
}

说明： #

• 动态路由用[参数名]作为目录名，参数会自动注入到params对象中
• 如果需要获取URL查询参数（如/api/items?filter=active），可通过_request.nextUrl.searchParams.get('filter')获取
• 可根据业务需求添加参数校验、异常捕获等逻辑

内容的提问来源于stack exchange，提问作者Octo Palm Tree