Frontend y Diseño

next-intl Internationalization

Añade internacionalización a aplicaciones Next.js App Router con next-intl, soportando traducciones, formato y enrutamiento por locale.

Claude Code Cursor Copilot Windsurf

Descripción General

next-intl es la biblioteca de internacionalización líder para Next.js App Router, proporcionando traducciones con tipos seguros, formato de mensajes ICU, enrutamiento basado en locale y soporte para server components. Los agentes de IA pueden configurar toda la infraestructura i18n, generar archivos de traducción e implementar enrutamiento consciente del locale con middleware.

La biblioteca soporta tanto server components como client components, haciéndola totalmente compatible con la arquitectura App Router. Tu agente de IA puede configurar el middleware para detección de locale y reescritura de URL, configurar archivos de mensajes para cada locale, implementar el hook `useTranslations` para client components y usar `getTranslations` para server components.

next-intl maneja escenarios de formato complejos incluyendo fechas, horas, números, pluralización y texto enriquecido con componentes embebidos. Los agentes de IA pueden generar archivos JSON de traducción, implementar selectores de idioma, configurar locales predeterminados y configurar etiquetas hreflang amigables con SEO para sitios multilingües.

¿Para Quién Es?

Equipos de Next.js añadiendo soporte multilingüe a sus aplicaciones
Desarrolladores implementando enrutamiento basado en locale con prefijos de URL
Equipos gestionando archivos de traducción a través de múltiples locales
Ingenieros construyendo sitios multilingües optimizados para SEO

Instalación

Configurar Claude Code

npm install next-intl

Configuración

// i18n/request.ts
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
}));

// middleware.ts
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
  locales: ["en", "ar", "es"],
  defaultLocale: "en",
});

Visitar Fuente (Documentación Oficial)

Explora herramientas de IA

Las mejores herramientas de IA que complementan tus habilidades

Lee artículos sobre IA y diseño

Consejos y tendencias en el mundo del diseño y la IA

Skills Relacionados

Frontend y Diseño

Figma MCP Server

Convierte diseños de Figma a código directamente preservando estilos y componentes del sistema de diseño.

Claude Code Cursor

Frontend y Diseño

Storybook Component Docs

Genera documentación interactiva de componentes de UI con ejemplos en vivo y casos de uso.

Claude Code Copilot Cursor

Frontend y Diseño

Tailwind CSS IntelliSense

Autocompletado inteligente de clases de Tailwind con vista previa de colores y valores mientras escribes.

Copilot Cursor Windsurf