Skip to main content

Aggiungi giapponese e spagnolo a un'app Next.js

Devin installa next-i18next, estrae le stringhe hardcoded in file JSON di localizzazione, aggiunge le traduzioni in giapponese e spagnolo e verifica il cambio di lingua nel browser.
AuthorCognition
CategorySviluppo di funzionalità
1

(Opzionale) Imposta lo scope della codebase con Ask Devin

Se non sei sicuro di com’è strutturata la tua app Next.js o quali componenti contengono stringhe scritte direttamente nel codice (hardcoded), usa Ask Devin per analizzarla preliminarmente:Puoi anche avviare una sessione Devin direttamente da Ask Devin, e userà tutto ciò che ha appreso come contesto.
2

Avvia la configurazione dell'i18n

Aggiungere l’internazionalizzazione a un’app Next.js significa configurare il routing per le lingue, impostare il middleware, estrarre ogni stringa hardcoded e creare i file di traduzione — tutto questo prima ancora di poter testare anche solo un cambio di lingua. Devin gestisce l’intera pipeline: installa next-i18next, configura il routing delle lingue di Next.js, estrae le stringhe da decine di componenti e verifica il risultato nel browser.Usa il comando slash /plan all’inizio della sessione così che Devin analizzi prima la tua codebase — capirà se stai usando il Pages Router o l’App Router, identificherà la libreria i18n corretta e descriverà il proprio approccio prima di scrivere qualsiasi codice. Rivedi il piano e suggerisci modifiche prima che inizi.
3

Come Devin gestisce la fase di configurazione

Devin lavora all’interno della tua codebase Next.js in modo metodico — configurando la pipeline i18n, estraendo le stringhe e creando i file di localizzazione. Ecco come funziona:
  1. Installa le dipendenze — esegue npm install next-i18next i18next react-i18next e crea i file di configurazione:
// 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,
  // ...la tua configurazione esistente
};
  1. Scansiona ogni componente — Legge ogni file in components/ e pages/, identificando il testo hardcoded in JSX, attributi come placeholder e aria-label, template literals e stringhe di errore
  2. Genera i file di localizzazione — Crea JSON strutturati in 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. Sostituisce le stringhe in-place — Avvolge ogni componente con useTranslation('common') e sostituisce il testo hardcoded con chiamate a t(), gestendo l’interpolazione per valori dinamici come t('dashboard.welcome', { name: user.name })
  2. Configura il caricamento lato server — Aggiunge serverSideTranslations a ogni pagina, così che le traduzioni siano disponibili al momento del rendering: 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  1. Aggiunge il selettore della lingua — Crea un menu a discesa nella barra di navigazione che utilizza il cambio di lingua del router di 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

Testa e itera

Devin esegue npm run dev, apre l’app nel suo browser integrato e naviga tra le route /en, /es e /ja per verificare che tutto funzioni. Se qualcosa non funziona — una traduzione mancante, un layout che va oltre i bordi, una route che restituisce un 404 — Devin lo corregge e riesegue i test automaticamente.Usa in qualsiasi momento il comando slash /test per dire a Devin di rieseguire tutti i test e ricontrollare nel browser. Usa /review prima della PR (pull request) finale per fare in modo che Devin revisioni il proprio codice alla ricerca di stringhe mancanti, nomi di chiavi incoerenti o chiamate serverSideTranslations mancanti.Devin verifica:
  • Tutto il testo visibile è tradotto (nessuna stringa in inglese rimanente in modalità spagnolo/giapponese)
  • I layout non si rompono con stringhe spagnole più lunghe o caratteri giapponesi più larghi
  • Il selettore della lingua consente di passare tra tutte e tre le lingue/locali
  • I valori interpolati (nomi utente, conteggi) vengono visualizzati correttamente in ogni locale
  • Le regole di pluralizzazione funzionano (ad es. “1 item” → “1 件” in giapponese, “1 elemento” in spagnolo)
  • Il routing basato sulla locale di Next.js funziona — /ja/dashboard mostra la versione giapponese
5

Continua da qui

Una volta che la configurazione di base di i18n è pronta, procedi per estenderla.
6

Aggiorna la configurazione del tuo repository

Questo task installa nuove dipendenze (next-i18next, i18next, react-i18next). Dopo il merge della PR, aggiorna la configurazione del repo in modo che lo snapshot dell’ambiente di Devin includa questi pacchetti per le sessioni future:
  1. Vai a Settings > Devin’s Environment > Repositories
  2. Seleziona il tuo repo e fai clic su Configure
  3. In Upkeep > Maintain dependencies, assicurati che il comando di installazione (ad esempio npm ci) sia configurato
  4. Fai clic su Save per aggiornare lo snapshot
Puoi anche impostare una Upkeep Frequency in modo che Devin riesegua automaticamente l’installazione delle dipendenze secondo una pianificazione: in questo modo lo snapshot rimane aggiornato man mano che il tuo package.json evolve, e le sessioni future non perdono tempo a installare pacchetti all’avvio.
7

Esamina la PR con Devin Review

Una volta che Devin ha aperto la PR, usa Devin Review per esaminare le modifiche relative all’i18n. Devin Review può individuare stringhe hardcoded non rilevate, nomi di chiavi di traduzione incoerenti e chiamate a serverSideTranslations mancanti tra le varie pagine.