How to add react meta description with i18n-next React?

To add react meta description with i18n-next React, we can use the useIntl hook with React Helmet.

We install React Helmet with

npm i react-helmet

Then we use the useIntl hook to get the formatMessage function.

And then we add the meta tag into the Helmet component provided by React Helmet.

Then we set the content prop to a string returned by the f function to get the translated string by the id property.

import { useIntl } from 'react-intl';

const DescriptionMeta = () => {
  const { formatMessage: f } = useIntl();

  return (
    <Helmet>
      <meta name="description" content={f({ id: 'meta.description' })} />
    </Helmet>
  );
};