Next.js 15 i18n: Guía completa de internacionalización 2025

Respuesta rápida

Para añadir internacionalización (i18n) a Next.js 15, utiliza next-intl con App Router. Instálalo con npm install next-intl, crea una carpeta [locale] en tu directorio app, configura el middleware para detección de idioma, y usa getTranslations() en Server Components o useTranslations() en Client Components.

¿Buscas lo más reciente? Consulta nuestra Guía Next.js 15 i18n 2026 para los patrones y características más nuevos.

---

Qué cambió realmente en Next.js 15

Con Server Components, las traducciones pueden quedarse completamente en el servidor. El cliente solo recibe el HTML renderizado.

Eligiendo una biblioteca

next-intl es lo que uso ahora. Fue diseñado específicamente para App Router desde cero.

Configuración

Instalación

TerminalCopy
npm install next-intl

Estructura de carpetas

/messages
  /en.json
  /es.json
  /de.json
/app
  /[locale]
    /layout.tsx
    /page.tsx
/middleware.ts

Archivos de configuración

i18n/config.ts:

TypeScriptCopy
export const locales = ['en', 'es', 'de', 'fr', 'ja'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'en';

Middleware

TypeScriptCopy
1import createMiddleware from 'next-intl/middleware';
2import { locales, defaultLocale } from './i18n/config';
3
4export default createMiddleware({
5  locales,
6  defaultLocale,
7  localePrefix: 'always'
8});
9
10export const config = {
11  matcher: ['/((?!api|_next|.*\\..*).*)']
12};

Usando traducciones

Server Components

TypeScriptCopy
1import { getTranslations } from 'next-intl/server';
2
3export default async function ProductPage() {
4  const t = await getTranslations('product');
5  return <h1>{t('title')}</h1>;
6}

Client Components

TypeScriptCopy
1'use client';
2import { useTranslations } from 'next-intl';
3
4export function AddToCartButton() {
5  const t = useTranslations('product');
6  return <button>{t('addToCart')}</button>;
7}

Pluralización con ICU

JSONCopy
1{
2  "cart": {
3    "items": "{count, plural, =0 {Tu carrito está vacío} one {# artículo en el carrito} other {# artículos en el carrito}}"
4  }
5}

Consejo: Usa nuestro Editor de Mensajes ICU gratuito para construir y probar visualmente la sintaxis de pluralización ICU antes de añadirla a tus archivos de traducción.

Cuando los archivos JSON se vuelven un dolor

Con más de 500 claves de traducción, gestionar archivos JSON manualmente empieza a doler:

• Traductores rompiendo accidentalmente la sintaxis JSON
• Sin forma de ver qué falta entre idiomas
• Copiar y pegar nuevas claves a 12 archivos

Solución rápida para problemas JSON: Nuestra herramienta gratuita Comparador de JSON te ayuda a comparar archivos de traducción entre idiomas y detectar instantáneamente claves faltantes.

Aquí es donde un sistema de gestión de traducciones ayuda. He estado usando IntlPull para mis proyectos recientes—está diseñado específicamente para flujos de trabajo i18n de Next.js.

TerminalCopy
1# Sube tus cadenas de origen
2npx @intlpullhq/cli upload
3
4# Obtén traducciones con IA
5npx @intlpullhq/cli translate --languages es,de,fr
6
7# Descarga todo
8npx @intlpullhq/cli download

Por qué IntlPull para proyectos Next.js:

• Integración nativa con next-intl - Funciona con tu estructura de carpetas existente
• Traducciones con IA - Obtén traducciones instantáneas con conocimiento del contexto
• Flujo de trabajo compatible con Git - Descarga traducciones directamente a tu repositorio
• Actualizaciones OTA - Actualiza traducciones sin redesplegar
• Plan gratuito - Cubre la mayoría de proyectos personales y startups

Conclusión

Next.js 15 con App Router genuinamente hace mejor el i18n. Los Server Components eran la pieza que faltaba.

1. Configura next-intl con la estructura de carpetas de arriba
2. Haz funcionar el enrutamiento con el middleware
3. Añade traducciones incrementalmente mientras construyes
4. Cuando superes los archivos JSON, mira un TMS como IntlPull

Actualización: Para los patrones más recientes y actualizaciones de 2026, consulta nuestra Guía Next.js 15 i18n 2026.

Preguntas frecuentes

¿Cuál es la mejor biblioteca i18n para Next.js 15?

next-intl es la mejor biblioteca i18n para Next.js 15 porque está construida específicamente para App Router y Server Components.

¿Next.js 15 tiene soporte i18n integrado?

Next.js 15 proporciona infraestructura de enrutamiento para i18n pero no incluye funcionalidad de traducción. Necesitas una biblioteca como next-intl.

¿Cómo añado múltiples idiomas a Next.js?

Crea una carpeta [locale] en tu directorio app, añade archivos JSON de traducción, configura middleware para detección de idioma, y usa los hooks de traducción. IntlPull puede automatizar la gestión de traducciones.