Next.js getStaticPaths配置多locale i18n动态路由方法

问题背景 #

我正在开发Next.js项目，需要基于内置i18n能力为动态页面实现多语言支持。
项目next.config.js配置如下：

module.exports = {
  i18n: {
    locales: ["en-US", "da-DK", "se-SE", "no-NO", "nl-NL"],
    defaultLocale: "en-US",
  },
  reactStrictMode: true,
  images: {
    domains: ["images.ctfassets.net"],
  },
};

当前编写的getStaticPaths方法用于从CMS（Contentful）拉取分类数据，仅指定单个locale时功能运行正常，代码如下：

export async function getStaticPaths() {
  const categories = await ContentfulCategories.getAll();

  const paths = categories.map((category) => {
    return {
      params: { category: category.slug },
      locale: "en-US",
    };
  });

  return {
    paths,
    fallback: false,
  };
}

报错现象 #

尝试直接将next.config.js中定义的locale数组传入path的locale字段时运行报错，提示传入的locale未在配置文件中定义，报错信息如下：

Error: Invalid locale returned from getStaticPaths for /integration/category/[category], the locale en-US,da-DK,se-SE,no-NO,nl-NL is not specified in next.config.js

需要实现的效果：正确配置getStaticPaths支持多locale，访问对应语言前缀路径（如example.com/en-US/category/xxx）时，可正常渲染对应语言版本的动态页面。

报错核心原因：getStaticPaths返回的每个path对象的locale字段仅支持传入单个字符串格式的locale值，不能直接传入整个locale数组。你需要为「每一个分类 + 每一个支持的locale」的组合单独生成一条path记录。

修正后的getStaticPaths代码如下：

// 支持的语言列表，和next.config.js中配置保持一致，也可以直接从配置文件中读取
const SUPPORTED_LOCALES = ["en-US", "da-DK", "se-SE", "no-NO", "nl-NL"];

export async function getStaticPaths() {
  const categories = await ContentfulCategories.getAll();

  // 双层遍历生成全量路径：先遍历所有分类，再遍历所有支持的语言
  const paths = categories.flatMap((category) => {
    return SUPPORTED_LOCALES.map((locale) => ({
      params: { category: category.slug },
      locale: locale, // 每个路径对象仅传入单个locale值
    }));
  });

  return {
    paths,
    fallback: false,
  };
}

补充说明 #

• 如果不同语言下同一分类的slug不统一（比如英文分类slug为ai-tool，丹麦语同分类slug为ki-vaerktoj），需要按locale分别拉取对应语言的分类数据，不要复用单语言的slug值，否则对应语言路径会返回404。
• 配置完成后，访问带语言前缀的路径时，Next.js会自动将当前匹配到的locale传入同页面getStaticProps的入参context中，直接读取该值拉取对应语言的内容渲染即可。
• 如果分类总数量*语言数量的页面量级较大，建议将fallback设置为true或'blocking'，减少构建时的预生成页面数量，避免构建耗时过长。

内容的提问来源于stack exchange，提问作者Mathias Riis Sorensen