Next.js：如何在并行多语言部署中原生支持ISR？

Next.js 的 ISR（增量静态再生）原生支持为多语言场景生成独立静态页面，完全不需要拆分 pages 文件夹，核心是通过路由参数传递语言标识或利用原生 i18n 路由配置来实现，以下是具体方案和社区认可的实践：

1. 基于动态路由的多语言 ISR 实现 #

通过在路由中加入语言动态参数，让 ISR 为每个语言版本生成独立的静态文件：

• 调整页面路由结构：将目标页面改为pages/[lang]/[page].js（比如pages/[lang]/about.js），或者根级动态路由pages/[lang].js对应首页
• 在getStaticPaths中预生成所有支持的语言路径：

  export async function getStaticPaths() {
    const supportedLanguages = ['en', 'zh-CN', 'ja']; // 可从配置或CMS动态获取
    return {
      paths: supportedLanguages.map(lang => ({
        params: { lang }
      })),
      fallback: 'blocking' // 或 true，根据业务需求选择回退策略
    };
  }
  

• 在getStaticProps中接收语言参数，拉取对应本地化内容：

  export async function getStaticProps({ params }) {
    const { lang } = params;
    const localizedContent = await fetchFromCMS(lang); // 自定义CMS内容获取函数
    return {
      props: { localizedContent },
      revalidate: 60 // ISR自动刷新时间，按需设置
    };
  }
  

这种方式下，ISR 会为每个lang参数生成独立的静态页面，缓存和增量刷新操作也会按语言维度单独执行。

2. 结合 Next.js 原生 i18n 路由配置（推荐） #

Next.js 内置了多语言路由支持，无需手动维护动态路由参数，配置后可自动处理语言前缀和 locale 传递：

• 在next.config.js中配置 i18n 规则：

  module.exports = {
    i18n: {
      locales: ['en', 'zh-CN', 'ja'],
      defaultLocale: 'en',
      localeDetection: false // 关闭自动语言检测，按需开启
    }
  };
  

• 在getStaticProps中通过context.locale获取当前语言，拉取对应内容：

  export async function getStaticProps({ locale }) {
    const localizedContent = await fetchFromCMS(locale);
    return {
      props: { localizedContent },
      revalidate: 60
    };
  }
  

此时，Next.js 会自动为每个 locale 生成独立的静态页面，路由会自动带上语言前缀（如/zh-CN/about），ISR 的缓存和刷新逻辑会自动关联到对应语言版本。

3. 社区常用实践技巧 #

• 封装内容获取逻辑：统一编写getLocalizedContent(locale)函数，集中处理 CMS 内容拉取、格式转换等逻辑，避免重复代码
• 差异化缓存策略：针对不同语言的页面设置不同的revalidate时间，比如热门语言（如英语、中文）设置较短的刷新周期，小众语言延长周期
• 回退机制优化：使用fallback: 'blocking'确保未预渲染的语言页面在首次请求时生成静态文件，之后复用，避免用户看到加载态
• 内容统一管理：所有多语言内容在 CMS 中按语言维度组织，不要在代码中硬编码文本，确保内容一致性和维护效率

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