Next.js App Router con react-i18next: Tutorial Completo i18n 2026

Respuesta Rápida

Para usar react-i18next con Next.js App Router: Instala react-i18next i18next, crea un archivo de configuración i18n y usa el hook useTranslation.

Configuración del Proyecto

TerminalCopy
npm install react-i18next i18next i18next-resources-to-backend

Archivos de Traducción

locales/es/common.json:

JSONCopy
1{
2  "titulo": "Bienvenido a nuestra aplicación",
3  "descripcion": "Una aplicación Next.js multilingüe"
4}

Uso

TSXCopy
1// Server Component
2const { t } = await getTranslation(locale);
3return <h1>{t('titulo')}</h1>;
4
5// Client Component
6const { t } = useTranslation(locale);
7return <p>{t('items', { count: 5 })}</p>;

Artículos Relacionados

• Comparación react-i18next vs react-intl