Skip to content

Next.js 的国际化

支持多种语言，让你的应用代码变得更简单，而非复杂。

📣 next-intl 课程现已发布！
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>  );}

由以下机构呈现

Crowdin logo

Agile localization for tech companies

自带功能，简洁的 API

国际化（i18n）是用户体验中不可或缺的一环，因此 next-intl 为你提供所有必要组件，以精确处理语言细节。
{  "UserProfile": {    "title": "{firstName}'s profile",    "followers": "{count, plural, ↵                    =0 {No followers yet} ↵                    =1 {One follower} ↵                    other {# followers} ↵                  }"

ICU 消息语法

使用插值、基数和序数复数、基于枚举的标签选择以及富文本来本地化你的消息。

// "Feb 28, 2023"format.dateTime(lastSeen, 'medium'); // "2 hours ago"format.relativeTime(lastSeen); // "$1,499.90"format.number(1499.9, {style: 'currency', currency: 'USD'});

日期、时间、数字及更多

无需担心服务器/客户端如时区的差异，即可应用合适的格式化。

function UserProfile({user}) {  const t = useTranslations('UserProfile');   return (    <section>      <h1>{t(''
title
followers
)}</h1>    </section>  );}

类型安全

通过消息键的自动补全加速开发，利用编译时检查提前捕获拼写错误。

const t = useTranslations('UserProfile'); t('followers', {count: user.followers.length}); // stringt.rich('bio', {b: (chunks) => <b>{chunks}</b>}); // ReactNode const format = useFormatter();const timeZone = useTimeZone();const locale = useLocale();const now = useNow();

基于 Hooks 的 API

学习一个统一的 API，可在代码库中使用，将翻译内容转换为纯字符串或富文本。

$ next build Route            Size       First load JS┌ ● /            1.5 kB     102 kB├ ● /about       2.2 kB     102 kB└ λ /[username]  3.6 kB     104 kB ● (SSG) automatically generated as static HTML + JSON

Next.js 原生与性能至上

支持 App Router、服务器组件、静态渲染——针对不同需求选择合适工具，next-intl 全部兼容。

/en/blog/es/blog/de/blog /en/about-us/es/sobre-nosotros/de/über-uns

国际化路由

为每种语言提供独特路径名，并可选择性地本地化路径名以提升搜索引擎优化。

得到 Next.js 社区信赖

从营销网站到电商门户，再到复杂应用，next-intl 驱动多语言网页体验，确保你的用户和开发者一样满意。
Adidas RunningBigCommerce CatalystBoltBoleroEthereumHashiCorpIcelandairMistralNode.jsQasaSolanaSpeechifySoundtrackTodoistUberUbisoftVintedGoWatershed
Claudio Wunder

Claudio Wunder

OpenJS Foundation 跨项目委员会成员

“我们非常喜欢 next-intl。我们已在 Node.js 网站采用了它与 Next.js 的 App Router 结合使用。在所有为 React 和 Next.js 提供的 i18n 方案中，next-intl 的 API 和设计无疑是我的最爱。”

Node.js →
Cali Castle

Cali Castle

Zolplay 创始人兼 CEO

“我认为 next-intl 应该有一天成为 Next.js 的一等公民，它的设计既出色又简洁易用。”

Zolplay →
Colin Sidoti

Colin Sidoti

Clerk 联合创始人兼 CEO

“与 next-intl 的互操作是我们的设计要求之一。”

Clerk →
Kieran McHugh

Kieran McHugh

Daybridge 创始人兼 CEO

“起初我们担心为应用添加多语言支持会增添过多复杂性，但 next-intl 真的让整个过程顺畅许多。我们得以打造一个为全球数百万人提供亲切体验的日历。”

Daybridge →
Dawid Gaweł

Dawid Gaweł

Todoist 前端工程师

“我们非常重视国际化。我们的网站、应用和资料已翻译成近 20 种语言。非常感谢你们对这个项目的付出！”

Todoist →
Alvar Lagerlöf

Alvar Lagerlöf

Motatos 高级前端开发

“这是一个很棒的工具。我们现在用于我们的 App Router 推广中。”

Motatos →
Jökull Solberg

Jökull Solberg

Trip to Japan CTO

“这个库的工作非常棒，我们今天正式上线了网站。”

Trip to Japan →
Lachlan Campbell

Lachlan Campbell

Watershed 网页设计师兼开发者

“我们在 watershed.com 上使用 next-intl！它完全运行在 App Router 上，使用的是客户端组件版本。”

Watershed →

你也在使用 next-intl 吗？ 告诉我们！

开始使用 next-intl

阅读文档

→Star on GitHub→

文档

 · 

示例

 · 

博客

 ·