Internacionalización de Next.js
next-intl, locale routing, traducciones, formateo de fecha/hora, soporte RTL, cambio de locale dinámico
1¿Cuál es el rol principal del archivo middleware.ts en una aplicación Next.js con next-intl?
¿Cuál es el rol principal del archivo middleware.ts en una aplicación Next.js con next-intl?
Respuesta
El middleware next-intl detecta automáticamente el locale del usuario (mediante el encabezado Accept-Language, cookies o URL) y redirige a la URL apropiada con el prefijo de locale. Se ejecuta antes de cada solicitud y gestiona la negociación de locale sin código adicional en los componentes. Es el punto de entrada obligatorio para habilitar el routing i18n en Next.js App Router.
2En next-intl, ¿dónde deben colocarse los archivos de traducción para una estructura de proyecto óptima?
En next-intl, ¿dónde deben colocarse los archivos de traducción para una estructura de proyecto óptima?
Respuesta
Los archivos de traducción se colocan en messages/[locale].json en la raíz del proyecto (ej: messages/fr.json, messages/en.json). Esta convención facilita el descubrimiento de traducciones y permite que next-intl las cargue automáticamente a través de la configuración i18n. Algunos proyectos también usan messages/[locale]/ con archivos separados por namespace para mejor organización.
3¿Cuál es la diferencia principal entre useTranslations y getTranslations en next-intl?
¿Cuál es la diferencia principal entre useTranslations y getTranslations en next-intl?
Respuesta
useTranslations es un hook React síncrono para Client Components, mientras que getTranslations es una función async para Server Components. getTranslations permite obtener traducciones del lado del servidor sin enviar JavaScript al cliente, mejorando el rendimiento. useTranslations es necesario para componentes interactivos que requieren la directiva use client.
¿Cómo configurar los locales soportados en next-intl?
¿Cuál es la sintaxis para usar variables en una traducción next-intl?
+17 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis