i18n ライブラリなしで React・Next.js アプリを翻訳

React で Lingvit が適している場面

• ✓既存のアプリがあり、すべてのコンポーネントをリファクタリングしたくない場合
• ✓翻訳を数週間ではなく数日で公開したい場合
• ✓技術者でないチームメンバーが翻訳を確認・編集する必要がある場合
• ✓コピーが頻繁に変わり、翻訳更新のたびに再デプロイのサイクルを回したくない場合

深く統合された RTL レイアウト、通貨・数値のロケール書式設定、コンパイル時の型安全な翻訳キーが必要な場合は、フル機能の i18n ライブラリの方が依然として適切です。Lingvit は多言語化を素早く実現するためのものです。

Next.js App Router

Next.js 標準の Script コンポーネントをstrategy="afterInteractive"と組み合わせて使うことで、ハイドレーション後に Lingvit を読み込めます：

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.lingvit.com/widget/v1/widget.bundle.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Lingvit の MutationObserver はハイドレーション後にレンダリングされるコンテンツを検出するため、 動的に読み込まれるコンポーネント、ルート遷移、遅延読み込みされるセクションもすべて翻訳されます。

Vite / Create React App

Vite や CRA のプロジェクトでは、ルートの index.html にスクリプトタグを追加します：

<!-- index.html (Vite / CRA) -->
<body>
  <div id="root"></div>
  <script src="https://cdn.lingvit.com/widget/v1/widget.bundle.js" async></script>
</body>