Next.js App路由下API route.ts获取查询参数的构建报错问题

算力阿峰

2026-7-11

解决Next.js App Router构建时的DynamicServerError（查询参数场景）

这不是Next.js的bug，是App Router静态渲染机制下的代码适配问题，下面详细说明原因和解决方案：

问题根源

Next.js在npm run build阶段会尝试静态预渲染所有符合条件的路由/页面。当你的API路由中直接使用nextUrl.searchParams时，这个操作属于请求时才能确定的动态依赖，不符合静态渲染的要求，因此触发DynamicServerError。而dev模式下默认采用动态渲染策略（优先保证开发便利性），不会做静态预渲染检查，所以本地运行无异常。

适配解决方案

方案1：显式标记API路由为动态渲染

在你的/api/prompt/route.ts中添加dynamic导出选项，强制该路由始终使用动态渲染，避免build时的静态检查报错：

// 显式强制动态渲染
export const dynamic = 'force-dynamic';

export async function GET(request: Request) {
  // 获取查询参数
  const searchText = request.nextUrl.searchParams.get('search');
  
  // 后续业务逻辑：根据searchText生成返回内容
  return Response.json({ data: searchText ? `搜索结果：${searchText}` : '未传入搜索参数' });
}

方案2：改用动态路径参数（你的临时解决办法）

将查询参数改为路径段形式（如/api/prompt/[search]），这种结构会被Next.js自动识别为动态路由，无需额外配置即可跳过静态预渲染检查：

// /api/prompt/[search]/route.ts
export async function GET(
  request: Request,
  { params }: { params: { search: string } }
) {
  const searchText = params.search;
  // 后续业务逻辑
  return Response.json({ data: `搜索结果：${searchText}` });
}