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

---

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