Intlayerを使ってnext-intlのJSON翻訳を自動化する方法

Intlayerとは？

Intlayerは、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。

next-intlとの具体的な比較については、当社のブログ記事 next-i18next vs. next-intl vs. Intlayerをご覧ください。

なぜIntlayerとnext-intlを組み合わせるのか？

Intlayerは優れた単独のi18nソリューションを提供します（当社のNext.js統合ガイドを参照）が、以下のような理由でnext-intlと組み合わせたい場合があります。

1. 既存のコードベース：すでに確立されたnext-intlの実装があり、Intlayerの改善された開発者体験に徐々に移行したい場合。
2. レガシー要件：プロジェクトが既存のnext-intlプラグインやワークフローとの互換性を必要とする場合。
3. チームの習熟度：チームはnext-intlに慣れているが、より良いコンテンツ管理を望んでいる場合。

そのために、Intlayerはnext-intlのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。

このガイドでは、next-intlとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。

目次

next-intlとIntlayerをセットアップするステップバイステップガイド

1. 1

   依存関係のインストール

   必要なパッケージをインストールします：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npx intlayer-cli init --interactive

   --interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

   このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npm install intlayer @intlayer/sync-json-plugin --save-dev

   パッケージの説明:

   • intlayer: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
   • @intlayer/sync-json-plugin: Intlayerのコンテンツ宣言をnext-intl互換のJSON形式にエクスポートするプラグイン
2. 2

   JSONをラップするためのIntlayerプラグインの実装

   サポートするロケールを定義するためにIntlayerの設定ファイルを作成します:

   next-intl用のJSON辞書もエクスポートしたい場合は、syncJSONプラグインを追加してください:

   intlayer.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "icu",      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,    }),  ],};export default config;

   syncJSON プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。

   JSON を intlayer のコンテンツ宣言ファイル（.content ファイル）と共存させたい場合、Intlayer は以下の手順で処理します：

   plaintext

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   1. JSON とコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。

   2. JSONとコンテンツ宣言ファイルの間に競合がある場合、Intlayerはすべての辞書をマージする処理を行います。これはプラグインの優先度やコンテンツ宣言ファイルの優先度に依存します（すべて設定可能です）。

   CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。

   syncJSONプラグインの詳細については、syncJSONプラグインのドキュメントをご参照ください。

Git設定

自動生成されたIntlayerファイルは無視することを推奨します：

# Intlayerによって生成されたファイルを無視.intlayer

これらのファイルはビルドプロセス中に再生成可能であり、バージョン管理にコミットする必要はありません。

VS Code拡張機能

開発者体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールしてください：

VS Codeマーケットプレイスからインストール