Skip to content
文档环境核心库

核心库

虽然 next-intl 主要用于 Next.js 应用，但其核心是无框架依赖的，可以独立使用——无论是在 React 应用还是任何其他 JavaScript 环境中。

React 应用

next-intl 内部使用了一个叫做 use-intl 的库。这个核心库包含了你在 next-intl 中熟悉的大部分功能，但缺少以下 Next.js 特有的功能：

  1. 路由 API
  2. 用于服务器动作、元数据和路由处理的可等待 API (/docs/environments/actions-metadata-route-handlers)
  3. 与 i18n/request.ts 配合的 服务器组件集成

如果服务器组件在 Next.js 之外的 React 应用中得到普及，未来服务器组件的支持可能会迁移到核心库中。

相比之下，use-intl 包含了处理普通 React 应用国际化所必需的所有 API：

这使得你可以在其他环境中使用与 next-intl 相同的 API：

  1. React 应用 (示例)
  2. React Native
  3. 测试环境如 Jest (示例)
  4. Storybook

基本用法：

import {IntlProvider, useTranslations} from 'use-intl';
 
// 你可以从任何地方获取消息，也可以在组件内部获取消息，
// 然后在拿到消息后再渲染该 Provider 和你的应用。
const messages = {
  App: {
    hello: 'Hello {username}!'
  }
};
 
function Root() {
  return (
    <IntlProvider messages={messages} locale="en">
      <App user={{name: 'Jane'}} />
    </IntlProvider>
  );
}
 
function App({user}) {
  const t = useTranslations('App');
  return <h1>{t('hello', {username: user.name})}</h1>;
}
我可以构建在 Next.js 和纯 React 应用中都能工作的共享组件吗？

可以，支持在这两种环境中渲染的共享组件。

在这种情况下，建议对相关组件从 next-intl 中导入，这样如果你在 Next.js 中渲染它们，就可以利用 服务器组件集成。在其他环境中，导入 next-intl 也能正常工作，但需要保证存在 IntlProvider。

非 React 应用

除了特定于 React 的 API，use-intl 还导出了两个低级函数，可以在任何 JavaScript 环境中使用：

  1. createTranslator 用于翻译消息
  2. createFormatter 用于格式化数字、日期和时间以及列表

这些 API 直接接收所有相关配置，不依赖全局配置。

你可以这样使用这些 API：

import {createTranslator, createFormatter} from 'use-intl/core';
 
const messages = {
  basic: 'Hello {name}!',
  rich: 'Hello <b>{name}</b>!'
};
 
// 创建与 `useTranslations` 返回的函数相同的函数。
// 由于没有 provider，你可以直接传入通常传递给 provider 的所有属性。
const t = createTranslator({locale: 'en', messages});
 
// 结果: "Hello world!"
t('basic', {name: 'world'});
 
// 若要生成 HTML 标记，可以考虑使用 `markup` 函数，
// 它与 `t.rich` 不同，返回的是标记字符串。
t.markup('rich', {
  name: 'world',
  b: (chunks) => `<b>${chunks}</b>`
});
 
// 创建与 `useFormatter` 返回的对象相同的对象。
const format = createFormatter({locale: 'en'});
 
// 结果: "Oct 17, 2022"
format.dateTime(new Date(2022, 9, 17), {dateStyle: 'medium'});
测试运行时要求

文档

 · 

示例

 · 

博客

 ·