我尝试在应用程序中获取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函数时，我得到以下错误：
404 Not Found（Not Found）404 Not Found（Not Found）
我已经尝试了不同的提取URL，但仍然遇到这个问题。有谁能帮助我理解为什么在获取API路由时会出现404错误，以及如何修复它？