next-intl

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 {#位关注者} ↵
                  }"
  }
}

→ 阅读文档

<div align="center"> <a href="https://next-intl-docs.vercel.app/redirect?href=https://crowdin.com" target="_blank"> <img width="350" src="https://yellow-cdn.veclightyear.com/835a84d5/dab32b13-99e9-4393-add8-6c30da3ddf13.svg" alt="Crowdin标志"> </a> <br> <p>托管于<a href="https://vercel.com?utm_source=next-intl&utm_campaign=oss">Vercel</a></p> </div>