So I'm implementing localization in a brand new NextJS app. I've already used the library next-translate but this time I'm following the NextJS doc (App Router).

Here's the doc: https://nextjs.org/docs/app/building-your-application/routing/internationalization#localization
And a very good example: https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing

I understand that, thanks to server components we can load the dictionaries without increasing the bundle size of the client side.
The thing that bother me is using those dictionaries with client components => we must load the dictionaries in the server component and then pass the necessary translation keys to our client component.

Let's say for example I have a AddToCartButton client component that handle the logic of adding a product to a cart and also the button itself. I can use it everywhere in my app just pasting it everywhere I need and it would work just like that.

But now with the dictionnaires I need to do something like this:

export default async function SomeRandomPage({params: { lang }}: { params: { lang: Locale }}) {
  const dictionary = await getDictionary(lang)

  return (
    <div>
      <p>Some random content</p>
      <AddToCartButton dictionary={dictionary.button.cart} />
    </div>
  )
}

The problem is that my component is not anymore "fast to use" because I need to add the boilerplate of params and dictionary.
And also, I don't even consider the case in which we can have multiple nested client components.

So I understand that loading translations server side is good thing perfomance wise but in terms of DX it seems to be quite a step back compared to hooks like useTranslation() that we could use anywhere without any boilerplate.

Am I missing something ?