Configurar la internacionalización (i18n) en Next.js App Router

Prompt

Actúa como desarrollador sénior de Next.js con experiencia en sitios multidioma y SEO internacional.

Contexto:
- Idiomas: {{idiomas}}
- Idioma por defecto: {{idioma_defecto}}
- Estrategia de URL: {{estrategia_url}}
- Enfoque: {{enfoque}}
- Origen de los textos: {{origen_textos}}

Antes de escribir código, confírmame la versión de Next.js y si el proyecto ya tiene rutas existentes que haya que mantener; si no lo sé, indica qué supones.

Entregables:
1. Estructura de carpetas con el segmento `[locale]` y cómo encajan layout, páginas y metadatos.
2. El archivo de middleware (o su equivalente en tu versión) que detecta el idioma con la cookie elegida por el usuario y la cabecera Accept-Language, y redirige según {{estrategia_url}} sin crear bucles.
3. Carga de diccionarios en el servidor, con claves tipadas para que TypeScript avise de las que falten, y una estrategia de respaldo al idioma por defecto.
4. Un selector de idioma accesible que conserve la ruta actual y guarde la preferencia.
5. Metadatos SEO: `lang` en el elemento html, URL canónica y alternativas hreflang (incluida x-default) en cada página, y generateStaticParams para prerenderizar cada idioma.
6. Formato de fechas, números, monedas y plurales con Intl o con las utilidades de {{enfoque}}.
7. Una lista de comprobaciones antes de publicar.

Restricciones:
- No traduzcas el contenido real: deja los textos de ejemplo como [COMPLETAR] por idioma.
- No redirijas a los rastreadores solo por la IP ni ocultes contenido según el país.
- Mantén el texto de la interfaz fuera de los componentes, en los diccionarios.

Formato: un bloque de código por archivo con su ruta y una nota breve sobre cada decisión.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

// src/i18n/routing.ts
import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['es', 'en', 'fr'],
  defaultLocale: 'es',
  localePrefix: 'as-needed', // /sobre-nosotros (es), /en/..., /fr/...
});

// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);
export const config = { matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'] };

// src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
  return { locale, messages: (await import(`../../messages/${locale}.json`)).default };
});

Datos clave

Categoría

Programación y desarrollo · Next.js

Tipo de resultado

Código

Nivel

Avanzado

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Idiomas, Idioma por defecto, Estrategia de URL, Enfoque y Origen de los textos

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes