next.js 404 无法在 vercel 上加载资源 /api/答案

【问题标题】：next.js 404 fail to load resource /api/ on vercelnext.js 404 无法在 vercel 上加载资源 /api/
【发布时间】：2021-09-21 02:47:16
【问题描述】：

我正在构建一个部署在 vercel 上的下一个 js 网站。

我制作了一个 next.js api /api/contact，它通过 nodemailer 发送邮件。当我在我的电脑上尝试代码时，它工作正常，但是当我在 vercel 上上传（与 github 集成）时，我在控制台中收到 /api/contact 的“404 加载资源失败”，但它不起作用。

next.js api 是否需要进行更多配置才能在 vercel 上工作？

这里是 api 调用的代码：

fetch("/api/contact", {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
    }).then((res) => {

contact.js in api folder

【问题讨论】：

您从哪里进行 API 调用？
所以现在我只有一个页面 (index.js) 在 pages 文件夹中，我在点击按钮后从这里拨打电话：onClick={handleSubmit} const handleSubmit = (e) => { e.preventDefault(); fetch("/api/contact" ...

标签： api next.js http-status-code-404 vercel

【解决方案1】：

以下是有效的答案：几次部署后“加载资源失败”消失了，但我仍然有 404。问题是 transporter.sendMail 需要异步 + 我遇到了 gmail 问题，我最终使用了另一个邮件提供商（zoho）。所以对于任何面临同样问题的人来说，这里有一个工作代码（也许不是最好的，但它正在工作）：

export default async (req, res) => {
  require('dotenv').config()
  const nodemailer = require('nodemailer');

  async function mail() {
    console.log('enter async function');
    const transporter = nodemailer.createTransport({
      name: "smtp.zoho.com",
      port: 465,
      host: "smtp.zoho.com",
      auth: {
        user: process.env.mailsender,
        pass: process.env.mailpw,
      },
      secure: true,
    })
    let mail = await transporter.sendMail({
      from: process.env.mailsender,
      to: process.env.mailreceive,
      subject: `${req.body.message}`,
      text: `${req.body.message}`,
      html: `<div><p>${req.body.message}</p></div>`
    });
  }

  try {
    console.log('sending mail');
    await mail();
    res.status(200);
    console.log('mail should be sent');
  } catch (error) {
    console.log(error);
    console.log('error sending mail');
    res.status(404);
  } finally {
    res.end();
  };
}

【讨论】：