next-intl から Intlayer への移行

完全で詳細なステップバイステップチュートリアルについては、next-intl 移行ガイドを参照してください。

next-intl から Intlayer への移行により、アプリケーションのルーティングとシンタックスを完全に変更せずに維持できます。

やること

リポジトリで次のコマンドを実行します:

npx intlayer init

これにより intlayer.config.ts が作成されます。next.config.ts で、プラグインラッパーを使用して next-intl のエイリアスを @intlayer/next-intl にシームレスに注入します。

import type { NextConfig } from "next";import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";const withIntlayer = createNextIntlPlugin();const nextConfig: NextConfig = {};export default withIntlayer(nextConfig);

内部的な動作

bundlerラッパーは翻訳を置き換えますが、next-intl/navigationの機能は損なわれません（例：Link、redirect、usePathname）。

内部的には：

• ICU runtime: 複数形（=0、one、other）、select/selectordinal、#引数、フォーマット済み引数（{ts, date, long}）は、共有のresolveMessage(..., 'icu')リゾルバーを使用して正しく実行されます。
• useTranslations() & getTranslations(): ベアスコープの呼び出しは、最初のキーセグメントを正しい辞書識別子として抽出します。ネストされた名前空間は、辞書パスとプレフィックスに適切に分割されます。
• Rich formatting: t.rich()とt.markup()の両方が完全にネイティブに実装され、HTML風のノードをレンダリングされたReactチャンクに変換します。
• useFormatter: relativeTime、list、dateTimeRange、および設定からの名前付きフォーマットが、コアのネイティブなIntlフォーマッターにブリッジされます。