Array Usage In Next-Translate

[joshuadesigner05]

Hello. I'm trying to do a language translation in my Next JS project. I have a configuration in my project as you can see below. I wanted to list my data here like the map method in JavaScript. But I could not succeed in this. How can I add my translations in the array to my project sequentially like in the map method?

{ "example": [ { "title": "Title 1", "description": "Desc 1" }, { "title": "Title 2", "description": "Desc 2" } ] }

// An example usage in the project.

{t("common:example.title", { returnObjects: true })}

// And this is how it looks on my page:

common:example.title (Yes. It looks exactly like this.)

I also tried to apply the methods mentioned in article 7 of the documentation. But I didn't get any result. Where do you think I am doing wrong? @aralroca

[aralroca]

Instead of {t("common:example.title", { returnObjects: true })} you can directly specify only the example to get the full array: {t("common:example", { returnObjects: true })}

[joshuadesigner05]

Thanks for your response. But I have the same problem when I use it as you mentioned. In addition, when I use it as you mentioned, I need to print a title value in the h2 tag and the desc value in the p tag, but I think I can't use it separately.

For now, if I can find a way that I can use, I will try to add each object in these arrays to the contatants folder by giving a separate name and call it with the map method. If I can't do that, unfortunately, my code count will increase.

I expect you to either improve your project to call such arrays within a map method, or develop a different method, as ChatGPT showed me.

// ChatGPT Example

import { useTranslation } from 'next-translate'

function Menu() {
  const { t } = useTranslation('common')

  return (
    <ul>
      {t('menuItems', { returnObjects: true }).map((item) => (
        <li key={item.title}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  )
}

export default Menu

Actually, I think this type of usage can give excellent results for arrays. Seems like a very sensible use to me. Of course, I don't know much about the compatibility of this method with your project, unfortunately.

I wonder if there is another, shorter method I can use temporarily? I have to submit the project as soon as possible. Unfortunately, my time is somewhat limited. If there is no method for this, unfortunately, I will have to rearrange the codes. @aralroca

[aralroca]

Sorry, but I don't understand your problem. What is wrong in this code?

import { useTranslation } from 'next-translate'

function Menu() {
  const { t } = useTranslation('common')
  const items = t('menuItems', { returnObjects: true })

  return (
    <ul>
      {items.map((item) => (
        <li key={item.title}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  )
}

export default Menu

[joshuadesigner05]

Hello @aralroca . In order for you to better understand my problem, I deployed a simple version to the server and added my Github repo here .

Unfortunately, I couldn't solve my problem with the way you mentioned. Probably there is an error in my codes. If you are available, can you review it?

[joshuadesigner05]

Mr. Aral, is there any solution for this problem? @aralroca

[sunncyn]

I also have a problem with array.

[aralroca]

@joshuadesigner05 This problem is not related with the array, is related that you are trying to get translations in different languages at the same time. For that, you can overwrite the loadLocaleFrom:

{
  // ...rest of config
  "loadLocaleFrom": async (lang, ns) => ({
     es: await import(`./locales/es/${ns}.json`).then((m) => m.default),
     en: await import(`./locales/en/${ns}.json`).then((m) => m.default)
   }),
}

And then get for all languages:

const menuItemEN = t('en.menuItems', { returnObjects: true })
const menuItemES = t('es.menuItems', { returnObjects: true })
// ...

[sandrooco]

@aralroca I currently have a similar, very weird problem:

const { t } = useTranslation('common');
  const offerItems = t(
    'components.offers',
    {},
    { returnObjects: true }
  ); // will be an array of objects including properties `id` and `title`

This works but only on the first load. When the user refreshes, it will break -> if I log offerItems there will only be the key ('components.offers'). I only have one namespace and language yet.

i18n.json:

{
  "locales": ["de"],
  "defaultLocale": "de",
  "defaultNS": "common",
  "pages": {
    "*": ["common"]
  }
}

[aralroca]

@sandrooco in which next-translate & next-translate-plugin version?

[sandrooco]

This happens with 2.5.2 in both packages.

[nikkhah63]

it happens at first load,you have to set a condition , check is not null and is array like this: const { t } = useTranslation('common'); const offerItems = t( 'components.offers', {}, { returnObjects: true } ); if(offerItems && Array.isArray(offerItems )){ //do something }