Skip to main content

Next.js アプリに日本語とスペイン語を追加する

Devin が next-i18next をインストールし、ハードコードされた文字列をロケール JSON ファイルに抽出し、日本語とスペイン語の翻訳を追加し、ブラウザでの言語切り替えを検証します。
AuthorCognition
Category機能開発
1

（オプション）Ask Devin でコードベースの範囲を指定する

Next.js アプリの構成や、どのコンポーネントにハードコードされた文字列が含まれているかがわからない場合は、まず Ask Devin を使って調査してください：また、Ask Devin から直接 Devin セッションを開始することもでき、そのセッションでは Ask Devin が取得したすべての情報がコンテキストとして引き継がれます。
2

i18nのセットアップを開始する

Next.js アプリに国際化対応を追加するということは、ロケールルーティングの設定、middleware の構成、ハードコードされたすべての文字列の抽出、翻訳ファイルの作成を、言語切り替えを 1 回テストする前にすべて終わらせる必要があるということです。Devin はこのパイプライン全体を処理します。next-i18next のインストール、Next.js のロケールルーティングの設定、数十個のコンポーネントからの文字列抽出、そしてブラウザでの結果検証まで対応します。セッションの最初に /plan スラッシュコマンドを使って、まず Devin にコードベースを調査させてください。Pages Router か App Router のどちらを使っているかを判別し、適切な i18n ライブラリを特定し、コードを書き始める前に進め方の概要を示させます。計画を確認し、着手前に変更を提案してください。
3

Devin によるセットアップの仕組み

Devin は Next.js のコードベースに対して、i18n パイプラインの構成、文字列の抽出、ロケールファイルの作成を順序立てて処理します。実際の流れは次のとおりです。
  1. 依存関係をインストール — npm install next-i18next i18next react-i18next を実行し、設定ファイルを作成します。
// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'ja'],
  },
};

// next.config.js
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  // ...既存の設定
};
  1. すべてのコンポーネントをスキャン — components/ と pages/ 内の各ファイルを読み取り、JSX 内のハードコードされたテキストや、placeholder・aria-label といった属性、テンプレートリテラル、エラー文字列を検出します
  2. ロケールファイルを構築 — public/locales/ 配下に構造化された JSON を生成します: 
// 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"
  }
}

// public/locales/ja/common.json
{
  "common": {
    "save": "保存",
    "cancel": "キャンセル",
    "loading": "読み込み中..."
  },
  "auth": {
    "login": "ログイン",
    "signup": "アカウント作成",
    "forgotPassword": "パスワードをお忘れですか？"
  },
  "dashboard": {
    "welcome": "おかえりなさい、{{name}}",
    "items_one": "{{count}} 件",
    "items_other": "{{count}} 件"
  }
}

// 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"
  }
}
  1. 文字列をその場で置き換え — 各コンポーネントを useTranslation('common') でラップし、ハードコードされたテキストを t() 呼び出しに置き換えます。t('dashboard.welcome', { name: user.name }) のような動的値の補間にも対応します。
  2. サーバーサイドでの読み込みを設定 — 各ページに serverSideTranslations を追加し、レンダリング時点で翻訳が利用できるようにします: 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  1. 言語スイッチャーを追加します — Next.js の router のロケール切り替え機能を利用するドロップダウンをナビゲーションバーに追加します:
// 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 (
    <select
      value={router.locale}
      onChange={(e) => switchLocale(e.target.value)}
    >
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="ja">日本語</option>
    </select>
  );
}
4

テストと反復的な改善

Devin は npm run dev を実行し、組み込みブラウザ でアプリを開き、/en、/es、/ja の各ルートを行き来してすべてが正しく動作することを確認します。欠落している翻訳、レイアウトのはみ出し、404 になるルートなど、何か問題があれば Devin が修正し、自動的に再テストします。任意のタイミングで /test スラッシュコマンドを使うと、Devin にすべてのテストを再実行させ、ブラウザで再検証させることができます。最終的な PR の前に /review を使うと、Devin が自分のコードをレビューし、翻訳漏れの文字列、キー名の不整合、serverSideTranslations 呼び出しの抜けなどをチェックします。Devin は次を確認します:
  • すべての表示テキストが翻訳されていること（スペイン語/日本語モードで英語の文字列が残っていないこと）
  • スペイン語の長い文字列や日本語の幅の広い文字でもレイアウトが崩れないこと
  • 言語スイッチャーで 3 つのロケールをすべて切り替えられること
  • 差し込まれる値（ユーザー名、件数など）が各ロケールで正しくレンダリングされること
  • 複数形ルールが機能していること（例: “1 item” → 日本語では “1 件”、スペイン語では “1 elemento”）
  • Next.js のロケールルーティングが機能していること — /ja/dashboard で日本語版が表示されること
5

ここから反復を開始する

ベースとなる i18n のセットアップが完了したら、次のステップで機能を拡張します。
6

リポジトリ設定を更新する

このタスクでは、新しい依存関係（next-i18next、i18next、react-i18next）をインストールします。PR がマージされたら、今後のセッションで Devin の環境スナップショットにこれらのパッケージが含まれるように、リポジトリ設定 を更新してください。
  1. Settings > Devin’s Environment > Repositories に移動します
  2. 対象のリポジトリを選択し、Configure をクリックします
  3. Upkeep > Maintain dependencies で、インストールコマンド（例: npm ci）が設定されていることを確認します
  4. Save をクリックしてスナップショットを更新します
また、Upkeep Frequency を設定して、Devin が依存関係のインストールをスケジュールに従って自動的に再実行するようにすることもできます。これにより、package.json の変更に合わせてスナップショットを最新の状態に保てるため、将来のセッションで起動時にパッケージのインストールに時間を無駄にせずに済みます。
7

Devin Review で PR をレビューする

Devin が PR を作成したら、Devin Review を使って i18n の変更をレビューします。Devin Review は、見落とされたハードコードされた文字列、一貫性のない翻訳キー名、各ページで抜けている serverSideTranslations 呼び出しなどを検出できます。