next-i18n-lite 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,24 +27,49 @@ pnpm add next-i18n-lite
|
|
|
27
27
|
|
|
28
28
|
## Quick Start
|
|
29
29
|
|
|
30
|
-
File Structure
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
## 📁 File Structure
|
|
31
|
+
|
|
32
|
+
Create the following files **inside the `app/` directory** (recommended):
|
|
33
|
+
|
|
34
|
+
### Required Files
|
|
35
|
+
|
|
36
|
+
1. **Language files**
|
|
37
|
+
- Location: `app/lib/locales/`
|
|
38
|
+
- Files:
|
|
39
|
+
- `en.ts` – English translations
|
|
40
|
+
- `ar.ts` – Arabic translations
|
|
41
|
+
|
|
42
|
+
2. **I18nBoundary.tsx**
|
|
43
|
+
- Location: `app/lib/`
|
|
44
|
+
- Purpose: Client-only i18n wrapper
|
|
45
|
+
|
|
46
|
+
3. **LocaleSwitcher.tsx**
|
|
47
|
+
- Location: `app/components/i18n/`
|
|
48
|
+
- Purpose: Language switch button
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
35
52
|
that's all :D
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 🗂 Directory Tree
|
|
56
|
+
|
|
57
|
+
```txt
|
|
36
58
|
app/
|
|
37
|
-
├─ layout.tsx
|
|
38
|
-
├─ globals.css
|
|
39
|
-
├─ Header.tsx
|
|
59
|
+
├─ layout.tsx # Root layout
|
|
60
|
+
├─ globals.css # Global styles
|
|
61
|
+
├─ Header.tsx # Header (nav + LocaleSwitcher)
|
|
62
|
+
│
|
|
40
63
|
├─ components/
|
|
41
64
|
│ └─ i18n/
|
|
42
|
-
│ └─ LocaleSwitcher.tsx # Language
|
|
65
|
+
│ └─ LocaleSwitcher.tsx # Language switcher button
|
|
66
|
+
│
|
|
43
67
|
└─ lib/
|
|
44
68
|
├─ I18nBoundary.tsx # Client-only i18n wrapper
|
|
45
69
|
└─ locales/
|
|
46
|
-
├─ en.ts
|
|
47
|
-
└─ ar.ts
|
|
70
|
+
├─ en.ts # English translations
|
|
71
|
+
└─ ar.ts # Arabic translations
|
|
72
|
+
```
|
|
48
73
|
### 1. Create translation files
|
|
49
74
|
|
|
50
75
|
```typescript
|
|
@@ -72,7 +97,7 @@ export const ar = {
|
|
|
72
97
|
},
|
|
73
98
|
};
|
|
74
99
|
```
|
|
75
|
-
- ✅ feel free to deal with object:
|
|
100
|
+
- ✅ feel free to deal with language object:
|
|
76
101
|
```typescript
|
|
77
102
|
export const en = {
|
|
78
103
|
welcome: 'Welcome',
|
|
@@ -139,7 +164,7 @@ export default function RootLayout({ children }) {
|
|
|
139
164
|
}
|
|
140
165
|
```
|
|
141
166
|
### 3. Create LocaleSwitcher.tsx
|
|
142
|
-
/components/
|
|
167
|
+
/components/i18n/LocaleSwitcher.tsx (recommended)
|
|
143
168
|
also i provided 2 options:
|
|
144
169
|
- Choice 1: Single-click toggle button
|
|
145
170
|
- Choice 2:Hover dropdown list
|