Next.js and i18next - two variables in single translation - instead of Link I get [object Object]

Question

I have a Footer component:

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        <Trans
          i18nKey='information'
          t={t}
          components={{
            currentYear,
            link: (
              <Link
                href='https://www.signinsolutions.com'
                className='text-green-600'
                rel='noreferrer'
                target='_blank'
              >
                Sign In Solutions
              </Link>
            ),
          }}
        />
      </p>
    </footer>
  );
}

json file:

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the {{link}} suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

I tried multiple different things without success - I just can't get seem to get that currentYear and Link component rendered in my translation at the same time - Link will always be as [Object object]

Screenshot

Answer 1

I would suggest to use i18next interpolation in this example. let me provide the draft of solution for you:

footer component should look like that:

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();
  const link = "LINK HERE";

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        {t("information", {currentYear, link} )}
      </p>
    </footer>
  );
}

if you want to disable escaping then in your translation JSON file please use little minus character after opening double curly brackets {{- variable_name}} like that:

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the {{- link}} suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

ANOTHER SOLUTION TO USE COMPONENT WITH TRANSLATION

In the case when you want to use the whole component the best option is to use Trans component from next-i18next. The below example is showing how to do that:

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        <Trans 
          i18nKey="information"
          t={t}
          components={[ <a href='https://www.signinsolutions.com' className='text-green-600' rel='noreferrer' target='_blank' /> ]}
          values={{currentYear}}
        />
      </p>
    </footer>
  );
}

and then in JSON file:

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the <0>Sign In Solutions</0> suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}