开源项目next-i18next安装与使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00023/article/details/141049812

开源项目next-i18next安装与使用指南

next-i18next项目地址:https://gitcode.com/gh_mirrors/nex/next-i18next

目录结构及介绍

当你克隆或下载next-i18next库到本地时,你会看到以下主要目录和文件:

1. `examples` 目录

这个目录包含了几个示例应用程序来演示如何在不同的场景下使用next-i18next.

子目录说明:

basic: 最基础的国际化示例.
with-redux: 展示了next-i18next如何与Redux结合使用的示例.
with-middleware: 使用中间件管理翻译内容的例子.
更多子目录可能取决于库的最新版本,它们提供了一个全面的示例以展示next-i18next的用途.

2. `src` 目录

src 目录存放next-i18next的核心代码,如果你对内部实现感兴趣可以在此查看.

3. 其他重要文件

.gitignore: Git忽略文件规则,用于排除不需要上传至Git仓库的内容.
README.md: 项目的读我文件,提供了关于next-i18next的详细描述和基本使用方法.
LICENSE: 指明了next-i18next采用的许可协议(MIT).
package.json: 包含了项目依赖和其他元数据,用于NPM包管理和构建系统.
yarn.lock: 确保依赖项被锁定在一个具体版本上以便复现性.

启动文件介绍

尽管next-i18next自身作为一个库没有特定的“主”文件来运行,但为了使用它你需要在你的Next.js应用中引入并设置一些关键的部分.

_app.js 或者 _app.tsx

这是Next.js中的一个特殊组件,用来包裹所有的页面,通常在这里添加next-i18next的高阶组件(HOC) appWithTranslation.

例如:

import { appWithTranslation } from 'next-i18next';

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

export default appWithTranslation(MyApp);

这将确保所有页面都有访问语言环境的能力.

服务器端渲染或静态生成相关函数

比如在 pages/index.js 的getStaticProps或者getServerSideProps中,你需要加入serverSideTranslations函数来预先加载页面对应的翻译.

例如:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

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

通过这种方式,next-i18next可以在首次请求时预加载所需的翻译字符串,避免了客户端的额外网络请求.

配置文件介绍

你可以创建自己的配置文件next-i18next.config.js,其中包含了next-i18next的所有配置选项.默认情况下该文件应该位于根目录下,但是可以通过环境变量I18NEXT_DEFAULT_CONFIG_PATH自定义其位置.

配置文件的基本结构如下:

module.exports = {
    i18n: {
        defaultLocale: 'zh',   // 默认语言
        locales: ['zh', 'en'], // 支持的语言列表
    },
    localePath: './public/locales',
    ns: ['common'],
};

这里的关键点是: