Skip to main content

Ajouter le japonais et l'espagnol à une application Next.js

Devin installe next-i18next, extrait les chaînes codées en dur vers des fichiers JSON de locale, ajoute les traductions en japonais et en espagnol, et vérifie le basculement de langue dans le navigateur.
AuthorCognition
CategoryDéveloppement de fonctionnalités
1

(Facultatif) Définir la portée de la base de code avec Ask Devin

Si vous ne savez pas comment votre application Next.js est structurée ou quels composants contiennent des chaînes codées en dur, utilisez Ask Devin pour commencer par analyser la situation :Vous pouvez aussi démarrer une session Devin directement depuis Ask Devin, et tout ce qu’il aura appris sera conservé dans le contexte.
2

Démarrer la configuration de l’i18n

L’ajout de l’internationalisation à une app Next.js implique de configurer le routage par locale, de paramétrer le middleware, d’extraire chaque chaîne codée en dur et de créer des fichiers de traduction — tout cela avant même de pouvoir tester un simple changement de langue. Devin prend en charge l’ensemble du pipeline : installation de next-i18next, configuration du routage par locale dans Next.js, extraction des chaînes depuis des dizaines de composants et vérification du résultat dans le navigateur.Utilise la commande slash /plan au début de la session pour que Devin analyse d’abord ta base de code — il déterminera si tu utilises le Pages Router ou l’App Router, identifiera la bonne bibliothèque i18n et décrira son approche avant d’écrire la moindre ligne de code. Passe le plan en revue et suggère des modifications avant qu’il ne commence.
3

Comment Devin gère la mise en place

Devin parcourt méthodiquement le code de votre projet Next.js : il configure le pipeline i18n, extrait les chaînes et crée les fichiers de langue. Voici à quoi cela ressemble :
  1. Installe les dépendances — Exécute npm install next-i18next i18next react-i18next et crée les fichiers de configuration :
// 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,
  // ...votre configuration existante
};
  1. Analyse chaque composant — Lit chaque fichier dans components/ et pages/, en identifiant le texte en dur dans le JSX, les attributs comme placeholder et aria-label, les template literals et les messages d’erreur
  2. Construit les fichiers de langue — Crée des fichiers JSON structurés sous public/locales/ : 
// public/locales/fr/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. Remplace les chaînes directement dans le code — Encapsule chaque composant avec useTranslation('common') et remplace le texte en dur par des appels à t(), en gérant l’interpolation pour les valeurs dynamiques comme t('dashboard.welcome', { name: user.name })
  2. Met en place le chargement côté serveur — Ajoute serverSideTranslations à chaque page pour que les traductions soient disponibles au moment du rendu : 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  1. Ajoute le sélecteur de langue — Crée un menu déroulant dans la barre de navigation qui utilise la fonction de changement de langue (locale) du routeur 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

Testez et itérez

Devin exécute npm run dev, ouvre l’app dans son navigateur intégré et navigue entre les routes /en, /es et /ja pour vérifier que tout fonctionne. Si quelque chose ne va pas — une traduction manquante, une mise en page qui déborde, une route qui renvoie une 404 — Devin le corrige et refait les tests automatiquement.Utilisez la commande slash /test à tout moment pour demander à Devin de relancer tous les tests et de revérifier dans le navigateur. Utilisez /review avant la PR finale pour demander à Devin de relire son propre code afin de repérer les chaînes manquantes, les noms de clés incohérents ou les appels serverSideTranslations manquants.Devin vérifie :
  • Tout le texte visible est traduit (aucune chaîne en anglais restante en mode espagnol/japonais)
  • Les mises en page ne se cassent pas avec des chaînes espagnoles plus longues ou des caractères japonais plus larges
  • Le sélecteur de langue bascule entre les trois locales
  • Les valeurs interpolées (noms d’utilisateur, nombres) s’affichent correctement dans chaque langue
  • Les règles de pluralisation fonctionnent (par ex. : “1 item” → “1 件” en japonais, “1 elemento” en espagnol)
  • Le routage Next.js par locale fonctionne — /ja/dashboard affiche la version japonaise
5

Continuer l’itération à partir d’ici

Une fois la configuration i18n de base en place, poursuivez pour l’étendre.
6

Mettre à jour la configuration de votre dépôt

Cette tâche installe de nouvelles dépendances (next-i18next, i18next, react-i18next). Après la fusion de la pull request (PR), mettez à jour la configuration de votre dépôt afin que l’instantané d’environnement de Devin contienne ces packages pour les futures sessions :
  1. Allez dans Settings > Devin’s Environment > Repositories
  2. Sélectionnez votre dépôt et cliquez sur Configure
  3. Sous Upkeep > Maintain dependencies, vérifiez que votre commande d’installation (par exemple, npm ci) est définie
  4. Cliquez sur Save pour mettre à jour l’instantané
Vous pouvez également définir une Upkeep Frequency pour que Devin réexécute automatiquement l’installation des dépendances selon une programmation ; cela permet de garder l’instantané à jour au fur et à mesure que votre package.json évolue, afin que les futures sessions ne perdent pas de temps à installer les dépendances au démarrage.
7

Passez en revue la PR avec Devin Review

Une fois que Devin a ouvert la PR, utilisez Devin Review pour examiner les modifications i18n. Devin Review peut détecter les chaînes codées en dur oubliées, les incohérences dans le nommage des clés de traduction et les appels serverSideTranslations manquants sur l’ensemble des pages.