Como implementar i18n eficientemente con Claude Code

Donde Claude Code brilla en la internacionalizacion

La implementacion de la internacionalizacion (i18n) abarca multiples areas: gestion de archivos de traduccion, cambio de locale, formato de fechas y numeros, soporte RTL, etc. Claude Code puede procesar todas estas tareas de una vez e incluso verificar traducciones faltantes.

Construccion de la base i18n en Next.js

> Configura la internacionalizacion con next-intl en Next.js App Router.
> Soporta japones e ingles. Con formato de locale en la ruta URL.

Estructura de directorios

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

Configuracion de enrutamiento

// 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,
  };
});

Archivos de traduccion

// src/messages/ja.json
{
  "common": {
    "siteName": "Mi App",
    "navigation": {
      "home": "Inicio",
      "about": "Acerca de",
      "blog": "Blog",
      "contact": "Contacto"
    },
    "footer": {
      "copyright": "(c) {year} Mi App. Todos los derechos reservados."
    }
  },
  "home": {
    "hero": {
      "title": "Ofrecemos el mejor servicio",
      "subtitle": "{count, plural, =0 {Aun no hay usuarios} one {# usuario} other {# usuarios}} en uso"
    }
  }
}

// src/messages/en.json
{
  "common": {
    "siteName": "MyApp",
    "navigation": {
      "home": "Home",
      "about": "About",
      "blog": "Blog",
      "contact": "Contact"
    },
    "footer": {
      "copyright": "(c) {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"
    }
  }
}

Uso en componentes

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>
  );
}

Generacion masiva de traducciones

Puede solicitar a Claude Code la generacion de archivos de traduccion.

> Genera un archivo de traduccion en ingles basado en src/messages/ja.json.
> Los terminos tecnicos se mantienen en ingles, los textos de UI se traducen a ingles natural.

Verificacion de traducciones faltantes

> Compara las claves de ja.json y en.json y verifica si hay traducciones faltantes.
> Si hay claves faltantes, agregarlas.

// 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('Faltantes en en.json:', missingInEn);
}
if (missingInJa.length) {
  console.log('Faltantes en ja.json:', missingInJa);
}

Formato de fechas y numeros

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>
  );
}
// es: $1.500 / 24 de marzo de 2026 / hace 2 semanas
// en: $1,500 / March 24, 2026 / 2 weeks ago

Componente de cambio de idioma

'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="Seleccion de idioma">
      <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>
  );
}

Resumen

Con Claude Code, puede avanzar eficientemente desde la construccion de la base i18n hasta la generacion de archivos de traduccion y la verificacion de traducciones faltantes. La generacion masiva de archivos de traduccion y la verificacion de consistencia son areas donde las fortalezas de Claude Code se destacan. Documente las directrices de internacionalizacion del proyecto en CLAUDE.md para mantener la consistencia. Tambien puede usar tecnicas de prompts para mejorar la calidad de las traducciones.

Para mas detalles sobre Claude Code, consulte la documentacion oficial de Anthropic.