Using `next-intl` and HeroUI for Multilingual Apps
Install `next-intl` package. Define translations in JSON files (e.g., `en.json`, `th.json`) inside the `/messages` directory.
npm install next-intl
Configure `middleware.ts` to handle locale detection and routing. Use `createMiddleware` to wrap the app paths.
middleware.ts
Wrap the application in `app/[locale]/layout.tsx` with the `NextIntlClientProvider` to make messages available.
NextIntlClientProvider
In React components, import and use the `useTranslations()` hook to retrieve strings by key (e.g., `t('title')`).
const t = useTranslations()
Create a `LanguageSwitcher` component (using HeroUI Select). Use Next.js `useRouter` and `usePathname` to update the URL locale path.
router.push(newPathname)