Fixing error Text content does not match server-rendered HTML Next.js

by
Tiempo de lectura: < 1 minuto

Today we are going to fix the common error that may occur when implementing i18n in our React environment with Next.js.

This is the 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

A different content appears on the server than on the client.

This is usually because we are importing the i18n library incorrectly (the useTranslation component). To fix this, let’s check if we have mistakenly imported it:

import { useTranslation } from 'react-i18next';

And replace it with:

import { useTranslation } from 'next-i18next';

And the problem should be solved.

Post Views: 9

Leave a Comment