NextJS设置默认区域前缀触发构建错误求助

问题场景 #

按照Next.js官方文档《Prefixing defaultLocale》指引配置多语言后，执行yarn build触发构建错误，报错路径包含/default、/_error: /404等。已尝试在getStaticProps中添加locale为'default'时返回'fr'的条件判断，但问题仍未解决。

可能的问题点及解决步骤 #

1. 校验next.config.js的locale配置 #

确保i18n配置项的参数完全符合规则，重点检查prefixDefaultLocale、defaultLocale和locales的匹配：

module.exports = {
  i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'fr',
    prefixDefaultLocale: true, // 开启默认语言前缀路由
    localeDetection: false,
  },
}

开启prefixDefaultLocale后，默认语言的路由会强制带上/fr前缀，而非空路径，所有页面的路由生成逻辑必须适配这个规则。

2. 修正getStaticPaths的路径生成逻辑 #

如果页面使用getStaticPaths预渲染，必须确保生成的路径只包含配置的locale值，绝对不能出现default作为locale的路径条目：

export async function getStaticPaths({ locales }) {
  // 遍历配置的所有locale，自动排除无效的'default'
  const paths = locales.flatMap(locale => [
    { params: { slug: 'article-1' }, locale },
    { params: { slug: 'article-2' }, locale },
  ]);

  return {
    paths,
    fallback: false,
  };
}

Next.js开启prefixDefaultLocale后，会自动将defaultLocale映射为对应语言前缀，无需手动生成locale: 'default'的路径。

3. 优化getStaticProps的locale处理逻辑 #

不要硬编码默认语言值，直接从配置中读取defaultLocale来处理locale参数，避免配置变更后出现逻辑不一致：

// 从next.config.js中引入i18n配置
const { i18n } = require('../next.config');

export async function getStaticProps({ locale }) {
  // 统一处理locale，避免'default'值进入业务逻辑
  const currentLocale = locale === 'default' ? i18n.defaultLocale : locale;
  // 用处理后的currentLocale拉取对应语言的内容
  const content = await fetchLangContent(currentLocale);

  return {
    props: { content },
  };
}

4. 检查错误页面的多语言适配 #

_error.js或404.js这类全局错误页面也需要适配多语言配置，确保其数据获取逻辑（如果有）同样遵循locale处理规则：

function ErrorPage({ statusCode }) {
  return (
    <div className="error-page">
      <h1>{statusCode ? `Error ${statusCode}` : 'Unexpected error'}</h1>
    </div>
  );
}

ErrorPage.getInitialProps = ({ res, err }) => {
  const statusCode = res?.statusCode || err?.statusCode || 404;
  return { statusCode };
};

export default ErrorPage;

如果错误页面使用getStaticProps，必须按照前面的逻辑正确处理locale参数，避免生成/default/_error这类无效路径。

5. 清理缓存后重新构建 #

旧缓存可能残留错误的路由逻辑，执行以下命令清理后再重新构建：

rm -rf .next
yarn build

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