如何通过 fetch() 将对象发送到 Next.js 中的动态 api 路由 [重复]答案

【问题标题】：How to send an object via fetch() to a dynamic api route in Next.js [duplicate]如何通过 fetch() 将对象发送到 Next.js 中的动态 api 路由 [重复]
【发布时间】：2025-12-09 04:45:01
【问题描述】：

我无法在 Next 中将对象发送到我的动态 api 路由。发送常规字符串可以正常工作，我可以毫无问题地更新我的 MongoDB。当发送对象时，请求数据只是显示为 [object Object]。

这是当前的代码sn-p：

客户端

let bookData = {
  title: data[i].title,
  author: data[i].author,
  date: data[i].date,
  isbn: data[i].isbn,
  description: data[i].description,
  image: data[i].image
}

fetch(`/api/db/saveBook/${bookData}`);

API 路由：/pages/api/db/saveBook/[book].js

import { MongoClient } from "mongodb";

export default async function handler(req, res) {

    const book = req.query;

    const client = await MongoClient.connect(process.env.MONGODB_URI);
    const db = client.db();
    const collection = db.collection('books');
    
    const addBook = await collection.insertOne(book);
    client.close();

    res.json(addBook);
}

【问题讨论】：

通常，数据作为 POST 请求的 payload 发送 - 用于将数据添加到数据库中。
@juliomalves 是的，这解决了问题。我误解了 Next 中动态 API 路由的用例。使用 fetch 设置基本 POST 请求并将后端 api 更改为标准静态路由是正确的方法。

标签： mongodb object next.js fetch

【解决方案1】：

考虑两个步骤，首先通过 post 请求发送数据，然后通过 fetch 请求指定内容类型。看例子：

      const req = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: formData.get("email"),
        password: formData.get("password"),
      }),
    });

【讨论】：

【解决方案2】：

所以这是我误解了接下来何时使用动态 API 路由的情况。下面是我试图做的事情的正确实现，这只是一个使用 fetch 的基本 POST 请求，就像这里提到的其他人一样。

客户：

// Store book data to be sent to API route
let bookData = {
    title: data[i].title,
    author: data[i].author,
    date: data[i].date,
    isbn: data[i].isbn,
    description: data[i].description,
    image: data[i].image
}

// Send the book data to the backend API to be saved
fetch('/api/db/saveBook', 
    {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(bookData),
    }
);

API 路由：

import { MongoClient } from "mongodb";

export default async function handler(req, res) {

    const book = req.body;

    const client = await MongoClient.connect(process.env.MONGODB_URI);
    const db = client.db();
    const collection = db.collection('books');
    
    const addBook = await collection.insertOne(book);
    client.close();

    res.json(addBook);
}

【讨论】：