Using react-i18next Trans component without "use client"

Question

The whole setup of the internationalization works really well on my next.js app (v14), however now I'm using the Trans component to handle the html coming from the json files. I can't find a way to use it without the "use client" at the top of the file.

All the pages in my app are SSR and I'd like to keep it this way!

Any help would be very appreciated.

Answer 1

all you need is to add /TransWithoutContext at the end of the import:

import { Trans } from "react-i18next/TransWithoutContext";

the rest are the same:

<Trans i18nKey={'your_i18nKey'} ns="your_json_namespace" t={t}> 
 {/* @ts-expect-error Trans interpolation */}
       <strong>{{ your_variable }}</strong>
</Trans>