Next.js 統合

Lingo.dev コンパイラーはNext.jsのApp Routerとシームレスに統合され、Reactコンポーネントを変更することなくビルド時のローカリゼーションを提供します。

以下の手順に従って、Next.jsアプリケーションに多言語サポートを追加しましょう。

または、Next.jsデモプロジェクトを探索して、コンパイラーの動作を試してみてください。

前提条件

Next.js 13+ （App Router使用）
React 18+
Node.js 18以上
devコマンドでturbopackを無効化

ステップ1. パッケージのインストール

lingo.devパッケージをインストールします：

npm install lingo.dev

ステップ2. Next.jsの設定

コンパイラーをnext.config.jsにインポートして設定します：

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 既存のNext.js設定
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b",
  },
})(nextConfig);

ステップ3. 認証の設定

groq.comで無料アカウントを作成し、APIキーを追加します：


# .env.local

GROQ_API_KEY=gsk_...

ステップ4. プロバイダーの追加

ルートレイアウト（app/layout.tsx）にプロバイダーをインポートします：

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

ステップ5. オプション：ロケールスイッチャーの追加

言語切替コンポーネントを作成します：

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <nav>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </nav>
    </header>
  );
}

ステップ6. ビルドとテスト

開発サーバーを起動します：

npm run dev

コンパイラーは自動的に以下を実行します：

翻訳可能なコンテンツについてReactコンポーネントをスキャン
翻訳キーの抽出
AI駆動の翻訳の生成
lingo/ディレクトリに最適化された翻訳ファイルの作成

http://localhost:3000にアクセスして、多言語アプリケーションの動作を確認してください。

設定オプション

コンパイラの動作をカスタマイズできます：

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Next.jsのデフォルト
  lingoDir: "lingo", // 翻訳ファイルディレクトリ
  rsc: true, // React Server Componentsサポートを有効化
  debug: false, // デバッグログを有効化
})(nextConfig);

サーバーコンポーネントとクライアントコンポーネント

Lingo.dev コンパイラはサーバーコンポーネントとクライアントコンポーネントの両方に対応しています：

サーバーコンポーネント

サーバーコンポーネントはビルド時に処理され、完全な翻訳サポートが提供されます：

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

クライアントコンポーネント

クライアントコンポーネントは最適化された翻訳バンドルを受け取ります：

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

本番環境へのデプロイ

アプリケーションをビルドする：
```
npm run build
```

翻訳ファイルをコミットする：

git add lingo/
git commit -m "Add translations"

お好みのプラットフォーム（Vercel、Netlifyなど）を使用してデプロイする

Next.jsアプリは、ユーザー設定またはURLパターンに基づいて、自動的にローカライズされたコンテンツを提供します。