If i pass multiple parameters to useTranslation hook it doesn't works

[shivika24]

const { t } = useTranslation(['groups','translation'])
Here groups and translation are both json files.

[codeBelt]

What do you mean it doesn't work? How doesn't it work? Does it work when you pass useTranslation('groups') or useTranslation('translation')?

Are you passing ['groups', 'translation'] to serverSideTranslations on the same page you are using useTranslation on?

export const getServerSideProps: GetServerSideProps = async (context) => ({
  props: {
    ...(await serverSideTranslations(context.locale, ['groups', 'translation'])),
  },
});

[shivika24]

@codeBelt yes it works when I pass useTranslation(‘groups’) or useTranslation(‘translation’). Yes I am passing
['groups', 'translation'] On serverSideTranslations. Still it doesn’t works when I am passing both the parameters together in useTranslation hook.

[codeBelt]

I just started using next-i18next two days. All I can say is it works for me ;). Check out my example branch and see if I am doing things different than you codeBelt/my-next.js-starter#7 . Hopefully this helps. It's hard to trouble shoot if there is no example with the issue.

[rafagomes]

After dig a little about this subject. I can enhance the example code.

The question from @shivika24 is about using the multiple files.

For future reference here:
you can use like that.

const { t } = useTranslation(['common', 'home'])

And call like that:
t('title') will call from common file
t('home:h1') will call the h1 property from home file

@codeBelt I can enhance the sample file with that example. :)

What do you think?

[codeBelt]

You are going to have to create a public Github repo with a simple example of next-i18next that has the issue for me to look at.

What you are showing me should work:

const SomePage = () => {
  const { t } = useTranslation(['common', 'home']);

  return (
    <>
      <div>{t('title')}</div>
      <div>{t('home:h1')}</div>
    </>
  );
};

export const getServerSideProps = async (context) => ({
  props: {
    ...(await typedServerSideTranslations(context.locale, ['common', 'home'])),
  },
});

export default SomePage;

[rafagomes]

@codeBelt Can I fork your simple example and enhance over there? This will allow us to have just one source of truth.

[codeBelt]

Sure for my example branch https://github.com/codeBelt/my-next.js-starter/tree/next-i18next

[rafagomes]

@codeBelt Sure. Will do. :)

[rafagomes]

@codeBelt After analyze your code, I think it's more than clear the example about how to use. I think it is a matter of maybe change our documentation. Maybe something like: Change:
This demo app is the simple example - nothing more, nothing less.
To:
This demo app is the simple example - nothing more, nothing less. If you want a more complex example, please take a look into this (link to your example).

You're authorizing, I can make that change.

[codeBelt]

When you say:

change our documentation.

Are you a contributor of next-i18next?

---

I would say don't link to my example because I am just playing around and I would need to clean it up. Maybe I will write an article about my example which may help other people.

[rafagomes]

@codeBelt I don't! I would suggest an PR :)

Awesome idea! Have a good one, then. Just trying to help <3

[isaachinman]

We don't need to add a new example, but blogs and further documentation are always great. Thanks!