Nextjs api“pages/api”在 vercel 服务器上不起作用答案

【问题标题】：Nextjs api "pages/api" doesn't work on vercel serverNextjs api“pages/api”在 vercel 服务器上不起作用
【发布时间】：2021-06-13 04:08:45
【问题描述】：

大家好，可以帮帮我吗？

我正在尝试配置我的假 API 来创建一些个人项目，但在我的情况下，使用 /pages/api 文件夹的方法仅在我部署到服务器时适用于本地主机在 Vercel 上，项目找不到我的端点。

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

我尝试并工作的一件事是使用应用程序根目录下的 api 文件夹（在 /src 文件夹外）部署到 vercel，但 api 停止在 localhost 上工作。

这个结构在 localhost 上有效，但在服务器上无效：

├───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 钩子：

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

谢谢！

【问题讨论】：

API routes 应该进入/pages/api 文件夹。 api 文件夹必须在 pages 文件夹内。
感谢 Julio 的回答，你是对的，但我的问题是在生产中，当我使用 /pages/api 上的文件夹时，项目回答 404。
这听起来不对。你能显示你得到的确切错误吗？失败请求的 URL 是否正确？
没错，我在生产中的所有端点都返回 GET 错误 404（未找到），我尝试的只是将 api 文件夹移动到项目根目录，它适用于生产但对我来说似乎不对，我认为（本地主机和生产）都应该与正确位置的api文件夹一起使用/pages/api/。
你能从你的代码中展示一个你向 API 路由发出请求的例子吗？

标签： reactjs rest next.js serverless vercel

【解决方案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.

确保您在 out 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，则不必触摸它。

【讨论】：