Next.js 14 中 API 路由 405 错误的完整修复指南-js教程-PHP中文网

Next.js 14 中 API 路由 405 错误的完整修复指南

在 Next.js 14 的 App Router 中，API 路由必须使用 export const GET/POST 等命名导出函数，而非旧式 req/res 处理函数；否则会因方法不被识别而返回 405（Method Not Allowed）错误。

在 next.js 14 的 app router 中，api 路由必须使用 `export const get/post` 等命名导出函数，而非旧式 `req/res` 处理函数；否则会因方法不被识别而返回 405（method not allowed）错误。

Next.js 14 默认启用 App Router（基于 /app 目录），其 API 路由机制与旧版 Pages Router（/pages/api）有本质区别：它不再接受 export default function handler(req, res) 这类 Express 风格的中间件函数，而是要求将每个 HTTP 方法显式声明为独立的、大驼峰命名的导出函数（如 GET、POST），并统一使用 Request/Response 对象进行处理。

你遇到的 405 Method Not Allowed 错误，根本原因正是：尽管文件路径 /app/api/products/route.js 符合 App Router 规范，但你仍沿用了 Pages Router 的 export default function handle(req, res) 写法——Next.js 无法识别该导出，因此默认拒绝所有请求方法，返回 405。

✅ 正确写法如下（适配 App Router）：

// app/api/products/route.js
import { Product } from '../../../models/Product';
import { mongooseConnect } from '../../lib/mongoose';

// ✅ 显式导出 GET 方法
export async function GET() {
  await mongooseConnect();
  const products = await Product.find().lean(); // .lean() 可选，提升性能
  return Response.json(products);
}

// ✅ 显式导出 POST 方法，接收 Request 对象
export async function POST(request) {
  await mongooseConnect();

  try {
    const body = await request.json(); // 自动解析 JSON 请求体
    const { title, description, price } = body;

    // 数据校验建议（生产环境必加）
    if (!title || !price) {
      return Response.json(
        { error: 'Title and price are required' },
        { status: 400 }
      );
    }

    const productDoc = await Product.create({ title, description, price });
    return Response.json(productDoc, { status: 201 });
  } catch (err) {
    console.error('API POST error:', err);
    return Response.json(
      { error: 'Failed to create product' },
      { status: 500 }
    );
  }
}

⚠️ 注意事项：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

不要混用路由系统：确保前端调用的 /api/products 指向的是 /app/api/products/route.js，而非残留的 /pages/api/products.js（如有，请彻底删除）；
客户端请求保持一致：你当前在 NewProduct 组件中使用 axios.post("/api/products", data) 是正确的（App Router 下 API 路径不变）；
request.json() 必须 await：App Router 中请求体是流式读取，需异步解析；
错误处理不可省略：直接 throw 或未捕获的 Promise rejection 将导致 500，建议包裹 try/catch 并返回明确状态码；
服务端组件限制：route.js 是纯服务端运行环境，不能导入 'use client' 组件或浏览器 API（如 window）。