Next.js

next-intl または i1n SDK を直接使用して、Next.js に i1n を統合します。

セットアップ

Next.jsプロジェクトでi1n initを実行します。CLIは、next-intlが存在する場合にそれを自動検出し、locales/ディレクトリにネストされたJSON形式を設定します。

i1nはApp RouterとPages Routerの両方で動作します。i1n SDKはスタンドアロンモードで使用することも、ブリッジモードを介してnext-intlに接続することも可能です。

スタンドアロンモード

i1n から init と t をインポートし、翻訳リソースをロードして、コンポーネントで直接 t() を使用します。自動生成される i1n.d.ts ファイルは、完全な型安全性と IDE オートコンプリートを提供します。

このアプローチはnext-intlを完全に置き換えます。init()を使用してリソースをロードし、setLocale()を使用して言語を切り替えます。追加のi18nライブラリは必要ありません。

next-intl を使用したブリッジモード

プロジェクトで既にnext-intlを使用している場合は、registerI1n((key, params) => nextIntlT(key, params)) の1行でi1nに接続できます。これにより、既存のnext-intl設定を維持しながら、i1nの型安全なオートコンプリート機能を追加できます。

i1nは翻訳ファイル、AI翻訳、型生成を管理します。next-intlは引き続きランタイムローディング、サーバーコンポーネント、ルーティングを処理します。両システムのメリットを移行コストゼロで享受できます。

デプロイメント

デプロイ前に常に翻訳が同期されていることを確認するために、ビルドステップまたはCI/CDパイプラインにi1n pullを追加してください。

Next.js の静的生成 (SSG) およびサーバーサイドレンダリング (SSR) は、i1n 管理の翻訳ファイルとシームレスに連携します。

app/[locale]/page.tsx

import { t } from 'i1n'

export default function HomePage() {
  return (
    <main>
      <h1>{t('home.title')}</h1>
      <p>{t('home.subtitle')}</p>
    </main>
  )
}

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'

const t = useTranslations()
registerI1n((key, params) => t(key, params))

Next.js

セットアップ

スタンドアロンモード

next-intl を使用したブリッジモード

デプロイメント

関連

ダッシュボード

ブリッジモード