Solucionar error «Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: Client:» en Next.js y React utilizando i18n

Tiempo de lectura: < 1 minuto

Hoy vamos a solucionar el error común que puede aparecer cuándo estamos implementando i18n en nuestro entorno React con Next.js.

Este es el error:

Unhandled Runtime Error

Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "" Client: ""

See more info here: https://nextjs.org/docs/messages/react-hydration-error

En server aparece un contenido distinto que en client.

Esto generalmente se debe a que estamos importando mal la librería i18n (el componente useTranslation). Para ello vamos a comprobar que tenemos erroneamente importada:

import { useTranslation } from 'react-i18next';

Y la vamos a sustituir por:

import { useTranslation } from 'next-i18next';

Y ya se habría solucionado el problema.