带有 Next.js api 文件夹的 POST 404（未找到错误） - 应用程序路由器

Question

我是 Next.js 的新手，我发现一些开发人员使用 /pages 文件夹来创建他们的 API 路由。但是，我使用应用程序路由器，API 路由存储在目录

src/app/api/rent/route.js

中。我尝试过从“next/server”模块导入 { NextResponse } 。尽管做出了这些努力，我仍然遇到持续的 404 错误以及

app-index.js:33 Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

import { MongoClient } from "mongodb";
import { NextResponse } from "next/server";

export async function POST(req) {
  try {
    const client = await MongoClient.connect(
      "mongodb+srv://xxxxxxx:[email protected]/propertyupload?retryWrites=true&w=majority&appName=Cluster0"
    );
    const db = client.db();

    const propertyCollections = db.collection("property");

    const result = await propertyCollections.insertOne(req.body);

    console.log(result);

    client.close();

    return NextResponse.json({ message: "Property uploaded" }, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to insert property" },
      { status: 500 }
    );
  }
}

export default POST;

我有一个简单的表单，我想将数据推送到下面的 Mongodb 客户端。这存储在 src/app/placead/page.js 中

"use client";
import React from "react";
import RentForm from "../../../components/form";

const Rent = () => {
  async function sendForm(addFormData) {
    try {
      const response = await fetch("/api/rent/route", {
        method: "POST",
        body: JSON.stringify(addFormData),
        headers: {
          "Content-type": "application/json",
        },
      });

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error("Error:", error);
    }
  }
  //form 
  return <RentForm onFormSubmission={sendForm} />;
};
export default Rent;

Answer 1

route

是多余的。 路由应该只是

/api/rent.

const response = await fetch("/api/rent", {
        method: "POST",
        body: JSON.stringify(addFormData),
        headers: {
          "Content-type": "application/json",
        },
    });