NextJS 14 Pages路由下SSG+i18n+动态路由配置问题

针对你升级时遇到的静态导出（output: 'export'）与内置i18n冲突的问题，核心原因是NextJS 13+的静态导出模式不再支持内置的i18n路由配置，需要手动实现基于路径的国际化方案，以下是具体修改步骤：

1. 修改next.config.js #

移除内置的i18n配置，保留静态导出设置：

const nextConfig = {
  output: 'export',
  // 删除原i18n配置块
}

module.exports = nextConfig;

2. 调整动态兜底路由的getStaticPaths #

不再依赖NextJS传入的locales参数，直接从自定义i18n配置导入 locales，手动生成包含locale前缀的所有路径：

// src/pages/[[...slug]].js
import { locales, defaultLocale } from '../../i18n';

export const getStaticPaths = async () => {
  const paths = [];

  await Promise.all(locales.map(async (locale) => {
    // 替换为你实际获取对应语言下所有页面slug的逻辑
    const pageSlugs = await fetchYourPageSlugs(locale); 

    // 为每个slug生成带locale前缀的路径
    pageSlugs.forEach(slug => {
      paths.push({
        params: { slug: [locale, ...slug.split('/')] }
      });
    });

    // 添加当前locale的根路径（如/en-US/）
    paths.push({
      params: { slug: [locale] }
    });
  }));

  return {
    paths,
    fallback: false
  };
};

3. 修改getStaticProps解析locale与加载翻译 #

从路径参数中提取locale，验证有效性后加载对应翻译：

// 继续在[[...slug]].js中添加
import { getTranslations } from '../../utils/i18n';

export async function getStaticProps({ params }) {
  // 从路径参数中拆分locale和实际slug
  const [locale, ...slugParts] = params.slug || [];
  const validLocale = locales.includes(locale) ? locale : defaultLocale;
  const pageSlug = slugParts.join('/');

  // 加载对应locale的翻译（复用原next-translate的loadLocaleFrom逻辑）
  const translations = await getTranslations(validLocale, 'common');

  return {
    props: {
      translations,
      locale: validLocale,
      slug: pageSlug
    }
  };
}

4. 实现自定义i18n工具函数 #

创建src/utils/i18n.js，封装翻译加载和路径生成逻辑：

import { locales, defaultLocale, loadLocaleFrom } from '../i18n';

// 加载指定locale的翻译文件
export async function getTranslations(locale, namespace) {
  if (!locales.includes(locale)) locale = defaultLocale;
  return await loadLocaleFrom(locale, namespace);
}

// 生成切换语言后的路径
export function getLocaleSwitchPath(targetLocale, currentSlug) {
  const pathParts = [targetLocale];
  if (currentSlug) pathParts.push(...currentSlug.split('/'));
  return `/${pathParts.join('/')}`;
}

5. 处理根路径重定向 #

在src/pages/index.js中添加重定向，将根路径导向默认语言的首页：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { defaultLocale } from '../i18n';

export default function RootRedirect() {
  const router = useRouter();
  
  useEffect(() => {
    router.push(`/${defaultLocale}`);
  }, [router]);

  return null;
}

export async function getStaticProps() {
  return { props: {} };
}

关键注意事项 #

• 所有静态生成的路径必须以locale作为前缀，确保getStaticProps能正确解析语言标识
• 必须验证locale有效性，避免无效语言路径导致加载错误
• 可保留原i18n.js的翻译文件结构和loadLocaleFrom逻辑，无需完全替换，只需不再依赖next-translate的路由集成

内容的提问来源于stack exchange，提问作者christopher.theagen