Next.JS：在本地主机上运行时如何使用本地化的 API 路由，或者如何为所有区域设置使用单个 API 路由

Question

我发现我的本地化 Next.js 应用程序的 API 路由存在问题。当我在本地主机上运行站点的本地化版本时，到我的服务器功能的 API 路由包括区域设置，这会导致 404 错误。

我在客户端中获取路由，如下所示：

const res = await fetch(`api/route/path`);

当我使用默认区域设置 (

en

) 时，此方法有效，但如果我的 url 中有不同的区域设置，则获取会失败并显示 404:

GET http://localhost:3000/ko/api/route/path 404 (Not Found)

当我将站点部署到 Vercel 时，不会发生此问题。据我所知，这是因为它为我在

next.config.js

中指定的每个区域部署了无服务器功能。

我的next.config.js

const nextConfig = {
  i18n: {
    locales: [
      'en',
      'de',
      'ko',
    ],
    defaultLocale: 'en',
  },
  // ...
};

module.exports = nextConfig;

TL；博士

在本地主机上运行时，如何在 Next.JS 应用程序中获得本地化 API 路由？我不打算针对不同的区域设置在我的 API 上有不同的行为，那么有没有一种方法可以通过单个 API 路由所有 API 调用，而不是为每个区域设置提供无服务器函数？

Answer 1

我发现了问题所在。获取中的 API 路由路径在开头没有正斜杠，这导致它们没有作为绝对路径附加到我的域上。

因此，获取中的路径应该是

/api/route/path

，而不是

api/route/path

。

如果没有正斜杠，路径名是相对于 URL 附加的，其中将包括在本地主机上运行时的区域设置。

Answer 2

我确实添加了斜杠，但仍然在 url 中附加了语言环境。如果我在中间件匹配器中向 /api 添加排除项，则该网站将丢失所有样式。 您还添加了其他配置/代码吗？ （抱歉，我没有足够的声誉来发表评论......）