How to Integrate next-intl Translations in a Next.js App router with Headless UI Components?

Question

I'm working on a Next.js application using the latest Next.js App Router (v14), along with next-intl for internationalization and Headless UI components.

I'm trying to integrate translations into a dropdown menu component built with Headless UI, but I'm facing challenges in implementing it according to the best practices for Typescript and Next.js.

Here's a snippet of my current code:

"use client" // needed for HeadlessUI
import { Menu } from '@headlessui/react'
import {useTranslations} from 'next-intl';
import {Link} from '../navigation';
export default function Navigation() {
  const t = useTranslations('Navigation');

  return (
<Menu>
      <Menu.Button>More</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => (
            <Link
              className={`${active && 'bg-blue-500'}`}
              href="/account-settings"
            >
              {t('Account')}
            </Link>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <Link
              className={`${active && 'bg-blue-500'}`}
              href="/documentation"
            >
               {t('Documentation')} 
            </Link>
          )}
        </Menu.Item>
        <Menu.Item disabled>
          <span className="opacity-75">Invite a friend (coming soon!)</span>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

I would like to add translations to the menu items using next-intl, but I'm not sure how to best approach this, especially considering the use of the "use client" directive from Headless UI. I'm looking for guidance on how to properly integrate translations in this setup, adhering to the best practices of TypeScript and Next.js.

Has anyone implemented something similar or can provide insights on the best way to approach this?