Autore:
    Aymeric PINEAU
    Creazione:2026-09-02Ultimo aggiornamento:2026-09-02

    next-intl è obsoleto nel 2026?

    Quando Vercel ha introdotto l'App Router dismettendo l'i18n nativo del Pages Router, next-intl ha prontamente risposto alle esigenze degli sviluppatori. Grazie alla documentazione accurata di Jan Amann e al rapido supporto all'App Router, la libreria è diventata lo standard di riferimento.

    Per quale motivo, allora, interrogarsi oggi sulla sua adeguatezza?

    L'architettura web ha compiuto grandi passi negli ultimi tre anni, mentre l'approccio cardine di next-intl è rimasto sostanzialmente immutato.

    Mentre Next.js si orientava verso React Server Components (RSC), streaming e ottimizzazioni via compilatore, next-intl continua a trattare l'internazionalizzazione come un compito a runtime: distribuisce pesanti oggetti JSON tramite provider client, esegue formattatori ICU nel browser e ricorre alla suddivisione manuale dei namespace per contenere il peso dei bundle.

    Punti chiave

    Velocità di sviluppo rallentata:

    Negli ultimi 12 mesi, next-intl ha contato ~187 commit, concentrati per lo più su allineamenti di compatibilità Next.js e correzioni mirate.

    Costo a runtime per il client:

    L'impiego di NextIntlClientProvider combinato con useTranslations() aggiunge circa 12.8 KB gzipped (51 KB minificati) prima di renderizzare qualsiasi stringa, circa 3 volte quanto richiesto da next-intlayer (4.3 KB).

    Dispersione delle traduzioni pari al 90%:

    Nelle impostazioni consuete, l'89.8% delle traduzioni trasmesse a una pagina appartiene ad altre sezioni. Accedere a /contact significa scaricare anche i testi di /pricing e della dashboard.

    Gestione manuale dei namespace:

    Per evitare bundle sovradimensionati occorre mappare i namespace route per route a mano, aumentando il rischio di discrepanze in produzione.

    Accordo commerciale:

    Come partner ufficiale di Crowdin, il progetto non ha incentivi a integrare uno strumento gratuito di traduzione IA locale nella propria CLI.

    Manutenzione vs. strumenti moderni

    Attività di commit registrata negli ultimi dodici mesi:

    Repository Stelle Commit totali Commit / anno Ultimo commit
    amannn/next-intl stars commits yearly last
    aymericzip/intlayer stars commits yearly last

    Attività negli ultimi 12 mesi:

    • amannn/next-intl: 187 commit (aggiornamenti di dipendenze e piccole correzioni).
    • aymericzip/intlayer: 4.343 commit (sviluppo attivo su compilatori, estensioni IDE, server MCP e motori di traduzione).

    Star History Chart

    Una libreria matura può risultare stabile. Tuttavia, l'i18n frontend si è trasformata: i compilatori escludono i testi superflui in fase di build, i modelli LLM automatizzano le traduzioni in CI e gli ambienti di sviluppo sfruttano Language Server (LSP) e agenti intelligenti. Un'architettura basata sul runtime difficilmente recepisce tali vantaggi.

    Misurazione delle performance in Next.js 16 App Router

    Benchmark su un'applicazione App Router standard composta da 10 route e 10 lingue:

    Caricamento JSON dinamico

    Carica le traduzioni in modalità lazy durante l'esecuzione

    JSON con ambito (namespacing)

    Spazi dei nomi di traduzione per pagina

    Benchmark delle prestazioni I18n

    Cos'è questa metrica?

    La dimensione totale compressa con gzip del bundle della libreria di internazionalizzazione. Include solo il provider e la logica di recupero dei contenuti dopo il tree-shaking e la minificazione.

    Perché è importante?

    Una dimensione della libreria più piccola riduce il payload JavaScript iniziale, portando a tempi di download ed esecuzione più rapidi sul client.

    Visualizza come

    Eseguito in browser reali con compressione gzip da produzione. Dettagli consultabili nel report benchmark Next.js.

    Peso base delle librerie

    Impatto sul client prima dell'aggiunta dei contenuti:

    Libreria Gzipped Minificato
    next-intl@4.9.1 12.8 KB 51.0 KB
    next-intlayer@8.7.12 4.3 KB 13.3 KB

    Peso delle pagine e dispersione dei testi

    Configurazione JS medio / pag (gz) Dispersione lingue Dispersione altre pag Componente medio (gz)
    Base (no i18n) 150.8 KB 0.0% 0.0% 0.7 KB
    next-intl (statico) 163.5 KB 4.2% 89.8% 20.5 KB
    next-intl (dinamico) 163.4 KB 9.7% 89.9% 20.5 KB
    next-intlayer 152.1 KB 0.0% 0.0% 7.2 KB

    Come si genera la dispersione tra pagine

    Nei progetti next-intl tradizionali il layout principale recupera tutti i messaggi congiuntamente:

    app/[locale]/layout.tsx
    export default async function RootLayout({ children, params }) {
  const messages = await getMessages();

  return (
    <html>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

    Inviando messages al provider del client a monte, l'intero vocabolario viene caricato per ciascuna route. Chi visita /login riceve involontariamente anche le traduzioni di FAQ, manuali e area personale.

    È possibile ovviare ripartendo i file JSON in più namespace. Mantenere tale mappatura a mano risulta però tedioso e vulnerabile a dimenticanze.

    Intlayer supera questo limite tramite analisi statica: il compilatore Intlayer pacchettizza solo le voci realmente necessarie per ciascuna route, portando la dispersione tra pagine a 0.0%.

    Perché next-intl impedisce il tree-shaking

    L'API si fonda su chiavi testuali risolte a runtime:

    UserProfile.tsx
    "use client";

import { useTranslations } from "next-intl";

export function UserProfile() {
  const t = useTranslations("UserProfile");

  return <h2>{t("heading")}</h2>;
}
    UserProfile.tsx
    "use client";

import { useIntlayer } from "next-intlayer";

export function UserProfile() {
  const { heading } = useIntlayer("user-profile");

  return <h2>{heading}</h2>;
}

    Turbopack e Webpack non possono rilevare con sicurezza quali chiavi di UserProfile vengano invocate. Per evitare errori, il bundler include l'intero namespace nel chunk del client. Con le proprietà destrutturate di Intlayer, il compilatore traccia con esattezza gli accessi ed esclude le voci non pertinenti. Maggiori informazioni nell'ottimizzazione del bundle.

    Esperienza di sviluppo

    File JSON isolati vs. co-locazione

    Con next-intl, i testi sono conservati in cartelle messages/ lontane dal codice. Intlayer posiziona le definizioni di contenuto a fianco dei rispettivi componenti:

    messages/en.json
    {
  "authModal": {
    "title": "Sign in to your account",
    "submitButton": "Continue"
  }
}
    messages/it.json
    {
  "authModal": {
    "title": "Accedi al tuo account",
    "submitButton": "Continua"
  }
}
    AuthModal.tsx
    import { useTranslations } from "next-intl";

export const AuthModal = () => {
  const t = useTranslations("authModal");
  return (
    <form>
      <h2>{t("title")}</h2>
      <button type="submit">{t("submitButton")}</button>
    </form>
  );
};
    AuthModal.content.ts
    import { t, type Dictionary } from "intlayer";

export default {
  key: "auth-modal",
  content: {
    title: t({
      en: "Sign in to your account",
      it: "Accedi al tuo account",
    }),
    submitButton: t({
      en: "Continue",
      it: "Continua",
    }),
  },
} satisfies Dictionary;
    AuthModal.tsx
    import { useIntlayer } from "next-intlayer";

export const AuthModal = () => {
  const { title, submitButton } = useIntlayer("auth-modal");
  return (
    <form>
      <h2>{title}</h2>
      <button type="submit">{submitButton}</button>
    </form>
  );
};

    Cancellando o rinominando AuthModal.tsx, i contenuti collegati vengono aggiornati o rimossi parallelamente.

    Autocompletamento vs. controlli rigidi sui tipi

    Arricchire IntlMessages in next-intl abilita i suggerimenti del codice sulla base della lingua principale:

    global.d.ts
    import en from "./messages/en.json";

type Messages = typeof en;

declare global {
  interface IntlMessages extends Messages {}
}

    Tuttavia la verifica si limita alla lingua primaria. Se viene rimossa una chiave in it.json, TypeScript non produce segnalazioni e la CI risulterà corretta, mentre gli utenti finali visualizzeranno testi mancanti.

    Intlayer ricava i tipi da ogni file di contenuto. L'attivazione di strictMode blocca la compilazione qualora manchi una traduzione in qualunque lingua configurata.

    Strumenti per sviluppatori e IA

    Caratteristica next-intl Intlayer
    Estensione VS Code ❌ Nessuna ✅ Estensione ufficiale
    Language Server (LSP) ❌ Nessuno ✅ LSP integrato
    Server MCP (per agenti IA) ❌ Nessuno ✅ Server MCP incorporato
    Competenze agente (Skill) ❌ Nessuna ✅ Skill pronte
    CMS Visuale in contesto ❌ Nessuno ✅ Gratuito & Open Source

    LSP e MCP integrati offrono agli assistenti IA una comprensione esaustiva dell'architettura dei contenuti, agevolando completamenti precisi e aggiornamenti rapidi.

    La partnership con Crowdin

    next-intl vanta una collaborazione ufficiale con Crowdin. La presenza di sponsor è positiva per l'ecosistema aperto, ma orienta la direzione del progetto: concepito per integrarsi con TMS esterni, next-intl difficilmente integrerà una funzione di traduzione IA locale gratuita.

    Intlayer include tali funzionalità di base:

    Traduzione automatica locale con IA (intlayer fill):

    Rileva e traduce le chiavi mancanti sfruttando le tue credenziali API (OpenAI, Anthropic, Mistral o Gemini).

    CMS visuale auto-ospitato:

    Usa il CMS Intlayer per consentire modifiche editoriali con salvataggio diretto su Git.

    Licenza open source permissiva:

    L'intero progetto è rilasciato sotto licenza Apache 2.0.

    In quali contesti next-intl rimane una scelta valida?

    Se il sistema fa largo uso di combinazioni di plurali complessi e formattatori articolati, la soluzione ICU di next-intl è affidabile.

    Per le realtà che gestiscono già la traduzione attraverso Crowdin, next-intl si inserisce senza attriti.

    Se l'applicazione attuale risponde ai requisiti e la dimensione del bundle rientra nei limiti prefissati, una migrazione non è indispensabile.

    Come migliorare la mia configurazione next-intl esistente?

    Intlayer fornisce un pacchetto di compatibilità drop-in che replica fedelmente le firme di funzioni e hook di next-intl (come useTranslations, getTranslations e gli helper di routing). Non è necessario riscrivere componenti o pagine per beneficiare delle ottimizzazioni a livello di compilatore.

    L'installazione si completa con un solo comando:

    bash
    npx intlayer init --interactive

    Questa CLI interattiva:

    1. Installa il pacchetto di compatibilità @intlayer/next-intl.
    2. Configura gli alias del bundler affinché le importazioni (next-intl, next-intl/server) puntino direttamente a Intlayer, consentendo di rimuovere la vecchia libreria da package.json.
    3. Attiva immediatamente il supporto del Language Server (LSP), l'eliminazione dei dati ridondanti tra route (tree-shaking completo) e le funzionalità locali di traduzione con IA senza richiedere interventi complessi sul codice.

    Per istruzioni passo dopo passo, consulta le nostre guide dedicate:

    Controlla peso e dispersioni della tua applicazione con l'analizzatore SEO i18n gratuito:

    Approfondimenti

    react-i18next vs react-intl vs Intlayeri18next è obsoleto?

    Commenti

    Ancora nessun commento. Sii il primo a condividere i tuoi pensieri.

    Articoli correlati

    SvelteKit i18n: routing, SSR, and shared state

    SvelteKit ships no i18n. How to wire locale routing with an optional param or the reroute hook, and why a module-level locale store leaks between SSR requests.

    Aymeric PINEAU

    SEO e Internazionalizzazione

    Scopri come ottimizzare il tuo sito web multilingue per i motori di ricerca e migliorare il tuo SEO.

    Aymeric PINEAU

    Migliori strumenti di internazionalizzazione (i18n) per Svelte - Guida completa per tradurre Best Svelte i18n Libraries 2026 — Compared by DX & Bundle

    La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Svelte applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.

    Aymeric PINEAU

    i18n per componente vs. i18n centralizzato: un nuovo approccio con Intlayer

    Un'analisi approfondita delle strategie di internazionalizzazione in React, confrontando gli approcci centralizzato, per-key e per-componente, e presentando Intlayer.

    Aymeric PINEAU

    Ultimi articoli

    i18next è obsoleto nel 2026?

    i18next alimenta milioni di siti web, ma la sua architettura a runtime del 2011 mostra i segni del tempo. Un'analisi su bundle bloat, limiti di tree-shaking e innovazione ferma.

    Aymeric PINEAU

    vue-i18n è obsoleto nel 2026?

    vue-i18n è stato lo standard per Vue e Nuxt per oltre un decennio. Tuttavia, nei nostri benchmark si è dimostrato il runtime i18n più pesante del web. Scopri i dettagli.

    Aymeric PINEAU

    Next.js i18n - what the App Router makes you build

    The App Router dropped built-in i18n routing. What you now write yourself, why Server and Client Components split the problem, and how libraries compare.

    Aymeric PINEAU

    React Router i18n - locale routes that get indexed

    How to add locale-prefixed routes in React Router v7, why the answer differs between framework mode and SPA mode, and how to avoid hydration mismatches.

    Aymeric PINEAU