Next.js Pages Router con next-i18next: Tutorial Completo i18n 2026

Respuesta Rápida

Para usar next-i18next: Instala el paquete, crea next-i18next.config.js, envuelve _app.tsx con appWithTranslation y usa serverSideTranslations.

Instalación

TerminalCopy
npm install next-i18next react-i18next i18next

Configuración

next-i18next.config.js:

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

Traducciones

public/locales/es/common.json:

JSONCopy
1{
2  "saludo": "¡Hola, {{name}}!",
3  "items_one": "{{count}} artículo",
4  "items_other": "{{count}} artículos"
5}

Uso

TSXCopy
1import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
2import { useTranslation } from 'next-i18next';
3
4export default function Inicio() {
5  const { t } = useTranslation('common');
6  return <h1>{t('saludo', { name: 'Mundo' })}</h1>;
7}
8
9export const getStaticProps = async ({ locale }) => ({
10  props: {
11    ...(await serverSideTranslations(locale, ['common'])),
12  },
13});

Artículos Relacionados

• Comparación react-i18next vs react-intl