nextjs + lingui网站国际化(i18n)方案

大体上，国际化有几个工作要做：

1、开发人员输出项目中需要翻译的网站词汇表（.po文件）；

2、翻译人员翻译.po文件，翻译后，每个国家会对应一份已翻译文件；

3、开发人员将已翻译文件"放回"项目；

前几年，像我们这种以研发为主的小团队搞起来成本还挺高，导出和维护翻译文件这些不难，主要成本在翻译文件部分，我们试过：

找人翻译，一份大概100-200元左右，又贵，效率还跟不上我们的迭代速度；
机器翻译，google翻译不支持传.po文件，只能一句句的翻译，没人愿意做；
在线的文档翻译网站，用过trados，翻译效果一般，一些短语也够用，后来找到一个用AI（我猜是chatGPT）做文档翻译的网站OfficeTranslator，对一些上下文联系的语句翻译比较好，后面介绍。

好，进入正题。

1、导出.po文件

主要工具

Next.js，负责识别当前用哪种locale，支持不同locale页面切换和跳转；
lingui，负责维护.po文件，包括导出.po文件，使用翻译后的.po文件；

Next.j设置

arduino 复制代码

// next.config.js
const config = {
 i18n: {
      locales: [ "en_US", "zh_CN", "ja_JP"],
      defaultLocale: "en_US",
  },
 .......
}

完成配置Next.js文档传送门。我们使用sub-path方式，这样配置之后，同一页面会对应几个path：

/zh_cn/blog
/ja_JP/blog
/blog

代码里面，可以感知locale：

javascript 复制代码

// 通过locale字段，获取当前用户的locale
import { useRouter } from 'next/router'
...
const { locale, pathname } = useRouter()

完成配置Next.js文档传送门。

切换不同语言：

javascript 复制代码

// 想要切换locale的时候，在router.push函数中设置参数即可
import { useRouter } from 'next/router'
...
const { push } = useRouter()
push('/blog', null, { locale: 'ja_JP' }) // 对应的会push到 '/ja_JP/blog' 路径，也是blog页面
 ......
// 另外，Link也是支持传入locale的
import Link from 'next/link'
<Link
   href="/blog"
   locale="ja_JP"
>
</Link>

完成配置Next.js文档传送门。

lingui设置

css 复制代码

// lingui.config.js
module.exports = {
 locales: [ "en_US", "zh_CN", "ja_JP"],
 catalogs: [
    {
 path: "<rootDir>/src/locales/{locale}/messages",
 include: ["src"],
    },
  ],
 format: "po", // formatter({style: "raw"})
};

lingui主要是配合locale，显示字符的目标语言，包括提取字符和替换locale目标字符，主要2个命令：

extract：将代码中，txxx或者xxx，包含的xxx部分提取出来，最后导出到.po文件
compile：将翻译后的.po文件编译成.js文件，之后txxx中的xxx就会根据不同的locale显示对应的语言

lingui文档传送门。代码中使用：

javascript 复制代码

import { t, Trans } from '@lingui/macro' 
...
<p>{t`为什么使用`}</p>
<Trans>免费试用</Trans>
...

然后跑一下extract命令，就会生成每种语言对应的.po文件，注意，此时的.po文件是没有翻译的，比如/locales/ja_JP/message.po文件:

swift 复制代码

msgid ""
msgstr ""
"POT-Creation-Date: 2023-08-23 20:05+0800\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"

...

msgid "为什么使用"
msgstr ""

msgid "免费试用"
msgstr ""

接下来就需要翻译.po文件，把msgstr填好。翻译好之后跑compile命令就完事了，所以怎么翻译呢？往下看。

2、重头戏，翻译.po文件

如前面所说，我们小团队没有专职的语言大师，搞了很久，试了很多方法，也只磨磨蹭蹭的搞了英语和日语，后来找到下面这个网站，一分钱没花做了十几个国家的多语言（目前是一分钱没花），哈哈哈，感恩哦，比心。

网站地址OfficeTranslator

把上面生成的.po文件去网站上传翻译就行了，看网站介绍，目前1000字符以内文档是免费翻译的，对一般网站也足够了。

将翻译后的.po文件，下载下来替换对应的.po文件就可以了，比如翻译日语，就把/locales/ja_JP/messages.po传上去，翻译完成后，把翻译后的文件替换到到/locales/ja_JP/messages.po就行了，每个国家做一次。！！！实名+强烈建议网站增加一个批量上传po文件的功能！！！，我翻译了下面这些国家：

捷克语

日语

其余十几种语言就发了，反正我用的挺爽，配合上面的开发工具，效率很高，效率高了之后，就可以摸鱼了，哈哈哈哈。

-------------------分割线战斗结束 ----------------------

战斗已结束，战斗人员请撤退，拉拉队准备，下面是友情硬推，哈哈哈哈，和大家安利下这个做文档翻译的网站。能免费翻译1000？还是2000字？忘了，反正我平时够用，偶尔几篇大文件论文也就几美金，还行。

看介绍，这个网站用的AI翻译，可能是ChatGPT，我猜。。。不然还有谁。。。，我翻译了一份pdf文档，对比机器翻译是好一些：

AI翻译的效果是好很多，文档翻译我对比过几个软件（后续我会写个文档翻译的测评，我的原则是做了就写，哈哈哈），大多数软件都把开头的"Abstract"一词翻译成"抽象的"，只有OfficeTranslator翻译成"摘要"，其他还有很多细节要优秀一些，可能这就是AI联系上下文的能力吧。关注我，后续出个详细对比。结束，下班。

上面这篇文章的完整翻译预览，感兴趣的同学自取。

文档翻译OfficeTranslator，就这。