Autor:
    Aymeric PINEAU
    Creación:2026-09-02Última actualización:2026-09-02

    ¿Está next-intl obsoleto en 2026?

    Cuando Vercel introdujo App Router y descontinuó la i18n integrada de Pages Router, next-intl cubrió el vacío rápidamente. Jan Amann ofreció una documentación clara y un soporte ágil para App Router, consolidándolo como la solución estándar de la comunidad.

    ¿Por qué plantearse entonces si muestra síntomas de obsolescencia?

    La arquitectura web ha evolucionado sustancialmente en los últimos tres años, pero la base operativa de next-intl apenas ha cambiado.

    Mientras Next.js se orientó hacia los React Server Components (RSC), el streaming y las optimizaciones de compilador, next-intl sigue gestionando la internacionalización en el navegador: enviando grandes estructuras JSON mediante proveedores cliente, ejecutando formateadores ICU en el navegador y dependiendo de la división manual de namespaces para frenar el crecimiento del bundle.

    Puntos clave

    Ritmo de desarrollo contenido:

    Durante los últimos 12 meses, next-intl registró ~187 commits, centrados mayormente en compatibilidad con Next.js y resolución de errores puntuales.

    Sobrecarga del cliente en tiempo de ejecución:

    Montar NextIntlClientProvider junto con useTranslations() añade ~12.8 KB gzipped (51 KB minificados) antes de imprimir una sola palabra, casi el triple que next-intlayer (4.3 KB).

    Fuga de textos del 90%:

    En configuraciones convencionales, el 89.8% del volumen de traducción descargado en una página corresponde a otras pantallas. Acceder a /contact implica descargar el contenido de /pricing y /dashboard.

    Mantenimiento manual de namespaces:

    Para evitar bundles inflados es imprescindible segmentar los namespaces ruta por ruta manualmente, elevando el riesgo de errores en producción.

    Acuerdo comercial:

    Al ser partner oficial de Crowdin, la biblioteca tiene pocos incentivos para incorporar un comando de traducción local y gratuita por IA en la CLI.

    Mantenimiento frente a herramientas actuales

    Actividad de commits durante el último año:

    Repositorio Estrellas Commits totales Commits / año Último commit
    amannn/next-intl stars commits yearly last
    aymericzip/intlayer stars commits yearly last

    Historial de los últimos 12 meses:

    • amannn/next-intl: 187 commits (actualizaciones de dependencias y pequeñas correcciones).
    • aymericzip/intlayer: 4.343 commits (desarrollo continuado en compiladores, extensiones de IDE, servidores MCP y motores de traducción).

    Star History Chart

    Una librería específica puede ser estable. No obstante, las prácticas de i18n han progresado: los compiladores descartan textos no referenciados al construir el paquete, los LLM traducen en los pipelines de CI y los editores se coordinan con Language Servers (LSP) y agentes inteligentes. Un modelo centrado en el cliente encuentra dificultades para asumir estas mejoras.

    Rendimiento en Next.js 16 App Router

    Evaluación comparativa sobre una aplicación App Router estándar con 10 rutas y 10 idiomas:

    Carga JSON dinámica

    Carga traducciones en tiempo de ejecución

    JSON con alcance (namespacing)

    Espacios de nombres de traduction por página

    Benchmark de Rendimiento I18n

    ¿Qué es esta métrica?

    El tamaño total comprimido en gzip del paquete de la biblioteca de internacionalización. Solo incluye el proveedor y la lógica de recuperación de contenido después del tree-shaking y la minificación.

    ¿Por qué es importante?

    Un tamaño de biblioteca más pequeño reduce la carga útil inicial de JavaScript, lo que acelera el tiempo de descarga y ejecución en el cliente.

    Ver como

    Medido en navegadores reales bajo compresión gzip de producción. Datos completos en el informe del benchmark Next.js.

    Peso esencial de la librería

    Carga del cliente previa a incorporar cualquier texto:

    Librería Gzipped Minificado
    next-intl@4.9.1 12.8 KB 51.0 KB
    next-intlayer@8.7.12 4.3 KB 13.3 KB

    Peso por página y dispersión de datos

    Configuración JS medio / pág (gz) Fuga idiomas Fuga otras págs Componente medio (gz)
    Base (sin i18n) 150.8 KB 0.0% 0.0% 0.7 KB
    next-intl (estático) 163.5 KB 4.2% 89.8% 20.5 KB
    next-intl (dinámico) 163.4 KB 9.7% 89.9% 20.5 KB
    next-intlayer 152.1 KB 0.0% 0.0% 7.2 KB

    Causa de las fugas entre rutas

    En los proyectos típicos con next-intl, el layout principal carga todos los mensajes de golpe:

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

    Al suministrar messages en el provider raíz, el navegador descarga la totalidad del catálogo en cada página. Un usuario en /login termina descargando secciones de ayuda, guías y paneles internos.

    Esto puede solventarse fraccionando archivos JSON y cargándolos según la ruta. Sin embargo, configurar y mantener esas listas a mano es una tarea tediosa y fuente recurrente de errores.

    Intlayer soluciona esto con análisis estático: el compilador de Intlayer incluye únicamente los textos referenciados en cada ruta, reduciendo la fuga entre páginas al 0.0%.

    Por qué next-intl no admite tree-shaking

    Su API se apoya en resoluciones dinámicas mediante cadenas de texto en 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 y Webpack no pueden comprobar qué claves de UserProfile se ejecutan realmente. Para prevenir fallos de claves ausentes, el empaquetador se ve obligado a enviar todo el namespace al bundle del cliente. Gracias a las propiedades desestructuradas de Intlayer, el compilador rastrea los accesos reales y purga las propiedades superfluas. Consulta optimización de bundle para conocer más.

    Experiencia del desarrollador

    Archivos JSON aislados frente a co-ubicación

    Con next-intl, las cadenas residen en ficheros JSON dentro de una carpeta externa messages/. Intlayer agrupa las declaraciones de contenido junto a sus componentes:

    messages/en.json
    {
  "authModal": {
    "title": "Sign in to your account",
    "submitButton": "Continue"
  }
}
    messages/es.json
    {
  "authModal": {
    "title": "Inicia sesión en tu cuenta",
    "submitButton": "Continuar"
  }
}
    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",
      es: "Inicia sesión en tu cuenta",
    }),
    submitButton: t({
      en: "Continue",
      es: "Continuar",
    }),
  },
} 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>
  );
};

    Al renombrar o descartar AuthModal.tsx, sus declaraciones de contenido se ajustan o borran de forma paralela.

    Autocompletado frente a verificación estricta de tipos

    Ampliar IntlMessages en next-intl aporta sugerencias en el editor basadas en el idioma primario:

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

type Messages = typeof en;

declare global {
  interface IntlMessages extends Messages {}
}

    No obstante, solo comprueba el idioma base. Si se omite una clave en es.json, TypeScript no notificará ninguna alerta, manteniendo tu pipeline en verde mientras los usuarios encuentran textos vacíos.

    Intlayer deduce los tipos de cada bloque de contenido. El uso de strictMode detiene la compilación ante cualquier traducción incompleta.

    Comparativa de herramientas y soporte IA

    Característica next-intl Intlayer
    Extensión VS Code ❌ Ninguna ✅ Extensión oficial
    Language Server (LSP) ❌ Ninguno ✅ LSP integrado
    Servidor MCP (para IA) ❌ Ninguno ✅ Servidor MCP incorporado
    Habilidades de Agente ❌ Ninguna ✅ Skills operativas
    CMS Visual en contexto ❌ Ninguno ✅ Gratuito y Open Source

    Disponer de servidores LSP y MCP propios permite a los asistentes de desarrollo comprender el mapa de contenido del proyecto y sugerir o actualizar traducciones con exactitud.

    El vínculo con Crowdin y el ecosistema

    next-intl colabora formalmente con Crowdin. Los patrocinios sustentan el ecosistema libre, pero esta relación condiciona las metas del proyecto: al estar enfocado en servicios TMS externos, un comando libre y local de traducción por IA no forma parte de las prioridades de next-intl.

    Intlayer integra estas herramientas de serie:

    Comando de relleno por IA local (intlayer fill):

    Revisa y traduce claves faltantes empleando tus credenciales personales de OpenAI, Anthropic, Mistral o Gemini.

    CMS visual desplegable:

    Utiliza el CMS Intlayer para facilitar la edición visual al equipo no técnico integrando cambios directamente en Git.

    Licencia de código abierto permisiva:

    Todo el código se distribuye bajo licencia Apache 2.0.

    ¿En qué escenarios sigue encajando next-intl?

    Si tu sistema utiliza de forma intensiva selecciones complejas, reglas ordinales intrincadas y formatos anidados, la integración ICU de next-intl es robusta.

    Para equipos que ya coordinan sus traducciones a través de Crowdin, next-intl encaja con naturalidad.

    Si tu plataforma responde adecuadamente y la carga del bundle respeta tus objetivos, migrar no es una prioridad inmediata.

    ¿Cómo mejorar mi configuración de next-intl existente?

    Intlayer proporciona un paquete de compatibilidad directa que replica con exactitud las firmas de funciones y hooks de next-intl (como useTranslations, getTranslations y asistentes de enrutamiento). No necesitas reescribir tus componentes para beneficiarte de las optimizaciones a nivel de compilador.

    La configuración se completa con un único comando:

    bash
    npx intlayer init --interactive

    Esta CLI interactiva:

    1. Instala el paquete de compatibilidad @intlayer/next-intl.
    2. Configura los alias del empaquetador para que tus importaciones (next-intl, next-intl/server) se redirijan directamente a Intlayer, permitiendo remover la biblioteca antigua de tu package.json.
    3. Activa de inmediato el soporte de Language Server (LSP), la eliminación de fugas de datos entre páginas (tree-shaking completo) y las herramientas locales de traducción por IA sin requerir una refactorización masiva.

    Para conocer el proceso paso a paso, explora nuestras guías:

    Verifica el volumen de transferencia y fugas de tu aplicación Next.js con el escáner SEO i18n gratuito:

    Lecturas adicionales

    react-i18next vs react-intl vs Intlayer¿Está i18next obsoleto?

    Comentarios

    Aún no hay comentarios. Sé el primero en compartir tus pensamientos.

    Artículos relacionados

    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 y Internacionalización

    Descubre cómo optimizar tu sitio web multilingüe para los motores de búsqueda y mejorar tu SEO.

    Aymeric PINEAU

    Mejores herramientas de internacionalización (i18n) para Svelte - Guía completa para traducir Best Svelte i18n Libraries 2026 — Compared by DX & Bundle

    La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su Svelte aplicación en 2026, traducción LLM, Agent Skills & MCP.

    Aymeric PINEAU

    i18n por componente vs. centralizado: Un nuevo enfoque con Intlayer

    Un análisis profundo de las estrategias de internacionalización en React, comparando enfoques centralizados, por clave y por componente, e introduciendo Intlayer.

    Aymeric PINEAU

    Últimos artículos

    ¿Está i18next obsoleto en 2026?

    i18next impulsa millones de sitios web, pero su arquitectura en tiempo de ejecución de 2011 muestra su antigüedad. Un vistazo al peso del bundle, los límites del tree-shaking y la falta de innovación.

    Aymeric PINEAU

    ¿Está vue-i18n obsoleto en 2026?

    vue-i18n ha sido el estándar para aplicaciones Vue y Nuxt durante una década. Sin embargo, en nuestros benchmarks resultó ser el runtime de i18n más pesado de la web. Descubre por qué.

    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