useExtracted（实验性功能）

import {useExtracted} from 'next-intl';
 
function InlineMessages() {
  const t = useExtracted();
  return <h1>{t('Look ma, no keys!')}</h1>;
}

{
  "VgH3tb": "Look ma, no keys!"
}

{
  "VgH3tb": ""
}

import {useTranslations} from 'next-intl';
 
function InlineMessages() {
  const t = useTranslations();
  return <h1>{t('VgH3tb')}</h1>;
}

import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
 
const withNextIntl = createNextIntlPlugin({
  experimental: {
    // 启用 useExtracted 的使用
    extract: true,
 
    messages: {
      // 目录的相对路径
      path: './messages',
 
      // 格式为 'json'、'po' 或自定义格式（见下文）
      format: 'json',
 
      // 可填写 'infer'，根据 `path` 中匹配的文件自动检测语言区域，
      // 也可填写明确的语言区域数组
      locales: 'infer',
 
      // 定义哪个语言区域包含规范源字符串
      sourceLocale: 'en'
    },
 
    // 源代码文件的相对路径
    srcPath: './src'
  }
});
 
const config: NextConfig = {};
export default withNextIntl(config);

// 参数插值
t('Hello {name}!', {name: 'Jane'});

// 基数复数形式
t(
  'You have {count, plural, =0 {no followers yet} =1 {one follower} other {# followers}}.',
  {count: 3580}
);

// 序数复数形式
t(
  "It's your {year, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday!",
  {year: 22}
);

// 选择值
t('{gender, select, female {She is} male {He is} other {They are}} online.', {
  gender: 'female'
});

// 富文本
t.rich('Please refer to the <link>guidelines</link>.', {
  link: (chunks) => <Link href="/guidelines">{chunks}</Link>
});

<button onClick={onSlideRight}>
  {t({
    message: 'Right',
    description: 'Advance to the next slide'
  })}
</button>

<button onClick={onSlideRight}>
  {t({
    id: 'carousel.next',
    message: 'Right'
  })}
</button>

function Modal() {
  const t = useExtracted('design-system');
  return (
    <>
      <button>{t('Close')}</button>
      ...
    </>
  );
}

{
  "design-system": {
    "5VpL9Z": "Close"
  }
}

import {getExtracted} from 'next-intl/server';
 
export default async function ProfilePage() {
  const user = await fetchUser();
  const t = await getExtracted();
 
  return (
    <PageLayout title={t('Hello {name}!', {name: user.name})}>
      <UserDetails user={user} />
    </PageLayout>
  );
}

import {expect, it} from 'vitest';
import {NextIntlClientProvider} from 'next-intl';
import {renderToString} from 'react-dom/server';
 
function Component() {
  const t = useExtracted();
  return t('Hello {name}!', {name: 'Jane'});
}
 
it('renders', () => {
  const html = renderToString(
    // 不需要传递任何消息
    <NextIntlClientProvider locale="en" timeZone="UTC">
      <Component />
    </NextIntlClientProvider>
  );
 
  // ✅ 将使用内联消息
  expect(html).toContain('Hello Jane!');
});

import {useExtracted} from 'next-intl';
 
function Example({name}) {
  // ✅ 使 `t` 在此组件中可用
  const t = useExtracted();
 
  // ✅ 支持字符串字面量
  t('Hello there!');
 
  // ✅ 可以使用参数传入动态值
  t('Hello {name}!', {name});
 
  function onClick() {
    // ✅ 支持在事件处理函数中使用
    t('You clicked the button!');
  }
 
  // ✅ 支持在 JSX 中使用
  return <button onClick={onClick}>{t('Click me')}</button>;
}

import {useExtracted} from 'next-intl';
 
function Example({key}) {
  const t = useExtracted();
 
  // ❌ `key` 只有在运行时才可知
  t(key);
 
  // ❌ 将 `t` 传递给另一个函数
  getName(t);
}
 
// ❌ 重新导出该 hook
export const useExtractedExport = useExtracted;
 
async function AsyncExample() {
  // ❌ 将 `t` 传递给 `Promise.all`
  const [t] = await Promise.all([getExtracted()]);
 
  // 注意：`getExtracted` 在内部进行了缓存，即使是
  // 第一次调用通常也耗时不到 1 毫秒。
  // 因此，无需将其并行化。
}

const withNextIntl = createNextIntlPlugin({
  experimental: {
    extract: true,
    messages: {
      path: './messages',
      format: 'json',
      locales: 'infer',
      sourceLocale: 'en'
    },
    srcPath: [
      // 第一方消息
      './src',
 
      // monorepo 中的同级包
      '../ui/src',
 
      // `node_modules` 中已安装的包
      './node_modules/@acme/components'
    ]
  }
});

import {unstable_extractMessages} from 'next-intl/extractor';
 
await unstable_extractMessages({
  srcPath: './src',
  messages: {
    path: './messages',
    format: 'po',
    locales: 'infer',
    sourceLocale: 'en'
  }
});

const withNextIntl = createNextIntlPlugin({
  experimental: {
    // 仅提取第一方消息
    extract: {
      path: './messages'
    },
 
    // 加载时转换第一方消息和外部消息
    // （例如对于 .po 文件）
    messages: {
      path: [
        // 第一方消息
        './messages',
 
        // monorepo 中的同级包
        '../ui/messages',
 
        // `node_modules` 中已安装的包
        './node_modules/@acme/components/messages'
      ],
 
      // 取决于你的偏好
      format: 'po',
      locales: 'infer',
      sourceLocale: 'en'
    },
 
    srcPath: './src'
  }
});

const nextConfig = {
  // ...
  transpilePackages: ['@acme/ui', '@acme/components']
};
 
// ...

const messages = {
  ...(await import(`@acme/ui/messages/${locale}.po`)).default,
  ...(await import(`@acme/components/messages/${locale}.po`)).default,
  ...(await import(`../../messages/${locale}.po`)).default
};
 
// ...