i18n ライブラリなしで React・Next.js アプリを翻訳
react-i18next、next-intl、Lingui をセットアップするには、すべての文字列をラップし、ルートを 再構築し、翻訳ファイルを維持する必要があります。Lingvit はそのすべてを省略します — スクリプト1つ、 コンポーネントの変更なし、ビルド時の文字列も不要です。
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.bundle.js?v=1"
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.bundle.js?v=1" async></script>
</body>関連ガイド
アプリを作り直さずに多言語化
React アプリ1つに対しスクリプト1つ、手頃な月額プラン付き。