我发现本地化的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
中指定的每个语言环境部署了无服务器功能。
const nextConfig = {
i18n: {
locales: [
'en',
'de',
'ko',
],
defaultLocale: 'en',
},
// ...
};
module.exports = nextConfig;
TL;博士
我怎么能得到本地化的API路由工作在我的Next.JS应用程序时,在本地主机上运行?我不打算为不同的语言环境在我的API上有不同的行为,那么是否有一种方法可以通过单个API路由所有API调用,而不是为每个语言环境提供无服务器功能?
我发现了问题所在。取回的API路由路径在开始时没有正斜杠,这导致它们没有作为绝对路径附加到我的域中。
所以,取路径应该是/api/route/path
,而不是api/route/path
。
如果没有正斜杠,路径名将相对于URL追加,这将包括在本地主机上运行时的区域设置。