Next.js生产环境服务端组件Fetch失效问题及解决方案

问题场景 #

开发环境下，/blog-posts页面可正常获取所有博客文章，/blog-posts/[slug]动态路由也能正确获取单篇文章。但部署到Vercel后，列表页仍可正常加载数据，访问动态路由时却显示404页面，控制台提示"Failed to load resource"，且Vercel项目日志中无相关报错记录。

代码实现（遵循Next.js文档规范） #

数据获取函数 #

async function getData() {
  const res = await fetch("https://*backendurl*/api/getBlogPosts");

  if (!res.ok) {
    // 触发最近的error.js错误边界
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

页面调用方式 #

const data = await getData();

部署相关日志 #

添加{ cache: 'no-store' }选项后的Vercel构建日志：

Route (app)                                Size     First Load JS
┌ ○ /                                      0 B                0 B
├ λ /blog-yazilari                         315 B          84.1 kB
├ λ /blog-yazilari/[slug]                  536 B          84.3 kB
├ ○ /favicon.ico                           0 B                0 B
└ ○ /magaza                                135 B          77.8 kB
+ First Load JS shared by all              77.7 kB
  ├ chunks/769-f274f40a4e22dc69.js         25.2 kB
  ├ chunks/bce60fc1-5c8e6a0bf302e824.js    50.5 kB
  ├ chunks/main-app-6118df2562cf8b41.js    216 B
  └ chunks/webpack-753df88ab1dee99a.js     1.75 kB
Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          75.5 kB
+ First Load JS shared by all              75.4 kB
  ├ chunks/framework-8883d1e9be70c3da.js   45 kB
  ├ chunks/main-c4daa89c94afb7ed.js        28.4 kB
  ├ chunks/pages/_app-998b8fceeadee23e.js  195 B
  └ chunks/webpack-753df88ab1dee99a.js     1.75 kB
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

ISR函数中无博客页面相关记录：

favicon.ico
Node.js 18.x
7,5 MB
IAD1


index
Node.js 18.x
7,5 MB
IAD1


index.rsc
Node.js 18.x
7,5 MB
IAD1


magaza
Node.js 18.x
7,5 MB
IAD1


magaza.rsc

问题原因及解决方法 #

项目初期配置了国际化（i18n），删除next.config.js中的以下配置后问题解决：

//next.config.js
const nextConfig = {
 i18n: {
    locales: ["en-US", "tr-TR", "ru-RU"],
    defaultLocale: "tr-TR",
  },
...
}

内容的提问来源于stack exchange，提问作者Mithat Akbulut