Next.js 与 MongoDB POST请求出现500内部服务器错误求助

问题核心 #

从错误栈SyntaxError: Unexpected number in JSON at position 1可直接定位：API路由中手动执行JSON.parse(req.body)是错误操作——Next.js会自动解析Content-Type: application/json的请求体，此时req.body已经是解析后的JavaScript对象，再次解析必然抛出语法错误。

修复步骤 #

1. 修正API路由（Posts.js） #

移除手动解析req.body的代码，直接使用已解析的对象，同时适配MongoDB驱动的最新返回结构：

import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db("quick_ticker_db");

  switch (req.method) {
    case "POST":
      // 直接使用req.body，无需JSON.parse
      const insertResult = await db.collection("posts").insertOne(req.body);
      // MongoDB驱动v4+不再返回ops字段，改用insertedId获取新文档ID
      res.json({ ...req.body, _id: insertResult.insertedId });
      break;
    case "GET":
      const allPosts = await db.collection("posts").find({}).toArray();
      res.json({ status: 200, data: allPosts });
      break;
    default:
      // 处理未定义的请求方法，返回标准405错误
      res.status(405).json({ message: "Method Not Allowed" });
      break;
  }
}

2. 优化前端请求（create.js） #

移除无效的encodeBodyAsJSON配置（非fetch API标准属性），并添加基础错误处理：

export default function CreateTicker() {
  const handleSubmit = async (event) => {
    event.preventDefault()

    const data = { 
      ticker: event.target.ticker.value 
    }

    const JSONdata = JSON.stringify(data)
    const endpoint = '/api/posts'

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSONdata
    }

    try {
      const response = await fetch(endpoint, options)
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`)
      }
      const result = await response.json()
      console.log("提交成功:", result)
      // 提交成功后重置表单
      event.target.reset()
    } catch (error) {
      console.error("提交失败:", error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="ticker">Ticker</label>
      <input type="text" id="ticker" name="ticker" required />
      <button type="submit">Submit</button>
    </form>
  )
}

验证要点 #

• 确认MongoDB连接正常（GET请求正常已验证此点）
• 测试POST请求时，查看浏览器控制台是否有新报错
• 检查MongoDB数据库是否成功插入新文档

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