Next.js 14 Router Handler报错：TypeError: l.json is not a function

环境信息 #

• Node.js 版本：21.6.1
• Next.js 版本：14.1.0

报错信息 #

⨯ TypeError: l.json is not a function
at g (/var/task/.next/server/app/api/route.js:1:2707)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:42484
at async eI.execute (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:32486)
at async eI.handle (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:43737)
at async Y (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:24556)
at async Q.responseCache.get.routeKind (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:1025)
at async r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:507)
at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780)
at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5363)

问题分析与解决办法 #

这个错误本质是代码里在非Response/NextResponse实例的对象上调用了json()方法，生产环境代码压缩后变量名被混淆成l，所以报错里显示l.json is not a function。以下是常见场景和修复方式：

1. 混淆了请求体解析与响应返回
   很多人会把请求对象的request.json()（用来解析请求体，需要加await）和响应对象的json()搞混，或者直接返回request.json()而不是包装成响应。
   错误写法：

   export async function POST(request) {
     return request.json(); // 错误：request.json()是解析请求体的异步方法，不能直接返回
   }
   

   正确写法：

   import { NextResponse } from 'next/server';
   
   export async function POST(request) {
     const reqData = await request.json(); // 先解析请求体
     return NextResponse.json({ status: 'ok', data: reqData }); // 用NextResponse返回JSON响应
   }
   

2. 普通对象直接调用json()
   Router Handler必须返回Response或NextResponse实例，如果你直接给普通对象加.json()，肯定会报错。
   错误写法：

   export async function GET() {
     return { message: 'hello' }.json(); // 普通对象没有json()方法
   }
   

   正确写法：

   import { NextResponse } from 'next/server';
   
   export async function GET() {
     return NextResponse.json({ message: 'hello' });
   }
   

3. 变量名冲突或覆盖
   生产环境代码压缩后，变量名会被简化，如果你代码里的变量名和内置对象重名（比如把响应对象命名为res但又被其他变量覆盖），也会导致这个问题。检查代码里的变量定义，避免和request、response这类内置对象名冲突。

4. 未正确导入NextResponse
   如果你用Next.js提供的NextResponse来返回响应，必须先导入，否则会找不到json()方法。确保代码顶部有：

   import { NextResponse } from 'next/server';
   

额外排查建议 #

• 本地先跑npm run build再启动服务，复现生产环境的压缩状态，更容易定位问题。
• 检查部署环境的依赖版本，确保Vercel等平台安装的Next.js版本和本地一致。
• 对照Next.js官方文档的Router Handler示例，核对自己的代码结构是否符合规范。

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