Next.js 的 API 文件夹 "pages/api" 在 Vercel 服务器上无法运行。

Question

大家好，能帮我一下吗？

我正在尝试配置我的假API以创建一些个人项目，但在我的情况下，只有使用/pages/api文件夹的方法在本地主机上才能正常工作，当我部署到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

SWR 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文件夹的真正问题。

谢谢！

- luanmessias

---

API routes 应该放在 /pages/api 文件夹中。api 文件夹必须位于 pages 文件夹内。 - juliomalves

感谢Julio的回答，你是对的，但我的问题在于生产环境中，当我使用/pages/api文件夹时，项目会返回404错误。 - luanmessias

这听起来不太对。你能展示一下具体的错误信息吗？请求的URL是否正确？ - juliomalves

当然，我把我正在使用的方法放在了上面。我也尝试了一些不同的方法...仅使用fetch而没有axios，也没有使用SWR，但结果始终相同，在本地主机上工作，但在生产环境中不起作用... 我猜可能是vercel服务器与./src/结构文件夹不兼容，但我不确定。 - luanmessias

同样的问题，如果我把/api文件夹放在根目录下，就会出现错误。 - Speedy11

Answer 1

不确定是否为同一问题。我在构建阶段遇到了以下警告：

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

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

对于普通 Node/JS 项目，您可以在脚本区域定义源文件夹，例如 "start": "<SOME_COMMAND> ./src"....但是 Next.js 会自动执行此操作，因此我认为拥有一个名为 src 的文件夹并不是问题所在。我也在项目中有一个名为 src 的文件夹，这是一种非常常见（也是首选）的组织 JS 项目的方式。如果您正在使用 next，就不应该必须修改它。

- Kelvin

Answer 2

我尝试在Digital Ocean上部署我的应用程序，因为Vercel没有提供服务器，所以它成功了。我也无法从POSTMAN调用我的API。将其部署在DigitalOcean上，然后它就像我的本地主机一样运行了一个服务器。

- Abhishek Kumar