Search code examples
next.jsnext-i18next

next-i18next t(...).map is not a function

I just migrate my working app from react to nextjs. I followed the tutorial provided by next and installed next-i18next but I'm not being able to map

I got this kind of object

 "skills": {
    "title": "Skills",
    "items": [
      {
        "title": "Javascript",
        "additionalInfo": [
          "React",
          "Node"
         ]
      }
    ]
}

and i need to parse the translation into this component

 {t("skills.items", { returnObjects: true }).map(
            ({ title, additionalInfo }, index) => (
              <Fragment key={index}>
                <TitleRow>
                  <p>{title}</p>
                </TitleRow>
    ...

Any ideas on what i missed in the migration?

Solution

  • it may be t is not ready to be used in a first render... If you're using the useTranslation hook, there should be a ready flag. => https://react.i18next.com/latest/usetranslation-hook#not-using-suspense Or you can check for !!t("skills.items", { returnObjects: true }) before calling map