@intlayer/docs 6.1.4 → 6.1.6-canary.0

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.
Files changed (75) hide show
  1. package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1366 -75
  2. package/blog/ar/nextjs-multilingual-seo-comparison.md +364 -0
  3. package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1288 -72
  4. package/blog/de/nextjs-multilingual-seo-comparison.md +362 -0
  5. package/blog/en/intlayer_with_next-i18next.mdx +431 -0
  6. package/blog/en/intlayer_with_next-intl.mdx +335 -0
  7. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +583 -336
  8. package/blog/en/nextjs-multilingual-seo-comparison.md +360 -0
  9. package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1144 -37
  10. package/blog/en-GB/nextjs-multilingual-seo-comparison.md +360 -0
  11. package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1236 -64
  12. package/blog/es/nextjs-multilingual-seo-comparison.md +363 -0
  13. package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1142 -75
  14. package/blog/fr/nextjs-multilingual-seo-comparison.md +362 -0
  15. package/blog/hi/nextjs-multilingual-seo-comparison.md +363 -0
  16. package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1130 -55
  17. package/blog/it/nextjs-multilingual-seo-comparison.md +363 -0
  18. package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1150 -76
  19. package/blog/ja/nextjs-multilingual-seo-comparison.md +362 -0
  20. package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1139 -73
  21. package/blog/ko/nextjs-multilingual-seo-comparison.md +362 -0
  22. package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1143 -76
  23. package/blog/pt/nextjs-multilingual-seo-comparison.md +362 -0
  24. package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1150 -74
  25. package/blog/ru/nextjs-multilingual-seo-comparison.md +370 -0
  26. package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  27. package/blog/tr/nextjs-multilingual-seo-comparison.md +362 -0
  28. package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1152 -75
  29. package/blog/zh/nextjs-multilingual-seo-comparison.md +394 -0
  30. package/dist/cjs/generated/blog.entry.cjs +16 -0
  31. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  32. package/dist/cjs/generated/docs.entry.cjs +16 -0
  33. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  34. package/dist/esm/generated/blog.entry.mjs +16 -0
  35. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  36. package/dist/esm/generated/docs.entry.mjs +16 -0
  37. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  38. package/dist/types/generated/blog.entry.d.ts +1 -0
  39. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  40. package/dist/types/generated/docs.entry.d.ts +1 -0
  41. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  42. package/docs/ar/component_i18n.md +186 -0
  43. package/docs/ar/vs_code_extension.md +48 -109
  44. package/docs/de/component_i18n.md +186 -0
  45. package/docs/de/vs_code_extension.md +46 -107
  46. package/docs/en/component_i18n.md +186 -0
  47. package/docs/en/interest_of_intlayer.md +2 -2
  48. package/docs/en/intlayer_with_nextjs_14.md +18 -1
  49. package/docs/en/intlayer_with_nextjs_15.md +18 -1
  50. package/docs/en/vs_code_extension.md +24 -114
  51. package/docs/en-GB/component_i18n.md +186 -0
  52. package/docs/en-GB/vs_code_extension.md +42 -103
  53. package/docs/es/component_i18n.md +182 -0
  54. package/docs/es/vs_code_extension.md +53 -114
  55. package/docs/fr/component_i18n.md +186 -0
  56. package/docs/fr/vs_code_extension.md +50 -111
  57. package/docs/hi/component_i18n.md +186 -0
  58. package/docs/hi/vs_code_extension.md +49 -110
  59. package/docs/it/component_i18n.md +186 -0
  60. package/docs/it/vs_code_extension.md +50 -111
  61. package/docs/ja/component_i18n.md +186 -0
  62. package/docs/ja/vs_code_extension.md +50 -111
  63. package/docs/ko/component_i18n.md +186 -0
  64. package/docs/ko/vs_code_extension.md +48 -109
  65. package/docs/pt/component_i18n.md +186 -0
  66. package/docs/pt/vs_code_extension.md +46 -107
  67. package/docs/ru/component_i18n.md +186 -0
  68. package/docs/ru/vs_code_extension.md +48 -109
  69. package/docs/tr/component_i18n.md +186 -0
  70. package/docs/tr/vs_code_extension.md +54 -115
  71. package/docs/zh/component_i18n.md +186 -0
  72. package/docs/zh/vs_code_extension.md +51 -105
  73. package/package.json +11 -11
  74. package/src/generated/blog.entry.ts +16 -0
  75. package/src/generated/docs.entry.ts +16 -0
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-03-17
3
- updatedAt: 2025-09-22
3
+ updatedAt: 2025-09-30
4
4
  title: Official VS Code Extension
5
5
  description: Learn how to use the Intlayer extension in VS Code to enhance your development workflow. Quickly navigate between localized content and manage your dictionaries efficiently.
6
6
  keywords:
@@ -23,92 +23,36 @@ slugs:
23
23
 
24
24
  [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) is the official Visual Studio Code extension for **Intlayer**, designed to improve the developer experience when working with localized content in your projects.
25
25
 
26
- ![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
26
+ ![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
27
27
 
28
28
  Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
29
29
 
30
30
  ## Features
31
31
 
32
- ### Instant Navigation
32
+ ![Fill dictionaries](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
33
33
 
34
- **Go to Definition Support** – Use `⌘ + Click` (Mac) or `Ctrl + Click` (Windows/Linux) on a `useIntlayer` key to open the corresponding content file instantly.
35
- **Seamless Integration** – Works effortlessly with **react-intlayer** and **next-intlayer** projects.
36
- **Multi-language Support** – Supports localized content across different languages.
37
- **VS Code Integration** – Smoothly integrates with VS Code’s navigation and command palette.
34
+ - **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.
35
+ - **Fill Dictionaries** – Fill dictionaries with content from your project.
38
36
 
39
- ### Dictionary Management Commands
37
+ ![List commands](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
40
38
 
41
- Manage your content dictionaries directly from VS Code:
39
+ - **Easy access to Intlayer Commands** – Build, push, pull, fill, test content dictionaries with ease.
42
40
 
43
- - **Build Dictionaries** – Generate content files based on your project structure.
44
- - **Push Dictionaries** – Upload the latest dictionary content to your repository.
45
- - **Pull Dictionaries** – Sync the latest dictionary content from your repository to your local environment.
46
- - **Fill Dictionaries** – Populate dictionaries with content from your project.
47
- - **Test Dictionaries** – Identify missing or incomplete translations.
41
+ ![Create content file](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
48
42
 
49
- ### Content Declaration Generator
43
+ - **Content Declaration Generator** – Create dictionary content files in various formats (`.ts`, `.esm`, `.cjs`, `.json`).
50
44
 
51
- Easily generate structured dictionary files in different formats:
45
+ ![Test dictionaties](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
52
46
 
53
- If you're currently working on a component, it will generate the `.content.{ts,tsx,js,jsx,mjs,cjs,json}` file for you.
47
+ - **Test Dictionaries** Test dictionaries for missing translations.
54
48
 
55
- Example of component:
49
+ ![Rebuild dictionary](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
56
50
 
57
- ```tsx fileName="src/components/MyComponent/index.tsx"
58
- const MyComponent = () => {
59
- const { myTranslatedContent } = useIntlayer("my-component");
51
+ - **Keep your dictionaries up to date** – Keep your dictionaries up to date with the latest content from your project.
60
52
 
61
- return <span>{myTranslatedContent}</span>;
62
- };
63
- ```
64
-
65
- Generated file in TypeScript format:
66
-
67
- ```tsx fileName="src/components/MyComponent/index.content.ts"
68
- import { t, type Dictionary } from "intlayer";
69
-
70
- const componentContent = {
71
- key: "my-component",
72
- content: {
73
- myTranslatedContent: t({
74
- en: "Hello World",
75
- es: "Hola Mundo",
76
- fr: "Bonjour le monde",
77
- }),
78
- },
79
- };
53
+ ![Intlayer Tab (Activity Bar)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
80
54
 
81
- export default componentContent;
82
- ```
83
-
84
- Available formats:
85
-
86
- - **TypeScript (`.ts`)**
87
- - **ES Module (`.esm`)**
88
- - **CommonJS (`.cjs`)**
89
- - **JSON (`.json`)**
90
-
91
- ### Intlayer Tab (Activity Bar)
92
-
93
- Open the Intlayer tab by clicking the Intlayer icon in the VS Code Activity Bar. It contains two views:
94
-
95
- - **Search**: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
96
- - **Dictionaries**: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
97
- - Click a file to open it in the editor.
98
- - Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
99
- - Use the context menu for item‑specific actions:
100
- - On a dictionary: Pull or Push
101
- - On a file: Fill Dictionary
102
- - When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.
103
-
104
- ## Installation
105
-
106
- You can install **Intlayer** directly from the VS Code Marketplace:
107
-
108
- 1. Open **VS Code**.
109
- 2. Go to the **Extensions Marketplace**.
110
- 3. Search for **"Intlayer"**.
111
- 4. Click **Install**.
55
+ - **Intlayer Tab (Activity Bar)** – Browse and search dictionaries from a dedicated side tab with toolbar and context actions (Build, Pull, Push, Fill, Refresh, Test, Create File).
112
56
 
113
57
  ## Usage
114
58
 
@@ -124,8 +68,6 @@ You can install **Intlayer** directly from the VS Code Marketplace:
124
68
  3. **Command-click** (`⌘+Click` on macOS) or **Ctrl+Click** (on Windows/Linux) on the key (e.g., `"app"`).
125
69
  4. VS Code will automatically open the corresponding dictionary file, e.g., `src/app.content.ts`.
126
70
 
127
- ### Managing Content Dictionaries
128
-
129
71
  ### Intlayer Tab (Activity Bar)
130
72
 
131
73
  Use the side tab to browse and manage dictionaries:
@@ -134,47 +76,20 @@ Use the side tab to browse and manage dictionaries:
134
76
  - In **Search**, type to filter dictionaries and entries in real time.
135
77
  - In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right‑click for context actions (Pull/Push on dictionaries, Fill on files). The current editor file auto‑reveals in the tree when applicable.
136
78
 
137
- #### Building Dictionaries
79
+ ### Accessing the commands
138
80
 
139
- Generate all dictionary content files with:
81
+ You can access the commands from the **Command Palette**.
140
82
 
141
83
  ```sh
142
84
  Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
143
85
  ```
144
86
 
145
- Search for **Build Dictionaries** and execute the command.
146
-
147
- #### Pushing Dictionaries
148
-
149
- Upload the latest dictionary content:
150
-
151
- 1. Open the **Command Palette**.
152
- 2. Search for **Push Dictionaries**.
153
- 3. Select the dictionaries to push and confirm.
154
-
155
- #### Pulling Dictionaries
156
-
157
- Sync the latest dictionary content:
158
-
159
- 1. Open the **Command Palette**.
160
- 2. Search for **Pull Dictionaries**.
161
- 3. Choose the dictionaries to pull.
162
-
163
- #### Filling Dictionaries
164
-
165
- Fill dictionaries with content from your project:
166
-
167
- 1. Open the **Command Palette**.
168
- 2. Search for **Fill Dictionaries**.
169
- 3. Run the command to populate dictionaries.
170
-
171
- #### Testing Dictionaries
172
-
173
- Validate dictionaries and find missing translations:
174
-
175
- 1. Open the **Command Palette**.
176
- 2. Search for **Test Dictionaries**.
177
- 3. Review the reported issues and fix as needed.
87
+ - **Build Dictionaries**
88
+ - **Push Dictionaries**
89
+ - **Pull Dictionaries**
90
+ - **Fill Dictionaries**
91
+ - **Test Dictionaries**
92
+ - **Create Dictionary File**
178
93
 
179
94
  ### Loading Environment Variables
180
95
 
@@ -197,16 +112,11 @@ The extension can load environment variables from your workspace to run Intlayer
197
112
 
198
113
  If your `.env` files live outside the workspace root, set the **Base Directory** in `Settings → Extensions → Intlayer`. The loader will look for `.env` files relative to that directory.
199
114
 
200
- #### Notes
201
-
202
- - The extension loads the first matching file and keeps any existing variables intact.
203
- - You’ll see an info message each time a file is successfully loaded.
204
- - If no candidate file is found, commands still run with your current environment variables.
205
-
206
115
  ## Doc History
207
116
 
208
117
  | Version | Date | Changes |
209
118
  | ------- | ---------- | ----------------------------------- |
119
+ | 6.1.5 | 2025-09-30 | Add demo gif |
210
120
  | 6.1.0 | 2025-09-24 | Added environment selection section |
211
121
  | 6.0.0 | 2025-09-22 | Intlayer Tab / Fill & Test commands |
212
122
  | 5.5.10 | 2025-06-29 | Init history |
@@ -0,0 +1,186 @@
1
+ ---
2
+ createdAt: 2024-03-07
3
+ updatedAt: 2025-09-30
4
+ title: Make a component multilingual (i18n library) in React and Next.js
5
+ description: Learn how to declare and retrieve localised content to build a multilingual React or Next.js component with Intlayer.
6
+ keywords:
7
+ - i18n
8
+ - component
9
+ - react
10
+ - multilingual
11
+ - next.js
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - component
16
+ - i18n
17
+ applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
18
+ youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
19
+ ---
20
+
21
+ # How to make a component multilingual (i18n) with Intlayer
22
+
23
+ This guide shows the minimal steps to make a UI component multilingual in two common setups:
24
+
25
+ - React (Vite/SPA)
26
+ - Next.js (App Router)
27
+
28
+ You will first declare your content, then retrieve it in your component.
29
+
30
+ ## 1) Declare your content (shared for React and Next.js)
31
+
32
+ Create a content declaration file near your component. This keeps translations close to where they are used and enables type safety.
33
+
34
+ ```ts fileName="component.content.ts"
35
+ import { t, type Dictionary } from "intlayer";
36
+
37
+ const componentContent = {
38
+ key: "component-example",
39
+ content: {
40
+ title: t({
41
+ en: "Hello",
42
+ fr: "Bonjour",
43
+ es: "Hola",
44
+ }),
45
+ description: t({
46
+ en: "A multilingual React component",
47
+ fr: "Un composant React multilingue",
48
+ es: "Un componente React multilingüe",
49
+ }),
50
+ },
51
+ } satisfies Dictionary;
52
+
53
+ export default componentContent;
54
+ ```
55
+
56
+ JSON is also supported if you prefer configuration files.
57
+
58
+ ```json fileName="component.content.json"
59
+ {
60
+ "$schema": "https://intlayer.org/schema.json",
61
+ "key": "component-example",
62
+ "content": {
63
+ "title": {
64
+ "nodeType": "translation",
65
+ "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
66
+ },
67
+ "description": {
68
+ "nodeType": "translation",
69
+ "translation": {
70
+ "en": "A multilingual React component",
71
+ "fr": "Un composant React multilingue",
72
+ "es": "Un componente React multilingüe"
73
+ }
74
+ }
75
+ }
76
+ }
77
+ ```
78
+
79
+ ## 2) Retrieve your content
80
+
81
+ ### Case A — React app (Vite/SPA)
82
+
83
+ Default approach: use `useIntlayer` to retrieve by key. This keeps components lean and typed.
84
+
85
+ ```tsx fileName="ComponentExample.tsx"
86
+ import { useIntlayer } from "react-intlayer";
87
+
88
+ export function ComponentExample() {
89
+ const content = useIntlayer("component-example");
90
+ return (
91
+ <div>
92
+ <h1>{content.title}</h1>
93
+ <p>{content.description}</p>
94
+ </div>
95
+ );
96
+ }
97
+ ```
98
+
99
+ Server-side rendering or outside provider: use `react-intlayer/server` and pass an explicit `locale` when required.
100
+
101
+ ```tsx fileName="ServerRenderedExample.tsx"
102
+ import { useIntlayer } from "react-intlayer/server";
103
+
104
+ export function ServerRenderedExample({ locale }: { locale: string }) {
105
+ const content = useIntlayer("component-example", locale);
106
+ return (
107
+ <>
108
+ <h1>{content.title}</h1>
109
+ <p>{content.description}</p>
110
+ </>
111
+ );
112
+ }
113
+ ```
114
+
115
+ Alternative: `useDictionary` can read an entire declared object if you prefer collocating structure at the call site.
116
+
117
+ ```tsx fileName="ComponentWithDictionary.tsx"
118
+ import { useDictionary } from "react-intlayer";
119
+ import componentContent from "./component.content";
120
+
121
+ export function ComponentWithDictionary() {
122
+ const { title, description } = useDictionary(componentContent);
123
+ return (
124
+ <div>
125
+ <h1>{title}</h1>
126
+ <p>{description}</p>
127
+ </div>
128
+ );
129
+ }
130
+ ```
131
+
132
+ ### Case B — Next.js (App Router)
133
+
134
+ Prefer server components for data safety and performance. Use `useIntlayer` from `next-intlayer/server` in server files, and `useIntlayer` from `next-intlayer` in client components.
135
+
136
+ ```tsx fileName="app/[locale]/example/ServerComponent.tsx"
137
+ import { useIntlayer } from "next-intlayer/server";
138
+
139
+ export default function ServerComponent() {
140
+ const content = useIntlayer("component-example");
141
+ return (
142
+ <>
143
+ <h1>{content.title}</h1>
144
+ <p>{content.description}</p>
145
+ </>
146
+ );
147
+ }
148
+ ```
149
+
150
+ ```tsx fileName="app/[locale]/example/ClientComponent.tsx"
151
+ "use client";
152
+
153
+ import { useIntlayer } from "next-intlayer";
154
+
155
+ export function ClientComponent() {
156
+ const content = useIntlayer("component-example");
157
+ return (
158
+ <div>
159
+ <h1>{content.title}</h1>
160
+ <p>{content.description}</p>
161
+ </div>
162
+ );
163
+ }
164
+ ```
165
+
166
+ Tip: For page metadata and SEO, you can also fetch content using `getIntlayer` and generate multilingual URLs via `getMultilingualUrls`.
167
+
168
+ ## Why Intlayer’s component approach is best
169
+
170
+ - **Collocation**: Content declarations live near components, reducing drift and improving reuse across design systems.
171
+ - **Type safety**: Keys and structures are strongly typed; missing translations surface at build-time rather than at runtime.
172
+ - **Server-first**: Works natively in server components for better security and performance; client hooks remain ergonomic.
173
+ - **Tree-shaking**: Only content used by the component is bundled, keeping payloads small in large applications.
174
+ - **DX & tooling**: Built-in middleware, SEO helpers, and optional Visual Editor/AI translations streamline everyday work.
175
+
176
+ See the comparisons and patterns in the Next.js-focused roundup: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
177
+
178
+ ## Related guides and references
179
+
180
+ - React setup (Vite): https://intlayer.org/doc/environment/vite-and-react
181
+ - React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
182
+ - TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
183
+ - Next.js setup: https://intlayer.org/doc/environment/nextjs
184
+ - Why Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
185
+
186
+ These pages include end-to-end setup, providers, routing, and SEO helpers.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-03-17
3
- updatedAt: 2025-09-22
3
+ updatedAt: 2025-09-30
4
4
  title: Official VS Code Extension
5
5
  description: Learn how to use the Intlayer extension in VS Code to enhance your development workflow. Quickly navigate between localised content and manage your dictionaries efficiently.
6
6
  keywords:
@@ -23,92 +23,36 @@ slugs:
23
23
 
24
24
  [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) is the official Visual Studio Code extension for **Intlayer**, designed to improve the developer experience when working with localised content in your projects.
25
25
 
26
- ![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
26
+ ![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
27
27
 
28
28
  Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
29
29
 
30
30
  ## Features
31
31
 
32
- ### Instant Navigation
32
+ ![Fill dictionaries](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
33
33
 
34
- **Go to Definition Support** – Use `⌘ + Click` (Mac) or `Ctrl + Click` (Windows/Linux) on a `useIntlayer` key to open the corresponding content file instantly.
35
- **Seamless Integration** – Works effortlessly with **react-intlayer** and **next-intlayer** projects.
36
- **Multi-language Support** – Supports localised content across different languages.
37
- **VS Code Integration** – Smoothly integrates with VS Code’s navigation and command palette.
38
-
39
- ### Dictionary Management Commands
40
-
41
- Manage your content dictionaries directly from VS Code:
42
-
43
- - **Build Dictionaries** – Generate content files based on your project structure.
44
- - **Push Dictionaries** – Upload the latest dictionary content to your repository.
45
- - **Pull Dictionaries** – Synchronise the latest dictionary content from your repository to your local environment.
34
+ - **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.
46
35
  - **Fill Dictionaries** – Populate dictionaries with content from your project.
47
- - **Test Dictionaries** – Identify missing or incomplete translations.
48
-
49
- ### Content Declaration Generator
50
-
51
- Easily generate structured dictionary files in different formats:
52
36
 
53
- If you are currently working on a component, it will generate the `.content.{ts,tsx,js,jsx,mjs,cjs,json}` file for you.
37
+ ![List commands](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
54
38
 
55
- Example of component:
39
+ - **Easy access to Intlayer Commands** – Build, push, pull, fill, test content dictionaries with ease.
56
40
 
57
- ```tsx fileName="src/components/MyComponent/index.tsx"
58
- const MyComponent = () => {
59
- const { myTranslatedContent } = useIntlayer("my-component");
41
+ ![Create content file](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
60
42
 
61
- return <span>{myTranslatedContent}</span>;
62
- };
63
- ```
64
-
65
- Generated file in TypeScript format:
43
+ - **Content Declaration Generator** – Create dictionary content files in various formats (`.ts`, `.esm`, `.cjs`, `.json`).
66
44
 
67
- ```tsx fileName="src/components/MyComponent/index.content.ts"
68
- import { t, type Dictionary } from "intlayer";
45
+ ![Test dictionaties](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
69
46
 
70
- const componentContent = {
71
- key: "my-component",
72
- content: {
73
- myTranslatedContent: t({
74
- en: "Hello World",
75
- es: "Hola Mundo",
76
- fr: "Bonjour le monde",
77
- }),
78
- },
79
- };
47
+ - **Test Dictionaries** – Test dictionaries for missing translations.
80
48
 
81
- export default componentContent;
82
- ```
49
+ ![Rebuild dictionary](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
83
50
 
84
- Available formats:
51
+ - **Keep your dictionaries up to date** – Keep your dictionaries up to date with the latest content from your project.
85
52
 
86
- - **TypeScript (`.ts`)**
87
- - **ES Module (`.esm`)**
88
- - **CommonJS (`.cjs`)**
89
- - **JSON (`.json`)**
90
-
91
- ### Intlayer Tab (Activity Bar)
53
+ ![Intlayer Tab (Activity Bar)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
92
54
 
93
- Open the Intlayer tab by clicking the Intlayer icon in the VS Code Activity Bar. It contains two views:
94
-
95
- - **Search**: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
96
- - **Dictionaries**: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
97
- - Click a file to open it in the editor.
98
- - Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
99
- - Use the context menu for item‑specific actions:
100
- - On a dictionary: Pull or Push
101
- - On a file: Fill Dictionary
102
- - When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.
103
-
104
- ## Installation
105
-
106
- You can install **Intlayer** directly from the VS Code Marketplace:
107
-
108
- 1. Open **VS Code**.
109
- 2. Go to the **Extensions Marketplace**.
110
- 3. Search for **"Intlayer"**.
111
- 4. Click **Install**.
55
+ - **Intlayer Tab (Activity Bar)** Browse and search dictionaries from a dedicated side tab with toolbar and context actions (Build, Pull, Push, Fill, Refresh, Test, Create File).
112
56
 
113
57
  ## Usage
114
58
 
@@ -124,60 +68,55 @@ You can install **Intlayer** directly from the VS Code Marketplace:
124
68
  3. **Command-click** (`⌘+Click` on macOS) or **Ctrl+Click** (on Windows/Linux) on the key (e.g., `"app"`).
125
69
  4. VS Code will automatically open the corresponding dictionary file, e.g., `src/app.content.ts`.
126
70
 
127
- ### Managing Content Dictionaries
128
-
129
71
  ### Intlayer Tab (Activity Bar)
130
72
 
131
73
  Use the side tab to browse and manage dictionaries:
132
74
 
133
75
  - Open the Intlayer icon in the Activity Bar.
134
76
  - In **Search**, type to filter dictionaries and entries in real time.
135
- - In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Rightclick for context actions (Pull/Push on dictionaries, Fill on files). The current editor file autoreveals in the tree when applicable.
77
+ - In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right-click for context actions (Pull/Push on dictionaries, Fill on files). The current editor file auto-reveals in the tree when applicable.
136
78
 
137
- #### Building Dictionaries
79
+ ### Accessing the commands
138
80
 
139
- Generate all dictionary content files with:
81
+ You can access the commands from the **Command Palette**.
140
82
 
141
83
  ```sh
142
84
  Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
143
85
  ```
144
86
 
145
- Search for **Build Dictionaries** and execute the command.
146
-
147
- #### Pushing Dictionaries
148
-
149
- Upload the latest dictionary content:
150
-
151
- 1. Open the **Command Palette**.
152
- 2. Search for **Push Dictionaries**.
153
- 3. Select the dictionaries to push and confirm.
154
-
155
- #### Pulling Dictionaries
87
+ - **Build Dictionaries**
88
+ - **Push Dictionaries**
89
+ - **Pull Dictionaries**
90
+ - **Fill Dictionaries**
91
+ - **Test Dictionaries**
92
+ - **Create Dictionary File**
156
93
 
157
- Sync the latest dictionary content:
94
+ ### Loading Environment Variables
158
95
 
159
- 1. Open the **Command Palette**.
160
- 2. Search for **Pull Dictionaries**.
161
- 3. Choose the dictionaries to pull.
96
+ Intlayer recommends storing your AI API keys, as well as the Intlayer client ID and secret, in environment variables.
162
97
 
163
- #### Filling Dictionaries
98
+ The extension can load environment variables from your workspace to run Intlayer commands with the correct context.
164
99
 
165
- Fill dictionaries with content from your project:
100
+ - **Load order (by priority)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
101
+ - **Non-destructive**: existing `process.env` values are not overridden.
102
+ - **Scope**: files are resolved from the configured base directory (defaults to the workspace root).
166
103
 
167
- 1. Open the **Command Palette**.
168
- 2. Search for **Fill Dictionaries**.
169
- 3. Run the command to populate dictionaries.
104
+ #### Selecting the active environment
170
105
 
171
- #### Testing Dictionaries
106
+ - **Command Palette**: open the palette and run `Intlayer: Select Environment`, then choose the environment (e.g., `development`, `staging`, `production`). The extension will attempt to load the first available file in the priority list above and show a notification like “Loaded env from .env.<env>.local”.
107
+ - **Settings**: go to `Settings → Extensions → Intlayer`, and set:
108
+ - **Environment**: the environment name used to resolve `.env.<env>*` files.
109
+ - (Optional) **Env File**: an explicit path to a `.env` file. When provided, it takes precedence over the inferred list.
172
110
 
173
- Validate dictionaries and find missing translations:
111
+ #### Monorepos and custom directories
174
112
 
175
- 1. Open the **Command Palette**.
176
- 2. Search for **Test Dictionaries**.
177
- 3. Review the reported issues and fix as needed.
113
+ If your `.env` files reside outside the workspace root, set the **Base Directory** in `Settings → Extensions → Intlayer`. The loader will search for `.env` files relative to that directory.
178
114
 
179
115
  ## Doc History
180
116
 
181
- | Version | Date | Changes |
182
- | ------- | ---------- | ------------ |
183
- | 5.5.10 | 2025-06-29 | Init history |
117
+ | Version | Date | Changes |
118
+ | ------- | ---------- | ----------------------------------- |
119
+ | 6.1.5 | 2025-09-30 | Added demo gif |
120
+ | 6.1.0 | 2025-09-24 | Added environment selection section |
121
+ | 6.0.0 | 2025-09-22 | Intlayer Tab / Fill & Test commands |
122
+ | 5.5.10 | 2025-06-29 | Initial history |