将 Next.js 应用程序托管到 Vercel 时，后端 API 无法工作

Question

我已使用 GitHub 将 Next.js 应用程序托管到 vercel。 在部署应用程序之前，我从 .env 文件设置环境变量。 这里我使用自定义

server.js

文件来启动服务器。 我使用

node server.js

脚本来启动服务器，而不是使用

next start

。

在package.json文件中

"scripts": {
    "start": "node server",
    "dev": "next dev",
    "build": "next build",
    "serve": "next start",
    "lint": "next lint"
  }

server.js 文件

const express = require('express');
const https = require('https');
const fs = require('fs');
const next = require('next');
const dotenv = require("dotenv");
const morgan = require("morgan");
const bodyParser = require('body-parser');
const cors = require("cors");
const path = require('path');
const connectToMongodb = require('./src/db/mongodb');
dotenv.config({ path: "./.env" });
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
console.log('started')
app.prepare().then(() => {
  const server = express();
  server.use(morgan('dev'))
  server.use(express.json());
  server.use(cors());
  server.use(bodyParser.json());
  server.use(express.static(path.join(__dirname, 'public')))
  const options = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem')
  };
  console.error('before connecting...')
  connectToMongodb();
  console.error('after connecting...')
  console.log('after connecting...')
  server.all('*', (req, res) => {
    return handle(req, res);
  });
  https.createServer(options, server).listen(443, () => {
    console.log('Server running on https://localhost');
  });
});

我认为部署到vercel时不需要创建https服务器。

部署并启动服务器后，前端部分工作正常，但后端似乎无法工作。 我认为 Vercel Serverless Function 无法处理传入的 API 请求。

我该如何解决这个问题并使后端正常工作？

Answer 1

由于您使用的是 Next.js，因此无需为后端创建单独的 Express 服务器。

如果您使用 Next.js v12（或更低版本），或使用

pages

路由器，则可以使用 API 路由。

pages/api 文件夹内的任何文件都会映射到 /api/* 并将被视为 API 端点而不是页面。它们只是服务器端捆绑包，不会增加您的客户端捆绑包大小。

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

这意味着，如果您想创建一个 api：

api/hello

，请创建一个名为

pages/api/hello.js

的文件，其中包含以下内容：

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

---

如果您使用 Next.js 13（或更高版本）并使用

app

路由器，则可以使用路由处理程序。

路由处理程序允许您使用 Web 请求和响应 API 为给定路由创建自定义请求处理程序。

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

您需要创建文件：

app/api/hello/route.js

，并包含以下内容：

import { NextResponse } from 'next/server'

export async function GET(request) {
  return NextResponse.json({ message: 'Hello from Next.js!' })
}