Next.js集成next-intl后无法调用getServerSideProps从Strapi加载数据

核心问题：你用的是Next.js App Router（目录结构为app/[locale]/about-us/page.jsx），而getServerSideProps、getStaticProps是Page Router（pages/目录体系）专属的数据获取函数，在App Router环境下完全不会被触发，这就是它们未执行的根本原因。

App Router 数据获取替代方案 #

App Router中的组件默认是服务器组件，可直接在组件内部编写异步代码获取数据，无需额外函数包裹。结合你的多语言场景，具体实现如下：

1. 服务器组件内直接异步获取数据

修改app/[locale]/about-us/page.jsx：

export default async function AboutUsPage({ params: { locale } }) {
  // 将locale传入Strapi接口，获取对应语言的内容
  const res = await fetch(`http://127.0.0.1:1337/api/regulation?locale=${locale}`);
  // 注意必须await解析响应的json数据
  const regulation = await res.json();

  return (
    <div>
      <h1>关于我们</h1>
      <p>{regulation.data.attributes.content}</p>
    </div>
  );
}

2. 生成静态路径（替代getStaticPaths）

若需要静态生成所有语言版本的页面（SSG），使用generateStaticParams函数生成所有支持的locale路径：

// 在page.jsx中添加该函数
export async function generateStaticParams() {
  // 替换为你实际支持的语言列表，也可从next-intl配置中读取
  const supportedLocales = ['zh', 'en'];
  return supportedLocales.map(locale => ({ locale }));
}

3. 控制渲染模式（SSR/SSG/增量再生）

• 静态生成（SSG）：默认fetch会缓存数据，页面构建时生成静态文件。
• 服务端渲染（SSR）：若需每次请求都获取最新数据，给fetch添加cache: 'no-store'配置：

  const res = await fetch(`http://127.0.0.1:1337/api/regulation?locale=${locale}`, { cache: 'no-store' });
  

• 增量静态再生（ISR）：设置revalidate字段，定期重新生成页面：

  // 在page.jsx顶部添加
  export const revalidate = 60; // 每60秒重新生成一次页面
  

结合next-intl的注意事项 #

由于你的路由是[locale]动态路由，组件的params参数会自动包含当前的locale值，直接用它请求Strapi对应语言的内容即可，无需额外处理。

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