Next.js中output: export与i18n冲突问题解决求助

方案1：用中间件+自定义语言路由替代官方i18n配置（改动较小） #

Next.js官方i18n路由与output: export存在兼容性限制，可保留页面内多语言逻辑，将路由层面的语言处理替换为自定义实现：

• 移除next.config.js中的i18n配置项，添加output: 'export'
• 创建middleware.ts文件，处理语言路由的重定向与匹配：

  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
  
  const SUPPORTED_LANGUAGES = ['en', 'zh', 'es'] // 替换为你的项目支持语言
  const DEFAULT_LANGUAGE = 'en'
  
  export function middleware(request: NextRequest) {
    const pathname = request.nextUrl.pathname
    // 检查路径是否包含语言前缀
    const languageMatch = pathname.match(/^\/([a-z]{2})\/?/)
    if (!languageMatch) {
      // 无语言前缀时重定向到默认语言路径
      return NextResponse.redirect(new URL(`/${DEFAULT_LANGUAGE}${pathname}`, request.url))
    }
    const language = languageMatch[1]
    if (!SUPPORTED_LANGUAGES.includes(language)) {
      // 语言不支持时重定向到默认语言路径
      return NextResponse.redirect(new URL(`/${DEFAULT_LANGUAGE}${pathname.slice(3)}`, request.url))
    }
    return NextResponse.next()
  }
  
  // 配置中间件生效范围
  export const config = {
    matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
  }
  

• 在页面组件中，通过useRouter()或getStaticProps的params获取语言参数，继续使用原有多语言逻辑（如语言包、翻译函数）
• 配置getStaticPaths时，为每个语言生成对应路径：

  export async function getStaticPaths() {
    const languages = ['en', 'zh', 'es']
    const paths = languages.map(lang => ({
      params: { lang, /* 其他动态参数 */ },
    }))
    return { paths, fallback: false }
  }
  

方案2：使用next-i18next的静态导出模式 #

若项目已基于next-i18next实现多语言，可直接使用其静态导出方案，无需依赖官方i18n路由：

• 移除next.config.js中的i18n配置，添加output: 'export'
• 修改next-i18next.config.js配置：

  module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'zh', 'es'],
    },
    localePath: './public/locales',
  }
  

• 保持_app.tsx中appWithTranslation包裹组件的逻辑不变，页面内的多语言调用方式无需修改
• 执行next build && next export，next-i18next会自动生成各语言版本的静态页面

方案3：手动生成多语言静态页面（适合复杂路由场景） #

若上述方案不适用，可通过静态生成逻辑手动覆盖所有多语言页面：

• 移除next.config.js中的i18n配置，添加output: 'export'
• 在页面的getStaticPaths中生成所有语言与动态参数的组合路径：

  export async function getStaticPaths() {
    const languages = ['en', 'zh', 'es']
    const ids = await fetchAllDynamicIds() // 获取页面所有动态参数值
    const paths = languages.flatMap(lang => 
      ids.map(id => ({
        params: { lang, id },
      }))
    )
    return { paths, fallback: false }
  }
  

• 在getStaticProps中根据params.lang获取对应语言的数据与翻译内容：

  export async function getStaticProps({ params }) {
    const { lang, id } = params
    const pageData = await fetchPageData(id, lang)
    const translations = await import(`../locales/${lang}.json`)
    return { props: { pageData, translations } }
  }
  

• 页面组件直接使用传入的翻译数据渲染，保持原有逻辑不变

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