Next.js构建报错：API路由因访问request.url无法静态预渲染

问题原因 #

你的API路由/api/cards在构建阶段被Next.js尝试静态预渲染，但该路由依赖request.url获取查询参数——这个属性仅在运行时的真实请求中存在，构建阶段无法访问，导致预渲染失败。

解决方案 #

1. 强制API路由动态渲染 #

在src/app/api/cards/route.js文件顶部添加以下配置，明确告诉Next.js该路由必须在运行时处理，禁止静态预渲染：

export const dynamic = 'force-dynamic';

2. 优化查询参数获取（可选但推荐） #

Next.js提供了更适配自身路由机制的查询参数获取方式，替换你原有的URL解析代码：

// 替换原代码
const { searchParams } = new URL(req.url);
// 改为官方推荐写法
const searchParams = req.nextUrl.searchParams;

这种方式无需手动解析URL，更简洁可靠。

验证修复 #

修改完成后，重新执行构建命令：

npm run build

此时Next.js会跳过该API路由的静态预渲染流程，直接在运行时处理请求，构建即可正常完成。

内容的提问来源于stack exchange，提问作者Adee Shaikh