获取 Next.js API 路由返回 404（未找到）错误（无服务器和 api？）

Question

我尝试在应用程序中获取 Next.js API 路由，但遇到 404（未找到）错误。我的文件夹结构如下：

src/
  views/
    pages/
      wizard/
        checkout/
          Order.tsx
      api/
        save-data.ts

在我的 Order.tsx 文件中，我有一个名为 sendDataToServer 的函数：

async function sendDataToServer(data) {
  try {
    const response = await fetch('/views/pages/api/save-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      const result = await response.json();
      console.log('Data saved:', result);
    } else {
      console.error('Error saving data:', response.status);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

在我的 save-data.ts 文件中，我有以下代码：

import { NextApiRequest, NextApiResponse } from 'next';
import { MongoClient } from 'mongodb';

const uri = "mongodb+srv://xxxx:[email protected]/?retryWrites=true&w=majority";

const client = new MongoClient(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

async function saveData(wallet: string, address: string) {
  if (!client.isConnected()) await client.connect();

  const db = client.db('your_database_name');
  const usersCollection = db.collection('users_order');

  await usersCollection.insertOne({ order });
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { wallet, address } = req.body;

    try {
      await saveData(wallet, address);
      res.status(200).json({ message: 'Data saved successfully' });
    } catch (err) {
      console.error('Error saving data:', err);
      res.status(500).json({ message: 'Error saving data' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

当我调用 sendDataToServer 函数时，出现以下错误：

Order.tsx:95 POST http://localhost:3000/views/pages/api/save-data/ 404 （未找到）

我尝试了不同的获取 URL，但仍然遇到问题。谁能帮助我理解为什么我在获取 API 路由时收到 404 错误，以及如何修复它？

Answer 1

您只需将

/pages

文件夹移动到

/src

的正下方，而不是在

/views

的内部