Skip to main content

Agregar japonés y español a una app de Next.js

Devin instala next-i18next, extrae cadenas codificadas directamente a archivos JSON de locales, añade traducciones en japonés y español, y verifica el cambio de idioma en el navegador.
AuthorCognition
CategoryDesarrollo de funcionalidades
1

(Opcional) Delimita el alcance de la base de código con Ask Devin

Si no tienes claro cómo está estructurada tu app de Next.js o qué componentes contienen cadenas hardcodeadas, usa Ask Devin para investigarlo primero:También puedes iniciar una sesión de Devin directamente desde Ask Devin, y se conservará todo lo que haya aprendido como contexto.
2

Inicia la configuración de i18n

Agregar internacionalización a una app de Next.js implica configurar el enrutamiento por idioma/locales, definir el middleware, extraer cada cadena codificada de forma estática y crear archivos de traducción, todo antes de poder probar un solo cambio de idioma. Devin se encarga de todo el pipeline: instalar next-i18next, configurar el enrutamiento de locales de Next.js, extraer cadenas de docenas de componentes y verificar el resultado en el navegador.Usa el comando slash /plan al inicio de la sesión para que Devin analice primero tu codebase: determinará si estás usando el Pages Router o el App Router, identificará la librería de i18n adecuada y esbozará su enfoque antes de escribir cualquier código. Revisa el plan y sugiere cambios antes de que empiece.
3

Cómo gestiona Devin el proceso de configuración

Devin trabaja de forma metódica en tu base de código de Next.js: configura el pipeline de i18n, extrae cadenas y crea archivos de locales. Así es como funciona:
  1. Instala dependencias — Ejecuta npm install next-i18next i18next react-i18next y crea los archivos de configuración:
// 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,
  // ...tu configuración existente
};
  1. Analiza cada componente — Lee cada archivo en components/ y pages/, identificando texto incrustado (hardcoded) en JSX, atributos como placeholder y aria-label, literales de plantilla y cadenas de error
  2. Genera archivos de idioma — Crea JSON estructurado en public/locales/: 
// 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. Reemplaza las cadenas directamente — Envuelve cada componente con useTranslation('common') y sustituye el texto hardcodeado por llamadas a t(), gestionando la interpolación para valores dinámicos como t('dashboard.welcome', { name: user.name })
  2. Configura la carga del lado del servidor — Añade serverSideTranslations a cada página para que las traducciones estén disponibles en el momento del renderizado: 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  1. Agrega el selector de idioma — Crea un menú desplegable en la barra de navegación que usa la conmutación de locale del router de Next.js:
// 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

Prueba e itera

Devin ejecuta npm run dev, abre la app en su navegador integrado y navega entre las rutas /en, /es y /ja para verificar que todo funcione. Si algo falla — una traducción faltante, un diseño que se desborda, una ruta que arroja un 404 — Devin lo corrige y vuelve a hacer las pruebas automáticamente.Usa el comando slash /test en cualquier momento para decirle a Devin que vuelva a ejecutar todas las pruebas y vuelva a verificar en el navegador. Usa /review antes de la PR final (pull request) para que Devin revise su propio código en busca de cadenas omitidas, nombres de claves inconsistentes o llamadas faltantes a serverSideTranslations.Devin verifica:
  • Todo el texto visible está traducido (no quedan cadenas en inglés en el modo español/japonés)
  • Los diseños no se rompen con cadenas más largas en español o caracteres japoneses más anchos
  • El selector de idioma permite alternar entre los tres locales
  • Los valores interpolados (nombres de usuario, cantidades) se muestran correctamente en cada locale
  • Las reglas de pluralización funcionan (por ejemplo, “1 item” → “1 件” en japonés, “1 elemento” en español)
  • El enrutamiento de locales de Next.js funciona — /ja/dashboard muestra la versión en japonés
5

Iterar a partir de aquí

Una vez que la configuración base de i18n esté lista, continúa ampliándola.
6

Actualiza la configuración de tu repositorio

Esta tarea instala nuevas dependencias (next-i18next, i18next, react-i18next). Después de que se haga merge del PR, actualiza la configuración de tu repo para que la instantánea del entorno de Devin incluya estos paquetes en futuras sesiones:
  1. Ve a Settings > Devin’s Environment > Repositories
  2. Selecciona tu repo y haz clic en Configure
  3. En Upkeep > Maintain dependencies, asegúrate de que tu comando de instalación (por ejemplo, npm ci) esté configurado
  4. Haz clic en Save para actualizar la instantánea
También puedes configurar una Upkeep Frequency para que Devin vuelva a ejecutar automáticamente la instalación de dependencias de forma periódica: esto mantiene la instantánea actualizada a medida que tu package.json evoluciona, de modo que las futuras sesiones no pierdan tiempo instalando paquetes al inicio.
7

Revisa la PR con Devin Review

Una vez que Devin abra el PR, utiliza Devin Review para revisar los cambios de i18n. Devin Review puede detectar cadenas codificadas de forma fija que se hayan pasado por alto, nombres incoherentes de claves de traducción y llamadas que falten a serverSideTranslations en las distintas páginas.