背景

• 需要实现一个不同地区用户访问时返回的页面为当地语言的，而且需要是在服务端渲染的，以达到更好的 SEO
• 同时由于路由已使用地区代码来区分不同的地区

开始

安装

yarn add next-i18next react-i18next i18next

翻译内容

.
└── public
    └── locales
        ├── en
        |   └── common.json
        └── de
            └── common.json

内容参考：next-i18next/examples/simple at master · i18next/next-i18next (opens new window)

只要按照以上目录结构存放翻译配置，能自动读取

项目设置

next-i18next.config.js

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
}

next.config.js

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

module.exports = {
  i18n,
}

翻译函数

appWithTranslation

在项目根目录创建 pages/_app.tsx 文件

import { appWithTranslation } from 'next-i18next'

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

export default appWithTranslation(MyApp)

serverSideTranslations

useTranslation

参考

• i18next/next-i18next: The easiest way to translate your NextJs apps. (opens new window)