Next.js的国际化(i18n)
功能特点
国际化(i18n)是用户体验的重要组成部分,因此next-intl
为您提供了所有必要的工具,以确保语言细节的准确性。
- 🌟 ICU消息语法:通过插值、基数和序数复数、基于枚举的标签选择和富文本来本地化您的消息。
- 📅 日期、时间和数字:无需担心服务器/客户端差异(如时区),轻松应用适当的格式。
- ✅ 类型安全:通过消息键的自动完成加速开发,并在编译时捕获拼写错误。
- 💡 基于Hook的API:学习一个可在整个代码库中使用的单一API,将翻译转换为纯文本或富文本。
- 🚀 Next.js原生且注重性能:应用路由器、服务器组件、静态渲染——为不同任务选择合适的工具,next-intl在任何场景下都能工作。
- ⚔️ 国际化路由:为每种语言提供独特的路径名,并可选择本地化路径名以优化搜索引擎。
它看起来是什么样的?
// UserProfile.tsx
import {useTranslations} from 'next-intl';
export default function UserProfile({user}) {
const t = useTranslations('UserProfile');
return (
<section>
<h1>{t('title', {firstName: user.firstName})}</h1>
<p>{t('membership', {memberSince: user.memberSince})}</p>
<p>{t('followers', {count: user.numFollowers})}</p>
</section>
);
}
// en.json
{
"UserProfile": {
"title": "{username}的个人资料",
"membership": "成为会员时间:{memberSince, date, short}",
"followers": "{count, plural, ↵
=0 {还没有关注者} ↵
=1 {1位关注者} ↵
other {#位关注者} ↵
}"
}
}