reactjs - Nextjs api "pages/api"在 Vercel 服务器上不起作用

Question

大家好，可以帮帮我吗？

我正在尝试配置我的假 API 来创建一些个人项目，但就我而言，使用 /pages/api 文件夹的方法仅在我部署到服务器时在 localhost 中对我有效在 Vercel 上，项目找不到我的端点。

在我的例子中，我使用 src/文件夹方法来开发我的应用程序，我不知道这种结构是否会导致 api 文件夹出现问题。

我尝试并工作的一件事是使用应用程序根目录下的 api 文件夹(在/src 文件夹之外)部署到 vercel，但 api 停止在本地主机上工作。

此结构适用于本地主机但不适用于服务器:

├───public/
├───src/
    ├───api/
    ├───pages/
    ...
next.config.js
package.json

此结构适用于服务器但不适用于本地主机:

├───api/
├───public/
├───src/
    ├───pages/
    ...
next.config.js
package.json

这是我用来获取数据的方法:

AXIOS API:

import axios from 'axios'

const api = axios.create({
  baseURL: '/api/'
})

export default api

驻波比 Hook :

import api from 'src/services/api'
import useSWR from 'swr'

function SwrFetchHook<Data = any, Error = any>(url: string) {
  const { data, error } = useSWR<Data, Error>(url, async url => {
    const response = await api.get(url)
    return response.data
  })

  return { data, error }
}

export default SwrFetchHook

SWR 回调:

const { data } = SwrFetchHook<INavItem[]>('categories')

我希望我能解释一下，我的问题是如何使用此功能的最佳方式，因为/src 文件夹通常与 nextjs 一起使用，但我不知道这是否是 api 的真正问题文件夹。

谢谢!

Answer 1

不能 100% 确定这是否是同一个问题。我在构建阶段收到此警告:

warn  - Statically exporting a Next.js application via `next export` disables API routes. This command is meant for static-only hosts, and is not necessary to make your application static.

确保您在 package.json 中使用了正确的构建命令脚本。

我是我的情况:

"next build && next export"需要改为"build": "next build"

注意:我删除了&& next export

这禁用了静态导出功能并允许使用 pages/api运行时 yarn start注意: yarn start 依赖于 Vercel 构建管道中的构建脚本。因此，除非需要，否则不要覆盖默认设置。

对于普通的 Node/JS 项目，您可以在脚本区域定义一个源文件夹，即 "start": "<SOME_COMMAND> ./src" ....但是 Next.js 会自动执行此操作，所以我认为没有 src文件是问题。我也有一个 src在我的项目中创建文件，这是组织 JS 项目的一种非常常见的方式(首选方式)。如果您正在使用 next，则不必触摸它。