如何在next.config.mjs且无_app.js的Next.js项目中使用next-i18next？

问题1：next.config.mjs无法导入CommonJS格式的next-i18next.config.js #

你的next-i18next.config.js是CommonJS导出格式，而next.config.mjs是ES模块，直接导入会报错，有两种简单处理方式：

方式1：将配置文件改为ES模块格式 #

把next-i18next.config.js重命名为next-i18next.config.mjs，修改导出语法：

/** @type {import('next-i18next').UserConfig} */
export default {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },
}

之后在next.config.mjs中直接导入：

import nextI18NextConfig from './next-i18next.config.mjs'

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: nextI18NextConfig.i18n,
  // 其他Next.js配置项
}

export default nextConfig

方式2：直接合并配置到next.config.mjs #

如果觉得单独维护配置文件麻烦，直接把i18n配置写进next.config.mjs：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },
  // 其他Next.js配置项
}

export default nextConfig

问题2：App Router下无_app.js，无法使用appWithTranslation #

你用的是Next.js App Router（基于app目录），appWithTranslation是Pages Router（pages目录）的用法，App Router有专门的配置方式：

步骤1：创建i18n初始化文件（比如app/i18n.mjs） #

import { createInstance } from 'i18next'
import { initReactI18next } from 'react-i18next'
import resourcesToBackend from 'i18next-resources-to-backend'
import { i18n as nextI18nConfig } from '../next.config.mjs'

const initI18next = async (lng) => {
  const i18nInstance = createInstance()
  await i18nInstance
    .use(initReactI18next)
    .use(resourcesToBackend((language, namespace) => import(`../public/locales/${language}/${namespace}.json`)))
    .init({
      lng,
      fallbackLng: nextI18nConfig.defaultLocale,
      supportedLngs: nextI18nConfig.locales,
      defaultNS: 'common',
      ns: ['common'],
      interpolation: { escapeValue: false },
    })
  return i18nInstance
}

export default initI18next

步骤2：创建客户端翻译提供者（app/providers.tsx） #

'use client'

import { useState, useEffect } from 'react'
import { I18nextProvider } from 'react-i18next'
import initI18next from './i18n.mjs'
import { useParams } from 'next/navigation'

export default function I18nProvider({ children }) {
  const params = useParams()
  const lng = params?.lng || 'en'
  const [i18n, setI18n] = useState(null)

  useEffect(() => {
    initI18next(lng).then(setI18n)
  }, [lng])

  if (!i18n) return null

  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
}

步骤3：在根layout中引入提供者 #

import I18nProvider from './providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <I18nProvider>{children}</I18nProvider>
      </body>
    </html>
  )
}

步骤4：在客户端组件中使用翻译 #

'use client'

import { useTranslation } from 'react-i18next'

export default function Home() {
  const { t } = useTranslation('common')
  return <h1>{t('welcome')}</h1>
}

替代方案：嫌next-i18next繁琐？试试这些 #

方案1：Next.js内置国际化 #

Next.js自带i18n支持，无需额外依赖，配置后直接通过useParams获取语言、加载翻译文件：

// next.config.mjs
const nextConfig = {
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
  },
}

组件中使用：

'use client'

import { useParams } from 'next/navigation'
import { useState, useEffect } from 'react'

export default function Home() {
  const params = useParams()
  const lng = params?.lng || 'en'
  const [translations, setTranslations] = useState({})

  useEffect(() => {
    import(`../public/locales/${lng}/common.json`).then(res => setTranslations(res.default))
  }, [lng])

  return <h1>{translations.welcome}</h1>
}

方案2：直接使用react-i18next #

跳过next-i18next，直接用react-i18next，配置更灵活，适合App Router场景：

1. 安装依赖：npm install react-i18next i18next i18next-http-backend
2. 参照前面的初始化、提供者步骤配置，轻量化且自由度更高。

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