Magic Translate vs. next-intl

next-intl は Next.js で最も広く使われている i18n ライブラリだ。App RouterとReact Serverコンポーネントで動作し、メッセージファイルごとにキーが割り当てられたものを中心に構築されている。Magic Translate は、完全に翻訳されたページもサーバー上でレンダリングする。ただし、コンポーネントにテキストを直接書き込むと、翻訳が自動的に作成される。

一目で

コードの違い

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 に渡し、キーを 1 ページずつ <T> に置き換える。

試す準備はできた？入門ガイドに従って、最初のコンポーネントを5分で翻訳する。