手動でのセットアップを省略したい場合は、このページのリンクを Devin のセッションに貼り付けて、すべてのセットアップを依頼してください。 Next.js アプリの構成や、どのコンポーネントにハードコードされた文字列が含まれているかがわからない場合は、まず [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) を使って調査してください： ```txt Scope the i18n work theme={null} Help me understand the scope of adding i18n to our Next.js app: 1. Are we using the Pages Router or App Router? 2. How many components and pages have hardcoded English strings? 3. Do we already have any i18n setup or locale files? 4. Which shared components (buttons, forms, modals) contain text? 5. Are there any strings that should stay in English (brand names, API codes)? ``` また、Ask Devin から直接 Devin セッションを開始することもでき、そのセッションでは Ask Devin が取得したすべての情報がコンテキストとして引き継がれます。 Next.js アプリに国際化対応を追加するということは、ロケールルーティングの設定、middleware の構成、ハードコードされたすべての文字列の抽出、翻訳ファイルの作成を、言語切り替えを 1 回テストする前にすべて終わらせる必要があるということです。Devin はこのパイプライン全体を処理します。`next-i18next` のインストール、Next.js のロケールルーティングの設定、数十個のコンポーネントからの文字列抽出、そしてブラウザでの結果検証まで対応します。 ```txt Add Japanese and Spanish to our Next.js app theme={null} next-i18next を使って、私たちの Next.js アプリに日本語とスペイン語を含む国際化対応を追加してください。 - next-i18next、i18next、react-i18next をインストールする - next-i18next.config.js を、defaultLocale "en" と locales ["en", "es", "ja"] で設定する - next.config.js を更新し、i18n の設定を含める - components/ と pages/ をスキャンして、ハードコードされた英語の文字列をすべて探す（JSX テキスト、placeholder 属性、aria-label、エラーメッセージ、ツールチップ） - public/locales/{en,es,ja}/common.json 配下に構造化されたロケールファイルを作成し、名前空間付きキー（例: common.save, auth.loginButton, errors.notFound）を使う - すべてのハードコードされた文字列を、useTranslation('common') を使った t() 呼び出しに置き換える - すべてのページの getStaticProps / getServerSideProps に serverSideTranslations を追加する - next/router の locale switching を使って、components/Navbar.tsx に言語切り替え用ドロップダウンを追加する - スペイン語と日本語には一旦プレースホルダー翻訳を使う — 後でプロフェッショナルな翻訳に差し替える - アプリを実行し、3 つの言語すべてを切り替えて、何も壊れていないことを確認する ## Testing & verification - 開発サーバーを起動し、/en、/es、/ja の各ルートを切り替える - すべてのページで、翻訳されずに残っている英語の文字列がないか確認する - 言語切り替えスイッチが正しくトグルすることを確認する - 補間された値（名前、件数）が各ロケールで正しく表示されることをテストする - スペイン語の長めの文字列や、日本語の幅の広い文字でレイアウトが崩れないか確認する - 何か壊れている場合 — 翻訳抜け、レイアウトのはみ出し、ルーティングエラーなどがあれば — 修正して再テストする。3 つすべての言語が、すべてのページで正しく表示されるまで繰り返す。 - すべてがエンドツーエンドで動作するまで PR を作成しないこと ``` セッションの最初に **`/plan`** スラッシュコマンドを使って、まず Devin にコードベースを調査させてください。Pages Router か App Router のどちらを使っているかを判別し、適切な i18n ライブラリを特定し、コードを書き始める前に進め方の概要を示させます。計画を確認し、着手前に変更を提案してください。 Devin は Next.js のコードベースに対して、i18n パイプラインの構成、文字列の抽出、ロケールファイルの作成を順序立てて処理します。実際の流れは次のとおりです。 1. **依存関係をインストール** — `npm install next-i18next i18next react-i18next` を実行し、設定ファイルを作成します。 ```js theme={null} // next-i18next.config.js module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'es', 'ja'], }, }; ``` ```js theme={null} // next.config.js const { i18n } = require('./next-i18next.config'); module.exports = { i18n, // ...既存の設定 }; ``` 2. **すべてのコンポーネントをスキャン** — `components/` と `pages/` 内の各ファイルを読み取り、JSX 内のハードコードされたテキストや、`placeholder`・`aria-label` といった属性、テンプレートリテラル、エラー文字列を検出します 3. **ロケールファイルを構築** — `public/locales/` 配下に構造化された JSON を生成します: ```json theme={null} // public/locales/en/common.json { "common": { "save": "Save", "cancel": "Cancel", "loading": "Loading..." }, "auth": { "login": "Log in", "signup": "Create account", "forgotPassword": "Forgot your password?" }, "dashboard": { "welcome": "Welcome back, {{name}}", "items_one": "{{count}} item", "items_other": "{{count}} items" } } ``` ```json theme={null} // public/locales/ja/common.json { "common": { "save": "保存", "cancel": "キャンセル", "loading": "読み込み中..." }, "auth": { "login": "ログイン", "signup": "アカウント作成", "forgotPassword": "パスワードをお忘れですか？" }, "dashboard": { "welcome": "おかえりなさい、{{name}}", "items_one": "{{count}} 件", "items_other": "{{count}} 件" } } ``` ```json theme={null} // public/locales/es/common.json { "common": { "save": "Guardar", "cancel": "Cancelar", "loading": "Cargando..." }, "auth": { "login": "Iniciar sesión", "signup": "Crear cuenta", "forgotPassword": "¿Olvidaste tu contraseña?" }, "dashboard": { "welcome": "Bienvenido de nuevo, {{name}}", "items_one": "{{count}} elemento", "items_other": "{{count}} elementos" } } ``` 4. **文字列をその場で置き換え** — 各コンポーネントを `useTranslation('common')` でラップし、ハードコードされたテキストを `t()` 呼び出しに置き換えます。`t('dashboard.welcome', { name: user.name })` のような動的値の補間にも対応します。 5. **サーバーサイドでの読み込みを設定** — 各ページに `serverSideTranslations` を追加し、レンダリング時点で翻訳が利用できるようにします: ```tsx theme={null} // pages/dashboard.tsx import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; export const getStaticProps = async ({ locale }) => ({ props: { ...(await serverSideTranslations(locale, ['common'])), }, }); ``` 6. **言語スイッチャーを追加します** — Next.js の router のロケール切り替え機能を利用するドロップダウンをナビゲーションバーに追加します: ```tsx theme={null} // components/LanguageSwitcher.tsx import { useRouter } from 'next/router'; export default function LanguageSwitcher() { const router = useRouter(); const switchLocale = (locale: string) => { router.push(router.pathname, router.asPath, { locale }); }; return ( ); } ``` Devin は `npm run dev` を実行し、[組み込みブラウザ](/ja/work-with-devin/devin-session-tools) でアプリを開き、`/en`、`/es`、`/ja` の各ルートを行き来してすべてが正しく動作することを確認します。欠落している翻訳、レイアウトのはみ出し、404 になるルートなど、何か問題があれば Devin が修正し、自動的に再テストします。任意のタイミングで **`/test`** スラッシュコマンドを使うと、Devin にすべてのテストを再実行させ、ブラウザで再検証させることができます。最終的な PR の前に **`/review`** を使うと、Devin が自分のコードをレビューし、翻訳漏れの文字列、キー名の不整合、`serverSideTranslations` 呼び出しの抜けなどをチェックします。 Devin は次を確認します: * すべての表示テキストが翻訳されていること (スペイン語/日本語モードで英語の文字列が残っていないこと) * スペイン語の長い文字列や日本語の幅の広い文字でもレイアウトが崩れないこと * 言語スイッチャーで 3 つのロケールをすべて切り替えられること * 差し込まれる値 (ユーザー名、件数など) が各ロケールで正しくレンダリングされること * 複数形ルールが機能していること (例: "1 item" → 日本語では "1 件"、スペイン語では "1 elemento") * Next.js のロケールルーティングが機能していること — `/ja/dashboard` で日本語版が表示されることベースとなる i18n のセットアップが完了したら、次のステップで機能を拡張します。 ```txt プロフェッショナルな翻訳に差し替える theme={null} プレースホルダーのスペイン語および日本語訳を、ベンダー提供のこれらのプロフェッショナルな翻訳に置き換えてください。 [翻訳済みの JSON ファイルを添付してください。] public/locales/en/common.json にあるすべてのキーがカバーされており、 es および ja のファイルにプレースホルダーが残っていないことを確認してください。 ``` ```txt 4 つ目のロケールとして韓国語を追加する theme={null} 新しいロケールとして韓国語 (ko) を追加してください。next-i18next.config.js を更新して locales 配列に "ko" を追加し、public/locales/ko/common.json をプレースホルダーの翻訳付きで作成し、LanguageSwitcher にそのオプションを追加したうえで、 /ko ルートがブラウザで正しく動作することを検証してください。 ``` ```txt ページごとの namespace に翻訳を分割する theme={null} common.json が大きくなってきています。以下の個別 namespace ファイルに分割してください: public/locales/{en,es,ja}/auth.json、dashboard.json、settings.json。各ページの serverSideTranslations 呼び出しを更新し、必要な namespace のみを読み込むようにしてください。 ``` このタスクでは、新しい依存関係 (`next-i18next`、`i18next`、`react-i18next`) をインストールします。PR がマージされたら、今後のセッションで Devin の環境スナップショットにこれらのパッケージが含まれるように、[環境設定](/ja/onboard-devin/environment) を更新してください。 1. [**Settings > Devin's Environment > Repositories**](https://app.devin.ai/settings/machine?utm_source=docs\&utm_medium=use-case-gallery) に移動します 2. 対象のリポジトリを選択し、**Configure** をクリックします 3. **Upkeep > Maintain dependencies** で、インストールコマンド (例: `npm ci`) が設定されていることを確認します 4. **Save** をクリックしてスナップショットを更新しますまた、**Upkeep Frequency** を設定して、Devin が依存関係のインストールをスケジュールに従って自動的に再実行するようにすることもできます。これにより、`package.json` の変更に合わせてスナップショットを最新の状態に保てるため、将来のセッションで起動時にパッケージのインストールに時間を無駄にせずに済みます。 Devin が PR を作成したら、[Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) を使って i18n の変更をレビューします。Devin Review は、見落とされたハードコードされた文字列、一貫性のない翻訳キー名、各ページで抜けている `serverSideTranslations` 呼び出しなどを検出できます。

{title}