Next-i18next快速入门：10步搭建多语言Next.js网站

2026-02-05 05:35:57作者：贡沫苏Truman

Next-i18next是为Next.js应用提供国际化(i18n)支持的终极解决方案。作为最便捷的Next.js多语言翻译工具，它让开发者能够轻松创建支持多种语言的网站。在前100字内，我们已经明确提到了这个项目的核心功能——Next.js多语言支持和国际化翻译。

想要快速搭建多语言网站？这篇完整指南将带你通过10个简单步骤实现目标！🚀

🔥 为什么选择next-i18next？

简单易用的多语言解决方案让Next-i18next脱颖而出：

极简配置：只需几个配置文件即可完成设置
生产就绪：完美支持SSG/SSR和代码分割
零依赖负担：基于成熟的i18next生态系统

📋 10步搭建多语言Next.js网站

1️⃣ 项目初始化与环境准备

首先创建Next.js项目并安装必要依赖：

npx create-next-app@latest my-multilingual-app
cd my-multilingual-app
npm install next-i18next react-i18next i18next

2️⃣ 创建翻译文件结构

在public/locales目录下组织你的翻译文件：

public/
└── locales/
    ├── en/
    │   └── common.json
    └── de/
        └── common.json

3️⃣ 配置next-i18next.config.js

创建多语言配置核心文件：

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
}

4️⃣ 集成Next.js配置

修改next.config.js以启用本地化路由：

const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
}

5️⃣ 包装应用组件

使用appWithTranslation包装你的_app.tsx：

import { appWithTranslation } from 'next-i18next'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp)

6️⃣ 服务器端翻译设置

在页面组件中添加serverSideTranslations：

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
  }
}

7️⃣ 在组件中使用翻译

在React组件中轻松使用翻译功能：

import { useTranslation } from 'next-i18next'

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

8️⃣ 组织命名空间

高效管理翻译内容：

使用多个命名空间组织不同模块的翻译
按需加载减少初始包大小

9️⃣ 语言切换功能实现

为用户提供无缝语言切换体验：

import Link from 'next/link'
import { useRouter } from 'next/router'

export const LanguageSwitcher = () => {
  const router = useRouter()
  
  return (
    <div>
      <Link href={router.asPath} locale="en">English</Link>
      <Link href={router.asPath} locale="de">Deutsch</Link>
  )
}