在 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 }
);
}
}⚠️ 注意事项：
-
不要混用路由系统：确保前端调用的
/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）。
? 补充验证：启动开发服务器后，可直接在浏览器访问 http://localhost:3000/api/products 测试 GET 是否返回数据；使用 curl 或 Postman 发送 POST 请求验证创建逻辑。
遵循以上规范，即可彻底解决 405 Method Not Allowed 错误，并构建符合 Next.js 14 最佳实践的健壮 API 路由。
