Add "non-hook" export of useTranslation

[axelfriberg]

Hi! Recently a new rule was added to the eslint-plugin-react-hooks that specifies that hooks cannot be used in async components facebook/react@7118f5d This version of the eslint plugin is now included in next.js 13.4.10 which meant I started to get an linting error after using the "useTranslation" hook in async pages that fetched data. However, looking into the source code of useTranslation I can see that if you are using the app dir then it is not a hook, just a normal function https://github.com/aralroca/next-translate/blob/master/src/useTranslation.tsx#L18 The problem comes up due to how the linting checks for hooks and that is any function that has the word "use" in the beginning. So what I did to get around this was simply rename the import:

import createTranslation from 'next-translate/useTranslation';

export default async function HomePage() {
  const data = await getSomeData();
  const { t } = createTranslation();
  return <p>t('hello', {name: data.name})</p>
}

Since this linting is included now in next.js and I won't be the last that runs into this my question to you is that if you think it is worth to add another export to the library for usage inside server components? So basically just directly export what is here https://github.com/aralroca/next-translate/blob/master/src/useTranslation.tsx#L18 under a different name? To make it clear it isn't a hook and just a function?

If not maybe it is worth to add something to the README that explains that you might need to rename the hook in certain scenarios?

[aralroca]

wow. Thanks to alert about this Eslint rule. Currently, in the appdir the useTranslation hook in reality is not a hook, so probably we can rename it to createTranslation. Feel free to PR, for me make sense what you said @axelfriberg.

I created the issue from this discussion: #1118

[axelfriberg]

Sure I'll try to find some time in the near future and make a PR.