Magic Translate vs. next-intl

next-intl 是 Next.js 中使用最广泛的 i18n 库。它与应用程序路由器和React服务器组件一起使用，并围绕消息文件构建，每条消息都有密钥。Magic Translate 还会在服务器上呈现完全翻译的页面，但是您可以直接在组件中编写文本，并且翻译是为您创建的。

一目了然

	Magic Translate	next-intl
你如何写文字	你自己的话，包裹在 `<T>` 中	每条消息的密钥，例如 `t('title')`
翻译	AI 翻译，自动创建	你或你的翻译者写的
消息文件	无	每种语言一个 JSON 文件
新语言	将该地区添加到您的列表中	将每条消息翻译成新语言
服务器渲染	React 服务器组件，经过全面翻译的 HTML	React 服务器组件，经过全面翻译的 HTML
本地路由	使用 `[locale]` 区段	内置路由和中间件
价格	免费套餐，然后根据使用量订阅月度套餐	开源且免费

代码有何不同

使用 next-intl，您可以为每种语言保留一个消息文件，并通过其密钥引用每条消息：

// messages/en.json
{ "HomePage": { "title": "Welcome to our website" } }

// app/[locale]/page.tsx
import { getTranslations } from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

使用 Magic Translate 时，文本会留在页面中：

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

Next.js 指南显示了完整的设置。

何时选择 Magic Translate

你希望你的 Next.js 网站在不维护消息文件的情况下使用多种语言。
您的文本经常更改，并且您希望每种语言都保持最新状态。
你没有译员，或者你想在不等待翻译的情况下发布更新。

何时选择 next-intl

所有文本必须由一个人翻译或审阅。
你需要使用 ICU 消息精确控制复数、日期和数字。
你想要一个没有外部服务的免费开源库。

两者都使用

您可以保留 next-intl 作为其区域路由和格式，使用 Magic Translate 作为文本。将语言环境从 next-intl 传递到 createLocalizedT，一次将密钥替换为 <T> 一页。