Why isn’t there a <T /> component in next-intl?

[MhL5]

Hi 👋

I was wondering if there’s a reason why next-intl doesn’t provide a <T /> component out of the box?

My use case:

• I have reusable components that need to render translated text.
• These components are used in both server and client components (getTranslations can’t be used in client components, it will break when parent is a client component)
• Right now, if I want to use useTranslations, I need to add "use client" at the top, which forces the entire component to become a client component—even though only a small part of it actually requires translation.

Creating small client component works, but over time it leads to a large number of tiny components that only render text, which feels unnecessary.
To work around this, I wrote a <T /> component myself. But I’m not sure if this is considered a bad practice or if there’s a specific reason why next-intl doesn’t support this pattern.

Is there any guidance or best practice here?

Thanks in advance! 🙏

[amannn]

useTranslations can in fact be used in so-called shared components.

There's also a video on this here: Server & Client Components. I think this could be helpful for you!

But to answer the question: next-intl doesn't provide a component-based API for translations, because in many cases you need to use translations as strings (e.g. aria-label, alt, …). By using only hooks (and async functions), we can reduce the API surface to work for these cases too.

Hope this helps!