Next.js 13 API路由中request.query未定义的问题求助

问题核心是你沿用了Next.js Pages Router的API路由写法，但在App Router中，API路由的参数获取方式与结构完全不同。

1. 修正API路由代码（app/api/events/route.js） #

App Router的API路由需要按HTTP方法导出单独的处理函数（比如GET、POST），查询参数要通过request.nextUrl.searchParams获取，而非req.query。

修改后的代码示例：

import Event from "@models/Event";
import { connectToMongoDB } from "@utils/database/connectToMongoDB";

// App Router中按HTTP方法导出处理函数
export async function GET(request) {
  // 获取查询参数集合
  const searchParams = request.nextUrl.searchParams;
  const filterBy = searchParams.get('filterBy');
  
  // 收集除filterBy外的其他筛选参数
  const filters = {};
  for (const [key, value] of searchParams.entries()) {
    if (key !== 'filterBy') {
      filters[key] = value;
    }
  }

  console.log('filterBy:', filterBy);
  console.log('filters:', filters);

  // 后续数据库操作逻辑
  await connectToMongoDB();
  const events = await Event.find(filters);
  
  return new Response(JSON.stringify(events), { status: 200 });
}

2. 修正页面数据获取逻辑（app/(root)/page.jsx） #

Next.js 13 App Router不再支持getServerSideProps，服务器端数据获取直接在Page组件中编写异步函数即可（Page默认是Server Component）：

修改后的代码示例：

async function getEvents() {
  // 注意：Server Component中调用内部API时，建议直接复用数据库逻辑，避免额外HTTP请求
  // 以下保留fetch写法作为示例
  const response = await fetch(`http://localhost:3000/api/events?filterBy=status&status=Live`, {
    cache: 'no-store' // 禁用缓存，模拟实时数据效果
  });
  if (!response.ok) {
    throw new Error('获取活动数据失败');
  }
  return response.json();
}

export default async function HomePage() {
  const events = await getEvents();
  
  return (
    <div>
      {events.map(event => (
        <div key={event._id}>{event.name}</div>
      ))}
    </div>
  );
}

关键说明 #

• App Router的API路由不再使用req/res对象，而是接收request参数，返回Response对象。
• 查询参数通过request.nextUrl.searchParams操作，这是一个URLSearchParams实例，提供get()、entries()等方法。
• Server Component中直接编写异步代码即可实现服务器端数据获取，无需getServerSideProps这类生命周期函数。

内容的提问来源于stack exchange，提问作者Ananth Narayan