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

Respuesta Rápida

Para usar react-intl con Next.js App Router: Instala react-intl, crea archivos de mensajes en formato ICU y envuelve tu app con IntlProvider.

Configuración

TerminalCopy
npm install react-intl @formatjs/intl-localematcher

messages/es.json:

JSONCopy
1{
2  "home.titulo": "Bienvenido a nuestra aplicación",
3  "home.items": "{count, plural, =0 {Sin artículos} one {# artículo} other {# artículos}}"
4}

IntlProvider

TSXCopy
1'use client';
2import { IntlProvider } from 'react-intl';
3
4export function IntlClientProvider({ locale, messages, children }) {
5  return (
6    <IntlProvider locale={locale} messages={messages}>
7      {children}
8    </IntlProvider>
9  );
10}

Uso

TSXCopy
1import { FormattedMessage, FormattedNumber } from 'react-intl';
2
3<FormattedMessage id="home.titulo" />
4<FormattedNumber value={1234.56} style="currency" currency="EUR" />

Artículos Relacionados

• Comparación react-i18next vs react-intl