Cara Efficiently Implement i18n dengan Claude Code

多言語dukunganでClaude Codeが活きる場面

国際化（i18n） implementasi 、翻訳file manajemen、ロケールperalihan、日付・angka format、RTLdukungan dll.多岐 わたり.Claude Code これら 作業 一括 pemrosesanし、翻訳漏れ チェックま 行え.

i18nfondasipembangunan Next.js

> Next.js App Router dengan next-intl 使った多言語dukungan konfigurasi.
> 日本語 dan 英語 サポートして。URLパス ロケール 含める形式 dengan 。

direktori構成

src/
 messages/
 ja.json
 en.json
 app/
 [locale]/
 layout.tsx
 page.tsx
 i18n/
 request.ts
 routing.ts

routingpengaturan

// src/i18n/routing.ts
import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  pathnames: {
    '/': '/',
    '/about': {
      ja: '/about',
      en: '/about',
    },
    '/blog': {
      ja: '/blog',
      en: '/blog',
    },
  },
});

// src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
  if (!locale || !routing.locales.includes(locale as 'ja' | 'en')) {
    locale = routing.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

翻訳file

// src/messages/ja.json
{
  "common": {
    "siteName": "マイaplikasi",
    "navigation": {
      "home": "ホーム",
      "about": "gambaran umum",
      "blog": "blog",
      "contact": "お問い合わせ"
    },
    "footer": {
      "copyright": "© {year} マイaplikasi. All rights reserved."
    }
  },
  "home": {
    "hero": {
      "title": "最高 service penyediaanします",
      "subtitle": "{count, plural, =0 {pengguna まだいません} one {# 人 pengguna} other {# 人 pengguna}} pemanfaatan中"
    }
  }
}

// src/messages/en.json
{
  "common": {
    "siteName": "MyApp",
    "navigation": {
      "home": "Home",
      "about": "About",
      "blog": "Blog",
      "contact": "Contact"
    },
    "footer": {
      "copyright": "© {year} MyApp. All rights reserved."
    }
  },
  "home": {
    "hero": {
      "title": "We provide the best service",
      "subtitle": "{count, plural, =0 {No users yet} one {# user} other {# users}} using our service"
    }
  }
}

komponenでのpenggunaan

import { useTranslations } from 'next-intl';

export default function HomePage() {
  const t = useTranslations('home');
  const tc = useTranslations('common');

  return (
    <main>
      <h1>{t('hero.title')}</h1>
      <p>{t('hero.subtitle', { count: 1500 })}</p>

      <nav aria-label={tc('navigation.home')}>
        <a href="/">{tc('navigation.home')}</a>
        <a href="/about">{tc('navigation.about')}</a>
      </nav>
    </main>
  );
}

一括generate 翻訳

Claude Code 翻訳file generate 依頼 bisa dilakukan.

> src/messages/ja.json 元 英語 翻訳file generate.
> 技術用語 そ まま英語 dengan 、UIテキスト 自然な英語.

チェック 翻訳漏れ

> ja.json dan en.json キー 比較して、翻訳漏れ ないかチェックして。
> 不足しているキー あればpenambahanして。

// scripts/check-translations.ts
import ja from '../src/messages/ja.json';
import en from '../src/messages/en.json';

function getKeys(obj: object, prefix = ''): string[] {
  return Object.entries(obj).flatMap(([key, value]) => {
    const path = prefix ? `${prefix}.${key}` : key;
    if (typeof value === 'object' && value !== null) {
      return getKeys(value as object, path);
    }
    return [path];
  });
}

const jaKeys = new Set(getKeys(ja));
const enKeys = new Set(getKeys(en));

const missingInEn = [...jaKeys].filter(k => !enKeys.has(k));
const missingInJa = [...enKeys].filter(k => !jaKeys.has(k));

if (missingInEn.length) {
  console.log('Missing in en.json:', missingInEn);
}
if (missingInJa.length) {
  console.log('Missing in ja.json:', missingInJa);
}

format 日付・angka

import { useFormatter } from 'next-intl';

function PriceDisplay({ amount, date }: { amount: number; date: Date }) {
  const format = useFormatter();

  return (
    <div>
      <p>{format.number(amount, { style: 'currency', currency: 'USD' })}</p>
      <time>{format.dateTime(date, { year: 'numeric', month: 'long', day: 'numeric' })}</time>
      <p>{format.relativeTime(date)}</p>
    </div>
  );
}
// ja: $1,500 / 2026年3月24日 / 2週間前
// en: $1,500 / March 24, 2026 / 2 weeks ago

言語peralihankomponen

'use client';
import { useRouter, usePathname } from 'next/navigation';
import { useLocale } from 'next-intl';

function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();

  const switchLocale = (newLocale: string) => {
    const newPath = pathname.replace(`/${locale}`, `/${newLocale}`);
    router.push(newPath);
  };

  return (
    <div role="radiogroup" aria-label="Language selection">
      <button
        role="radio"
        aria-checked={locale === 'ja'}
        onClick={() => switchLocale('ja')}
        className={locale === 'ja' ? 'font-bold' : ''}
      >
        日本語
      </button>
      <button
        role="radio"
        aria-checked={locale === 'en'}
        onClick={() => switchLocale('en')}
        className={locale === 'en' ? 'font-bold' : ''}
      >
        English
      </button>
    </div>
  );
}

Summary

Dengan Claude Code, i18nfondasi pembangunan dari 翻訳file generate、翻訳漏れ チェックま efisien 進められ.特 翻訳file 一括generate dan 整合性チェック 、Claude Code 強み 発揮さ場面.proyek 多言語dukungan方針 CLAUDE.md 記述 dan 一貫性 保て.Selain ituプロンプトテクニック 使って翻訳 品質 高めるこ dan juga bisa dilakukan.

Untuk detail Claude Code, lihat Dokumentasi Resmi Anthropic.