Next.js 国际化(next-intl)指南

Next.js 国际化(next-intl)指南

next-intl Internationalization (i18n) for Next.js that gets out of your way. 🌐 项目地址: https://gitcode.com/gh_mirrors/ne/next-intl

1. 目录结构及介绍

Next.js 的国际化插件 next-intl 提供了一套高效的解决方案来处理多语言应用。尽管具体的项目可能根据开发者的需求有所不同，一个基于 next-intl 的标准项目可能会有以下典型的目录结构：

my-next-app/
├── public/                 # 静态资源存放处，如图片等，不包含翻译文件
├── pages/                  # 页面组件存放地，每个页面可以使用 next-intl 提供的功能进行国际化的消息渲染
│   └── index.tsx
├── locales/                # 翻译文件夹，存储不同语言的json文件
│   ├── en.json
│   └── zh-CN.json
├── components/             # 共享组件，可能包含使用了国际化功能的组件
│   └── UserProfile.tsx
├── utils/                  # 可能包括用于加载翻译文件或处理国际化逻辑的工具函数
│   └── localization.js
└── next.config.js          # Next.js 配置文件，用于设置 next-intl 或其他配置选项

2. 项目的启动文件介绍

在 next-intl 模式下，通常不需要直接修改特定的“启动文件”，因为Next.js使用其内部脚本自动处理启动流程。但关键在于你的入口点通常是 pages/_app.js（如果存在）或者直接是 pages/index.js 及其他页面。若要全局启用国际化，你可能需要在 _app.js 中包裹应用程序以使用国际化上下文。

示例的 _app.js 可能如下：

// pages/_app.js
import { appWithTranslation } from 'next-i18next'
import { NextAppProps } from 'next/app'

function MyApp({ Component, pageProps }: NextAppProps) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

3. 项目的配置文件介绍

next.config.js

在 next-intl 使用中，Next.js的配置文件next.config.js极为重要，因为它允许你设置国际化的基本配置，比如指定支持的语言和默认语言。

示例配置：

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'zh-CN'],
    defaultLocale: 'en-US',
  },
};

locales 文件夹下的 JSON 文件

每个JSON文件代表一种语言的翻译集。例如，locales/en.json和locales/zh-CN.json分别存放英文和简体中文的翻译字符串。

en.json 示例

{
  "greeting": "Hello World!",
  "navigation": {
    "home": "Home",
    "about": "About Us"
  }
}

使用翻译

在组件中，通过引入useTranslations hook来访问这些翻译项。

// 在组件内
import { useTranslations } from 'next-intl';

function Greeting() {
  const t = useTranslations('common');
  return <p>{t('greeting')}</p>;
}

确保按照项目需求适当调整上述路径和代码，以满足实际开发环境的要求。

next-intl Internationalization (i18n) for Next.js that gets out of your way. 🌐 项目地址: https://gitcode.com/gh_mirrors/ne/next-intl