如何将next-i18next迁移至App Router i18n？迁移冲突与价值探讨

• 如果你需要用上Server Components、流式渲染、并行路由/拦截器这些App Router独有的特性，或者想统一用Next.js最新的路由架构，那迁移很有必要。
• 要是当前next-i18next的方案已经跑稳了，项目也没迫切需要App Router的新功能，建议先别动——迁移得适配新的i18n逻辑，可能要花不少时间调bug。

1. 替换依赖与配置 #

先把next-i18next包删掉，然后在next.config.js里配置官方的i18n规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh-CN'],
    defaultLocale: 'en',
    localeDetection: false, // 关掉自动语言检测，避免和自定义路由打架
  },
}

module.exports = nextConfig

2. 适配app/[lang]路由结构 #

Pages Router的next-i18n逻辑没法直接套到App Router上，得改路由结构：

• 根layout.js里可以通过params.lang拿到当前语言，传给子组件；Client Components也能用useLocale()钩子直接获取。
• Server Components里直接根据params.lang导入对应翻译文件就行，比如：

// app/[lang]/page.js（Server Component）
import enTranslations from '@/locales/en.json'
import zhTranslations from '@/locales/zh-CN.json'

export default function HomePage({ params }) {
  const t = params.lang === 'en' ? enTranslations : zhTranslations
  return <h1>{t.home.welcome}</h1>
}

3. 解决常见冲突 #

冲突1：useTranslation()用不了了 #

next-i18next的useTranslation()钩子在App Router里没法直接用，换这两种方式：

• Client Components：自己封装一个基于locale的翻译函数，或者用Next.js官方的createTranslator搭配useTranslations。
• Server Components：直接通过params.lang拿语言，导入对应翻译文件，不用钩子。

冲突2：动态路由[lang]和官方自动locale路由冲突 #

如果既在next.config.js配了i18n，又手动建了app/[lang]目录，会出现路由匹配混乱。二选一：

• 关掉官方自动locale路由（删掉next.config.js里的i18n字段），完全自己写[lang]路由的语言切换逻辑。
• 用官方自动locale路由（URL自动带locale，比如/zh-CN/home），不用手动建app/[lang]目录，Next.js会自动映射路由。

冲突3：语言切换逻辑要改 #

原来用router.push({ pathname: '/', locale: 'zh-CN' })的方式，在App Router里换成这样：

// Client Component里的语言切换按钮
'use client'
import { useRouter } from 'next/navigation'

export function LangSwitcher() {
  const router = useRouter()
  const switchToEn = () => router.push('/en')
  const switchToZh = () => router.push('/zh-CN')
  
  return (
    <div>
      <button onClick={switchToEn}>English</button>
      <button onClick={switchToZh}>中文</button>
    </div>
  )
}

4. 迁移翻译文件 #

把原来public/locales下的翻译JSON文件，移到src/locales目录，结构不用改，直接在组件里导入就行。

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