How can I use next-intl translation my client components?
Answered
sh1ro posted this in #help-forum
sh1roOP
I followed the set-up guide on next-intl setup document. There is a problem, when I'm making a navbar which is a client component, the ui have to change at the same time with the locale, but it appears this error message? Any suggestion for fixing and optimizing?
Answered by B33fb0n3
no you can't, as the
useTranslations need to know what kind of data you want to access. And without the mentioned provider it doesn't know that. And inside a constants file there is no react that could provide it. So make sure you reuse it when putting it in a variable like you did. If even more components of this three need it, you either want to move it one level up the tree (and pass it as props down to the needed components) or call the method inside the next react component again (I prefer the latter)8 Replies
@sh1ro I followed the set-up guide on next-intl setup document. There is a problem, when I'm making a navbar which is a client component, the ui have to change at the same time with the locale, but it appears this error message? Any suggestion for fixing and optimizing?
you need to make sure to call the
useTranslations inside your component and not outside your component. So shift the navLinks and the useTranslations into your component and you solved the errorI want to reuse it for many times.
@sh1ro So I can't use it in a `constant` file?
no you can't, as the
useTranslations need to know what kind of data you want to access. And without the mentioned provider it doesn't know that. And inside a constants file there is no react that could provide it. So make sure you reuse it when putting it in a variable like you did. If even more components of this three need it, you either want to move it one level up the tree (and pass it as props down to the needed components) or call the method inside the next react component again (I prefer the latter)Answer
@B33fb0n3 no you can't, as the useTranslations need to know what kind of data you want to access. And without the mentioned provider it doesn't know that. And inside a constants file there is no react that could provide it. So make sure you *reuse* it when putting it in a variable like you did. If even more components of this three need it, you either want to move it one level up the tree (and pass it as props down to the needed components) or call the method inside the next react component again (I prefer the latter)
sh1roOP
Not like the way I expected, but thanks.
How to close this help?
@sh1ro How to close this help?
I maked it as solution. You can leave this thread if you want to. Happy to help 🙂