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

Respuesta Rápida

Para usar react-intl con Next.js Pages Router: Instala react-intl, crea archivos de mensajes ICU y envuelve _app.tsx con IntlProvider.

Instalación

TerminalCopy
npm install react-intl

next.config.js:

JavaScriptCopy
1module.exports = {
2  i18n: {
3    locales: ['es', 'en', 'fr'],
4    defaultLocale: 'es',
5  },
6};

Mensajes

lang/es.json:

JSONCopy
1{
2  "app.titulo": "Bienvenido a Mi App",
3  "app.items": "{count, plural, =0 {Sin artículos} one {# artículo} other {# artículos}}"
4}

Configuración _app.tsx

TSXCopy
1import { IntlProvider } from 'react-intl';
2import { useRouter } from 'next/router';
3
4export default function App({ Component, pageProps }) {
5  const { locale } = useRouter();
6  return (
7    <IntlProvider locale={locale} messages={pageProps.messages}>
8      <Component {...pageProps} />
9    </IntlProvider>
10  );
11}

Uso

TSXCopy
import { FormattedMessage } from 'react-intl';

<FormattedMessage id="app.titulo" />

Artículos Relacionados

• Comparación react-i18next vs react-intl