i18next

国际化翻译

nextjs

由于使用了 server component，目前的库没有很好的兼容到，所以自行兼容，配合 use client 实现 Trans 组件，

特性：

支持了所有的 html element 类型渲染 <Trans.div> 和空标签渲染 <Trans>
浏览器懒加载翻译文件，当语言种切换的时候，判断是否加载了对应的文件，否则进行 fetch 并更新对应的组件
Trans 组件 t prop 支持 ts 推理，保证输入正确性

reference

详细代码：nextjs/src/components/i18n

layout.tsxpublic/locales/zh/common.jsonsome_component.tsx

import I18nProvider from '@/i18n/I18nProvider'
import { getLangAndTranslation } from '@/i18n/helper'

export default async function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode
}>) {
    const [{lang, translation }] = await Promise.all([
        getLangAndTranslation(),
    ])

    return (
        <html
            lang={lang}
            translate="no"
        >
            <body>
                <I18nProvider
                    lng={lang}
                    translation={translation}
                >
                    {children}
                </I18nProvider>
            </body>
        </html>
    )
}

json

{
    "sayHi": "你好",
    "d": {
        "monkey": "蒙奇·D·路飞"
    }
}

tsx

import { Trans } from '@/i18n/Trans'

export function ExperienceBtn() {
    return (
        <Trans.a
            href="http://example.com"
            t="d.monkey"
        ></Trans.a>
        // <a href="http://example.com">蒙奇·D·路飞</a>
    )
}

i18next ​

nextjs ​

i18next

nextjs