ali-ahnaf / ali-ahnaf/pocket_pixel
Internationalization (i18n) - Language Support & Switcher in Settings
- 主要语言
- TypeScript
- 星标
- 14
- 派生
- 91
- PR 合并指标
- 30 天内没有已合并 PR
描述
## 🗺️ Context / Background
The app currently only supports English. To make it more accessible — especially for Bangla-speaking users — we want to add internationalization (i18n) support and a language switcher in the Settings page.
**Primary languages to support:**
1. 🇬🇧 English (`en`)
2. 🇧🇩 Bangla (`bn`)
---
## 🎯 Problem / Goal
Add i18n support to the Next.js frontend (`packages/ui`) and let users switch the app language from the Settings page. The selected language should persist across page refreshes.
---
## 🔧 Suggested Approach
### 1. Choose an i18n library
Recommended: **`next-intl`** (works well with Next.js 14 App Router).
Install it:
```bash
cd packages/ui && npm install next-intl
```
Docs: https://next-intl-docs.vercel.app/
### 2. Create translation files
Create message files under `packages/ui/src/messages/`:
```
packages/ui/src/messages/
en.json ← English strings
bn.json ← Bangla strings
```
Start by moving all hardcoded UI strings (nav labels, button text, page titles, dashboard labels, error messages) into `en.json`, then translate them into `bn.json`.
Example structure:
```json
{
"nav": {
"home": "Home",
"vaults": "Vaults",
"settings": "Settings"
},
"dashboard": {
"lootGained": "Loot Gained",
"lootSpent": "Loot Spent"
}
}
```
### 3. Configure next-intl
- Create `packages/ui/src/i18n.ts` as the next-intl config file
- Wrap the app in `packages/ui/src/app/layout.tsx` with the `NextIntlClientProvider`
- Follow the [App Router setup guide](https://next-intl-docs.vercel.app/docs/getting-started/app-router)
### 4. Replace hardcoded strings
Go through each page and component and replace hardcoded strings with the `useTranslations` hook:
```ts
const t = useTranslations('nav');
// {t('home')}
```
### 5. Add language switcher to Settings
In the Settings page (`packages/ui/src/app/settings/page.tsx`), add a **Language** setting with a dropdown or a set of buttons showing the available languages (English / বাংলা).
On selection:
- Update the active locale
- Persist the choice in `localStorage` (key: `preferred_locale`) so it survives refreshes
- Load the stored preference on app init
---
## ✅ Acceptance Criteria
- [ ] `next-intl` (or equivalent) is installed and configured for the App Router
- [ ] `en.json` and `bn.json` translation files exist and cover all visible UI strings
- [ ] All hardcoded UI strings are replaced with translation keys
- [ ] A language switcher is visible in the Settings page (English / বাংলা)
- [ ] Switching language immediately updates all visible text
- [ ] Selected language persists across page refreshes (via `localStorage`)
- [ ] No layout breakage when switching between English and Bangla (check for text overflow on narrow elements)
---
## 🔗 Dependencies
**Must be completed first:**
- Settings Page frontend issue ("Settings Page - Navigation & Income/Expense Visibility Toggles")
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。