@intlayer/docs 9.2.0 → 9.3.1
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 +24 -24
- package/blog/ar/index.md +1 -1
- package/blog/ar/rag_powered_documentation_assistant.md +1 -1
- package/blog/de/index.md +1 -1
- package/blog/en/index.md +1 -1
- package/blog/en-GB/index.md +1 -1
- package/blog/es/index.md +1 -1
- package/blog/fr/index.md +1 -1
- package/blog/hi/index.md +1 -1
- package/blog/id/index.md +1 -1
- package/blog/it/index.md +1 -1
- package/blog/ja/index.md +1 -1
- package/blog/ko/index.md +1 -1
- package/blog/pl/index.md +1 -1
- package/blog/pl/rag_powered_documentation_assistant.md +1 -1
- package/blog/pt/index.md +1 -1
- package/blog/ru/index.md +1 -1
- package/blog/uk/index.md +1 -1
- package/blog/vi/index.md +1 -1
- package/blog/zh/index.md +1 -1
- package/dist/cjs/_virtual/_rolldown/runtime.cjs +1 -2
- package/dist/cjs/authors2.cjs +0 -1
- package/dist/cjs/common.cjs +24 -1
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/blog.entry.cjs +35 -6
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +35 -6
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/cjs/generated/frequentQuestions.entry.cjs +35 -6
- package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
- package/dist/cjs/generated/legal.entry.cjs +35 -6
- package/dist/cjs/generated/legal.entry.cjs.map +1 -1
- package/dist/esm/common.mjs +24 -1
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +35 -6
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +35 -6
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/esm/generated/frequentQuestions.entry.mjs +35 -6
- package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
- package/dist/esm/generated/legal.entry.mjs +35 -6
- package/dist/esm/generated/legal.entry.mjs.map +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
- package/dist/types/generated/legal.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +58 -25
- package/docs/ar/configuration.md +10 -10
- package/docs/ar/interest_of_intlayer.md +24 -22
- package/docs/ar/intlayer_with_express.md +1 -1
- package/docs/ar/intlayer_with_svelte_kit.md +1 -1
- package/docs/ar/intlayer_with_tanstack+solid.md +5 -3
- package/docs/ar/intlayer_with_tanstack.md +5 -3
- package/docs/ar/live-sync.md +4 -0
- package/docs/ar/lsp.md +114 -175
- package/docs/ar/readme.md +25 -25
- package/docs/bn/bundle_optimization.md +58 -25
- package/docs/bn/configuration.md +10 -10
- package/docs/bn/interest_of_intlayer.md +24 -22
- package/docs/cs/bundle_optimization.md +58 -25
- package/docs/cs/configuration.md +10 -10
- package/docs/cs/interest_of_intlayer.md +24 -22
- package/docs/de/bundle_optimization.md +58 -25
- package/docs/de/configuration.md +10 -10
- package/docs/de/interest_of_intlayer.md +24 -22
- package/docs/de/intlayer_with_svelte_kit.md +1 -1
- package/docs/de/intlayer_with_tanstack+solid.md +5 -3
- package/docs/de/intlayer_with_tanstack.md +5 -3
- package/docs/de/live-sync.md +4 -0
- package/docs/de/lsp.md +111 -172
- package/docs/de/readme.md +24 -24
- package/docs/en/bundle_optimization.md +51 -23
- package/docs/en/configuration.md +10 -10
- package/docs/en/interest_of_intlayer.md +24 -22
- package/docs/en/intlayer_with_svelte_kit.md +1 -1
- package/docs/en/intlayer_with_tanstack+solid.md +5 -3
- package/docs/en/intlayer_with_tanstack.md +5 -3
- package/docs/en/live-sync.md +4 -0
- package/docs/en/lsp.md +109 -170
- package/docs/en/readme.md +24 -24
- package/docs/en-GB/bundle_optimization.md +58 -25
- package/docs/en-GB/configuration.md +10 -10
- package/docs/en-GB/interest_of_intlayer.md +24 -22
- package/docs/en-GB/intlayer_with_svelte_kit.md +1 -1
- package/docs/en-GB/intlayer_with_tanstack+solid.md +5 -3
- package/docs/en-GB/intlayer_with_tanstack.md +5 -3
- package/docs/en-GB/live-sync.md +4 -0
- package/docs/en-GB/lsp.md +109 -170
- package/docs/en-GB/readme.md +24 -24
- package/docs/es/bundle_optimization.md +58 -25
- package/docs/es/configuration.md +10 -10
- package/docs/es/interest_of_intlayer.md +24 -22
- package/docs/es/intlayer_with_svelte_kit.md +1 -1
- package/docs/es/intlayer_with_tanstack+solid.md +5 -3
- package/docs/es/intlayer_with_tanstack.md +5 -3
- package/docs/es/live-sync.md +4 -0
- package/docs/es/lsp.md +114 -175
- package/docs/es/readme.md +24 -24
- package/docs/fr/bundle_optimization.md +58 -25
- package/docs/fr/configuration.md +10 -10
- package/docs/fr/interest_of_intlayer.md +24 -22
- package/docs/fr/intlayer_with_svelte_kit.md +1 -1
- package/docs/fr/intlayer_with_tanstack+solid.md +5 -3
- package/docs/fr/intlayer_with_tanstack.md +5 -3
- package/docs/fr/live-sync.md +4 -0
- package/docs/fr/lsp.md +110 -171
- package/docs/fr/readme.md +24 -24
- package/docs/hi/bundle_optimization.md +58 -25
- package/docs/hi/configuration.md +10 -10
- package/docs/hi/interest_of_intlayer.md +24 -22
- package/docs/hi/intlayer_with_express.md +1 -1
- package/docs/hi/intlayer_with_svelte_kit.md +1 -1
- package/docs/hi/intlayer_with_tanstack+solid.md +5 -3
- package/docs/hi/intlayer_with_tanstack.md +5 -3
- package/docs/hi/live-sync.md +4 -0
- package/docs/hi/lsp.md +113 -174
- package/docs/hi/readme.md +24 -24
- package/docs/id/bundle_optimization.md +58 -25
- package/docs/id/configuration.md +10 -10
- package/docs/id/interest_of_intlayer.md +24 -22
- package/docs/id/intlayer_with_svelte_kit.md +1 -1
- package/docs/id/intlayer_with_tanstack+solid.md +5 -3
- package/docs/id/intlayer_with_tanstack.md +5 -3
- package/docs/id/live-sync.md +4 -0
- package/docs/id/lsp.md +113 -174
- package/docs/id/readme.md +24 -24
- package/docs/it/bundle_optimization.md +58 -25
- package/docs/it/configuration.md +10 -10
- package/docs/it/interest_of_intlayer.md +24 -22
- package/docs/it/intlayer_with_svelte_kit.md +1 -1
- package/docs/it/intlayer_with_tanstack+solid.md +5 -3
- package/docs/it/intlayer_with_tanstack.md +5 -3
- package/docs/it/live-sync.md +4 -0
- package/docs/it/lsp.md +115 -176
- package/docs/it/readme.md +24 -24
- package/docs/ja/bundle_optimization.md +58 -25
- package/docs/ja/configuration.md +10 -10
- package/docs/ja/interest_of_intlayer.md +24 -22
- package/docs/ja/intlayer_with_tanstack+solid.md +5 -3
- package/docs/ja/intlayer_with_tanstack.md +5 -3
- package/docs/ja/live-sync.md +4 -0
- package/docs/ja/lsp.md +113 -174
- package/docs/ja/readme.md +24 -24
- package/docs/ko/bundle_optimization.md +58 -25
- package/docs/ko/configuration.md +10 -10
- package/docs/ko/interest_of_intlayer.md +24 -22
- package/docs/ko/intlayer_with_svelte_kit.md +1 -1
- package/docs/ko/intlayer_with_tanstack+solid.md +5 -3
- package/docs/ko/intlayer_with_tanstack.md +5 -3
- package/docs/ko/live-sync.md +4 -0
- package/docs/ko/lsp.md +112 -173
- package/docs/ko/readme.md +24 -24
- package/docs/nl/bundle_optimization.md +58 -25
- package/docs/nl/configuration.md +10 -10
- package/docs/nl/interest_of_intlayer.md +24 -22
- package/docs/pl/bundle_optimization.md +58 -25
- package/docs/pl/configuration.md +10 -10
- package/docs/pl/interest_of_intlayer.md +4 -2
- package/docs/pl/intlayer_with_svelte_kit.md +1 -1
- package/docs/pl/intlayer_with_tanstack+solid.md +5 -3
- package/docs/pl/intlayer_with_tanstack.md +5 -3
- package/docs/pl/live-sync.md +4 -0
- package/docs/pl/lsp.md +115 -176
- package/docs/pl/readme.md +24 -24
- package/docs/pt/bundle_optimization.md +58 -24
- package/docs/pt/configuration.md +10 -10
- package/docs/pt/interest_of_intlayer.md +24 -22
- package/docs/pt/intlayer_with_svelte_kit.md +1 -1
- package/docs/pt/intlayer_with_tanstack+solid.md +5 -3
- package/docs/pt/intlayer_with_tanstack.md +5 -3
- package/docs/pt/live-sync.md +4 -0
- package/docs/pt/lsp.md +113 -174
- package/docs/pt/readme.md +24 -24
- package/docs/ru/bundle_optimization.md +58 -25
- package/docs/ru/configuration.md +10 -10
- package/docs/ru/interest_of_intlayer.md +24 -22
- package/docs/ru/intlayer_with_nextjs_14.md +1 -1
- package/docs/ru/intlayer_with_nextjs_15.md +1 -1
- package/docs/ru/intlayer_with_svelte_kit.md +1 -1
- package/docs/ru/intlayer_with_tanstack+solid.md +5 -3
- package/docs/ru/intlayer_with_tanstack.md +5 -3
- package/docs/ru/live-sync.md +4 -0
- package/docs/ru/lsp.md +112 -173
- package/docs/ru/readme.md +24 -24
- package/docs/tr/bundle_optimization.md +58 -25
- package/docs/tr/configuration.md +10 -10
- package/docs/tr/interest_of_intlayer.md +24 -22
- package/docs/tr/intlayer_with_svelte_kit.md +1 -1
- package/docs/tr/intlayer_with_tanstack+solid.md +5 -3
- package/docs/tr/intlayer_with_tanstack.md +5 -3
- package/docs/tr/live-sync.md +4 -0
- package/docs/tr/lsp.md +113 -174
- package/docs/tr/readme.md +24 -24
- package/docs/uk/bundle_optimization.md +58 -25
- package/docs/uk/configuration.md +10 -10
- package/docs/uk/interest_of_intlayer.md +4 -2
- package/docs/uk/intlayer_with_svelte_kit.md +1 -1
- package/docs/uk/intlayer_with_tanstack+solid.md +5 -3
- package/docs/uk/intlayer_with_tanstack.md +5 -3
- package/docs/uk/live-sync.md +4 -0
- package/docs/uk/lsp.md +113 -174
- package/docs/uk/per_locale_file.md +1 -1
- package/docs/uk/readme.md +24 -24
- package/docs/ur/bundle_optimization.md +58 -25
- package/docs/ur/configuration.md +10 -10
- package/docs/ur/interest_of_intlayer.md +24 -22
- package/docs/vi/bundle_optimization.md +58 -25
- package/docs/vi/configuration.md +10 -10
- package/docs/vi/interest_of_intlayer.md +24 -22
- package/docs/vi/intlayer_with_svelte_kit.md +1 -1
- package/docs/vi/intlayer_with_tanstack+solid.md +5 -3
- package/docs/vi/intlayer_with_tanstack.md +5 -3
- package/docs/vi/live-sync.md +4 -0
- package/docs/vi/lsp.md +115 -176
- package/docs/vi/readme.md +24 -24
- package/docs/zh/bundle_optimization.md +58 -25
- package/docs/zh/configuration.md +10 -10
- package/docs/zh/interest_of_intlayer.md +24 -22
- package/docs/zh/intlayer_with_svelte_kit.md +1 -1
- package/docs/zh/intlayer_with_tanstack+solid.md +5 -3
- package/docs/zh/intlayer_with_tanstack.md +5 -3
- package/docs/zh/live-sync.md +4 -0
- package/docs/zh/lsp.md +113 -174
- package/docs/zh/readme.md +21 -21
- package/docs/zh-TW/bundle_optimization.md +58 -25
- package/docs/zh-TW/interest_of_intlayer.md +24 -22
- package/package.json +7 -7
- package/src/common.ts +39 -2
- package/src/generated/blog.entry.ts +39 -7
- package/src/generated/docs.entry.ts +39 -7
- package/src/generated/frequentQuestions.entry.ts +39 -7
- package/src/generated/legal.entry.ts +39 -7
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-11-25
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-08-09
|
|
4
4
|
title: Optimizing i18n Bundle Size & Performance
|
|
5
5
|
description: Reduce application bundle size by optimizing internationalization (i18n) content. Learn how to leverage tree shaking and lazy loading for dictionaries with Intlayer.
|
|
6
6
|
keywords:
|
|
@@ -16,6 +16,9 @@ slugs:
|
|
|
16
16
|
- concept
|
|
17
17
|
- bundle-optimization
|
|
18
18
|
history:
|
|
19
|
+
- version: 9.2.1
|
|
20
|
+
date: 2026-08-09
|
|
21
|
+
changes: "`purge` and `minify` now work on Next.js through `@intlayer/swc` — no `babel.config.js` required"
|
|
19
22
|
- version: 8.12.0
|
|
20
23
|
date: 2026-06-24
|
|
21
24
|
changes: "List Babel plugins in required pipeline order (extract → purge → minify → optimize) in the reference tables"
|
|
@@ -225,6 +228,20 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
225
228
|
| Dictionary minify | Same as `intlayerMinifyBabelPlugin` JSON-write pass |
|
|
226
229
|
| Babel transform | Same as `intlayerMinifyBabelPlugin` source-code rename + `intlayerOptimizeBabelPlugin` |
|
|
227
230
|
|
|
231
|
+
### SWC plugin (`@intlayer/swc`)
|
|
232
|
+
|
|
233
|
+
Next.js users **never configure these directly** either. Since **v9.2.1**, `withIntlayer()` in `next.config.ts` runs the full pipeline — purge, minify and import rewriting — from the `build.purge` and `build.minify` flags alone.
|
|
234
|
+
|
|
235
|
+
The work is split in two, because an SWC Wasm plugin transforms one file at a time with no file-system access:
|
|
236
|
+
|
|
237
|
+
| Pass | Where it runs | What it does |
|
|
238
|
+
| :---------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------- |
|
|
239
|
+
| Usage analysis + JSON purge/minify | Node, inside `withIntlayer()` | Reads every component source file, rewrites `.intlayer/**/*.json`, produces rename tables |
|
|
240
|
+
| Source rewriting (`content.title` → `.a`) | `@intlayer/swc` (Wasm) | Applies the rename tables to the matching property accesses in your code |
|
|
241
|
+
| Import rewriting (`useIntlayer` → dict) | `@intlayer/swc` (Wasm) | Same as `intlayerOptimizeBabelPlugin` |
|
|
242
|
+
|
|
243
|
+
Deciding _which_ fields are unused and _what_ alias each one gets requires cross-file state and file I/O, so that half runs in Node; the SWC plugin only receives the resulting tables.
|
|
244
|
+
|
|
228
245
|
## Setup by Platform
|
|
229
246
|
|
|
230
247
|
<Tabs>
|
|
@@ -232,10 +249,12 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
232
249
|
|
|
233
250
|
### Next.js
|
|
234
251
|
|
|
235
|
-
Next.js requires the `@intlayer/swc` plugin for the optimize (import rewriting)
|
|
252
|
+
Next.js requires the `@intlayer/swc` plugin, because Next.js uses SWC for builds. Since **v9.2.1** this single package covers the whole pipeline — optimize (import rewriting), purge and minify.
|
|
236
253
|
|
|
237
254
|
> This plugin is not installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
|
|
238
255
|
|
|
256
|
+
> **Next.js 16.1.0 is the minimum version.** It is the first release built on SWC's forward-compatible Wasm plugin ABI; earlier releases reject the plugin. `withIntlayer` reads your Next.js version and simply does not register the plugin below 16.1.0 — those builds still succeed, they just run without bundle optimization.
|
|
257
|
+
|
|
239
258
|
<Tabs>
|
|
240
259
|
<Tab value="npm">
|
|
241
260
|
|
|
@@ -270,33 +289,40 @@ intlayer-swc-plugin = "*"
|
|
|
270
289
|
|
|
271
290
|
Once installed, Intlayer will automatically detect and use the plugin.
|
|
272
291
|
|
|
273
|
-
|
|
292
|
+
The **purge and minify** passes (field removal and field renaming) require no extra package and no `babel.config.js`. Wrap your config with `withIntlayer` and toggle the flags in `intlayer.config.ts`:
|
|
274
293
|
|
|
275
|
-
```
|
|
276
|
-
|
|
294
|
+
```typescript fileName="next.config.ts"
|
|
295
|
+
import { withIntlayer } from "next-intlayer/server";
|
|
296
|
+
import type { NextConfig } from "next";
|
|
297
|
+
|
|
298
|
+
const nextConfig: NextConfig = {/* your config */};
|
|
299
|
+
|
|
300
|
+
export default withIntlayer(nextConfig);
|
|
277
301
|
```
|
|
278
302
|
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
intlayerPurgeBabelPlugin,
|
|
282
|
-
intlayerMinifyBabelPlugin,
|
|
283
|
-
getPurgePluginOptions,
|
|
284
|
-
getMinifyPluginOptions,
|
|
285
|
-
} = require("@intlayer/babel");
|
|
303
|
+
```typescript fileName="intlayer.config.ts"
|
|
304
|
+
import type { IntlayerConfig } from "intlayer";
|
|
286
305
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
// Minify: rename content field keys in JSON + source code
|
|
293
|
-
[intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
|
|
294
|
-
// Note: intlayerOptimizeBabelPlugin is NOT needed here because
|
|
295
|
-
// @intlayer/swc handles the useIntlayer → useDictionary rewrite.
|
|
296
|
-
],
|
|
306
|
+
const config: IntlayerConfig = {
|
|
307
|
+
build: {
|
|
308
|
+
purge: true, // remove unused content fields from bundled JSON
|
|
309
|
+
minify: true, // rename content field keys to short aliases
|
|
310
|
+
},
|
|
297
311
|
};
|
|
312
|
+
|
|
313
|
+
export default config;
|
|
298
314
|
```
|
|
299
315
|
|
|
316
|
+
During `next build`, `withIntlayer` analyzes your sources, rewrites the compiled dictionaries, and forwards the resulting field-rename tables to `@intlayer/swc`, which updates the matching property accesses in your code.
|
|
317
|
+
|
|
318
|
+
> Use the async `withIntlayer`, not `withIntlayerSync`. The sync variant does not run the analysis pipeline, so purge and minify have no effect with it.
|
|
319
|
+
|
|
320
|
+
> Purge and minify run on `next build` only — the optimize pipeline is off during `next dev`.
|
|
321
|
+
|
|
322
|
+
> They are also disabled when compat-adapter callers are configured (`swcExtraCallers`, set by the compat packages such as `@intlayer/next-intl` or `@intlayer/react-i18next`): those call sites are invisible to the usage analyzer, so purging would remove fields the code still reads. Import rewriting stays active.
|
|
323
|
+
|
|
324
|
+
**Earlier versions (before 9.2.1)** required `@intlayer/babel` and a `babel.config.js` declaring `intlayerPurgeBabelPlugin` and `intlayerMinifyBabelPlugin`. That file is no longer needed and can be deleted.
|
|
325
|
+
|
|
300
326
|
</Tab>
|
|
301
327
|
<Tab value="vite">
|
|
302
328
|
|
|
@@ -452,6 +478,8 @@ export default config;
|
|
|
452
478
|
|
|
453
479
|
> Minification is skipped when `optimize` is `false` or when `editor.enabled` is `true` (the visual editor requires the original field names to allow editing).
|
|
454
480
|
|
|
481
|
+
> On Next.js, minification is also skipped when `@intlayer/swc` is not installed or cannot be loaded (Next.js below 16.1.0). The plugin is the half that rewrites the source accesses, so renaming the dictionaries without it would leave your code reading field names that no longer exist.
|
|
482
|
+
|
|
455
483
|
> Minification is also skipped for dictionaries loaded via `importMode: 'fetch'` because their JSON is served from a remote API using the original field names — renaming the client-side keys would break the server/client contract.
|
|
456
484
|
|
|
457
485
|
### Purging (unused field removal)
|
|
@@ -480,7 +508,7 @@ export default config;
|
|
|
480
508
|
{ "title": "…", "subtitle": "…" }
|
|
481
509
|
```
|
|
482
510
|
|
|
483
|
-
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`.
|
|
511
|
+
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`. On Next.js it is additionally skipped when `@intlayer/swc` is unavailable, and when compat-adapter callers are configured.
|
|
484
512
|
|
|
485
513
|
> Purge is also skipped conservatively when a source file cannot be parsed, or when the result of `useIntlayer` is assigned to a variable and passed around in ways the static analyser cannot follow (e.g. spread into an object, passed as a prop without destructuring). In those cases the full dictionary is kept.
|
|
486
514
|
|
package/docs/en/configuration.md
CHANGED
|
@@ -407,7 +407,7 @@ const config: IntlayerConfig = {
|
|
|
407
407
|
ai: {
|
|
408
408
|
/**
|
|
409
409
|
* AI provider to use.
|
|
410
|
-
* Options: 'openai', 'anthropic', 'mistral', 'deepseek', 'gemini', 'ollama', 'openrouter', 'alibaba', 'fireworks', 'groq', 'huggingface', 'bedrock', 'googlevertex', 'togetherai', 'lmstudio'
|
|
410
|
+
* Options: 'openai', 'anthropic', 'mistral', 'deepseek', 'gemini', 'ollama', 'openrouter', 'alibaba', 'fireworks', 'groq', 'huggingface', 'bedrock', 'googlevertex', 'togetherai', 'lmstudio', 'moonshotai'
|
|
411
411
|
* Default: 'openai'
|
|
412
412
|
*/
|
|
413
413
|
provider: "openai",
|
|
@@ -1042,15 +1042,15 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
|
|
|
1042
1042
|
- **Together.ai**
|
|
1043
1043
|
- **LM Studio**
|
|
1044
1044
|
|
|
1045
|
-
| Field | Description | Type
|
|
1046
|
-
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
1047
|
-
| `provider` | The provider to use for the AI features of Intlayer. | `'openai'` | <br/> `'anthropic'` | <br/> `'mistral'` | <br/> `'deepseek'` | <br/> `'gemini'` | <br/> `'ollama'` | <br/> `'openrouter'` | <br/> `'alibaba'` | <br/> `'fireworks'` | <br/> `'groq'` | <br/> `'huggingface'` | <br/> `'bedrock'` | <br/> `'googleaistudio'` | <br/> `'googlevertex'` | <br/> `'togetherai'` | <br/> `'lmstudio'` | `undefined` | `'anthropic'` | Different providers require different API keys and have different pricing. |
|
|
1048
|
-
| `model` | The model to use for AI features. | `string`
|
|
1049
|
-
| `temperature` | Controls the randomness of AI responses. | `number`
|
|
1050
|
-
| `apiKey` | Your API key for the selected provider. | `string`
|
|
1051
|
-
| `applicationContext` | Additional context about your application to help the AI generate more accurate translations (domain, audience, tone, terminology). | `string`
|
|
1052
|
-
| `baseURL` | The base URL for the AI API. | `string`
|
|
1053
|
-
| `dataSerialization` | Data serialization format for AI features. | `'json'` | <br/> `'toon'`
|
|
1045
|
+
| Field | Description | Type | Default | Example | Note |
|
|
1046
|
+
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1047
|
+
| `provider` | The provider to use for the AI features of Intlayer. | `'openai'` | <br/> `'anthropic'` | <br/> `'mistral'` | <br/> `'deepseek'` | <br/> `'gemini'` | <br/> `'ollama'` | <br/> `'openrouter'` | <br/> `'alibaba'` | <br/> `'fireworks'` | <br/> `'groq'` | <br/> `'huggingface'` | <br/> `'bedrock'` | <br/> `'googleaistudio'` | <br/> `'googlevertex'` | <br/> `'togetherai'` | <br/> `'lmstudio'` | <br/> `'moonshotai'` | `undefined` | `'anthropic'` | Different providers require different API keys and have different pricing. |
|
|
1048
|
+
| `model` | The model to use for AI features. | `string` | None | `'gpt-4o-2024-11-20'` | Specific model varies by provider. |
|
|
1049
|
+
| `temperature` | Controls the randomness of AI responses. | `number` | None | `0.1` | Higher temperature = more creative and less predictable. |
|
|
1050
|
+
| `apiKey` | Your API key for the selected provider. | `string` | None | `process.env.OPENAI_API_KEY` | Keep secret; store in environment variables. |
|
|
1051
|
+
| `applicationContext` | Additional context about your application to help the AI generate more accurate translations (domain, audience, tone, terminology). | `string` | None | `'My application context'` | Can be used to add rules (e.g. `"You should not transform urls"`). |
|
|
1052
|
+
| `baseURL` | The base URL for the AI API. | `string` | None | `'https://api.openai.com/v1'` <br/> `'http://localhost:5000'` | Can point to a local or custom AI API endpoint. |
|
|
1053
|
+
| `dataSerialization` | Data serialization format for AI features. | `'json'` | <br/> `'toon'` | `undefined` | `'toon'` | • `'json'`: standard, reliable; uses more tokens.<br/>• `'toon'`: fewer tokens, less consistent.<br/>• Additional parameters are passed to the AI model as context (reasoning effort, verbosity, etc.). |
|
|
1054
1054
|
|
|
1055
1055
|
### Build Configuration
|
|
1056
1056
|
|
|
@@ -207,7 +207,7 @@ export const ComponentExample = () => {
|
|
|
207
207
|
This approach allows you to:
|
|
208
208
|
|
|
209
209
|
1. **Increase the speed of development**
|
|
210
|
-
- `.content.{
|
|
210
|
+
- `.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}` files can be created using a VSCode extension
|
|
211
211
|
- Autocompletion AI tools in your IDE (such as GitHub Copilot) can help you declare your content, reducing copy/paste
|
|
212
212
|
|
|
213
213
|
2. **Clean your codebase**
|
|
@@ -231,27 +231,27 @@ This approach allows you to:
|
|
|
231
231
|
|
|
232
232
|
## Additional features of Intlayer
|
|
233
233
|
|
|
234
|
-
| Feature | Description
|
|
235
|
-
| ------------------------------------------------------------------------------------------------------------------------- |
|
|
236
|
-
|  | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.
|
|
237
|
-
|  | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)
|
|
238
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700"> | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler)
|
|
239
|
-
|  | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)
|
|
240
|
-
|  | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)
|
|
241
|
-
|  | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
242
|
-
|  | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app)
|
|
243
|
-
|  | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)
|
|
244
|
-
|  | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer)
|
|
245
|
-
|  | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
246
|
-
|  | **Markdown Support**<br><br>Import and interpret locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)
|
|
247
|
-
|  | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)
|
|
248
|
-
|  | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)
|
|
249
|
-
|  | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
250
|
-
|  | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider/API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill)
|
|
251
|
-
|  | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)
|
|
252
|
-
|  | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)
|
|
253
|
-
|  | **Interoperability**<br><br>Allows interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)
|
|
254
|
-
| Testing Missing Translations (CLI/CI) | ✅ CLI: npx intlayer content test (CI-friendly audit)
|
|
234
|
+
| Feature | Description |
|
|
235
|
+
| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
236
|
+
|  | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. |
|
|
237
|
+
|  | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content) |
|
|
238
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700"> | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler) |
|
|
239
|
+
|  | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file) |
|
|
240
|
+
|  | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
241
|
+
|  | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
242
|
+
|  | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app) |
|
|
243
|
+
|  | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
244
|
+
|  | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
245
|
+
|  | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
246
|
+
|  | **Markdown Support**<br><br>Import and interpret locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file) |
|
|
247
|
+
|  | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
|
|
248
|
+
|  | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
249
|
+
|  | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
250
|
+
|  | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider/API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill) |
|
|
251
|
+
|  | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) |
|
|
252
|
+
|  | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension) |
|
|
253
|
+
|  | **Interoperability**<br><br>Allows interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer compat adapters](https://intlayer.org/doc/compatibility) |
|
|
254
|
+
| Testing Missing Translations (CLI/CI) | ✅ CLI: npx intlayer content test (CI-friendly audit) |
|
|
255
255
|
|
|
256
256
|
## Comparison of Intlayer with other solutions
|
|
257
257
|
|
|
@@ -290,3 +290,5 @@ GitHub stars are a strong indicator of a project's popularity, community trust,
|
|
|
290
290
|
`intlayer` can also help to manage your `react-intl`, `react-i18next`, `next-intl`, `next-i18next`, and `vue-i18n` namespaces.
|
|
291
291
|
|
|
292
292
|
Using `intlayer`, you can declare your content in the format of your favorite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
|
|
293
|
+
|
|
294
|
+
If you want to keep using the API of your current i18n library, `intlayer` also provides **compat adapters**: packages exposing the exact same API as `react-i18next`, `next-intl`, `react-intl`, `vue-i18n`, and more, but served by Intlayer dictionaries. This lets you migrate progressively without rewriting your code. See the [Compat Adapters documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md).
|
|
@@ -408,7 +408,7 @@ export const getLocale = (event: RequestEvent): Locale => {
|
|
|
408
408
|
};
|
|
409
409
|
```
|
|
410
410
|
|
|
411
|
-
> `getLocaleFromStorage` will check the locale from header or cookie depending on your configuration. See [Configuration](https://intlayer.org/doc/configuration) for more details.
|
|
411
|
+
> `getLocaleFromStorage` will check the locale from header or cookie depending on your configuration. See [Configuration](https://intlayer.org/doc/concept/configuration) for more details.
|
|
412
412
|
|
|
413
413
|
> The `localeDetector` function will treat the `Accept-Language` header and return the best match.
|
|
414
414
|
|
|
@@ -257,19 +257,21 @@ import {
|
|
|
257
257
|
HeadContent,
|
|
258
258
|
Scripts,
|
|
259
259
|
createRootRouteWithContext,
|
|
260
|
+
getRouteApi,
|
|
260
261
|
} from "@tanstack/solid-router";
|
|
261
262
|
import { HydrationScript } from "solid-js/web";
|
|
262
263
|
import { Suspense, type ParentComponent } from "solid-js";
|
|
263
264
|
import { IntlayerProvider } from "solid-intlayer";
|
|
264
265
|
import { defaultLocale, getHTMLTextDir } from "intlayer";
|
|
265
|
-
|
|
266
|
+
|
|
267
|
+
const localeRoute = getRouteApi("/{-$locale}");
|
|
266
268
|
|
|
267
269
|
export const Route = createRootRouteWithContext()({
|
|
268
270
|
shellComponent: RootComponent,
|
|
269
271
|
});
|
|
270
272
|
|
|
271
273
|
const RootComponent: ParentComponent = (props) => {
|
|
272
|
-
const params =
|
|
274
|
+
const params = localeRoute.useParams();
|
|
273
275
|
const locale = params()?.locale ?? defaultLocale;
|
|
274
276
|
|
|
275
277
|
return (
|
|
@@ -554,7 +556,7 @@ As seen in Step 5, you can manage the `lang` and `dir` attributes of the `html`
|
|
|
554
556
|
|
|
555
557
|
```tsx fileName="src/routes/__root.tsx"
|
|
556
558
|
const RootComponent: ParentComponent = (props) => {
|
|
557
|
-
const params =
|
|
559
|
+
const params = localeRoute.useParams();
|
|
558
560
|
const locale = params()?.locale ?? defaultLocale;
|
|
559
561
|
|
|
560
562
|
return (
|
|
@@ -274,13 +274,15 @@ Configure your root layout to support internationalization by using `useParams`
|
|
|
274
274
|
```tsx fileName="src/routes/__root.tsx"
|
|
275
275
|
import {
|
|
276
276
|
createRootRouteWithContext,
|
|
277
|
+
getRouteApi,
|
|
277
278
|
HeadContent,
|
|
278
279
|
Scripts,
|
|
279
280
|
} from "@tanstack/react-router";
|
|
280
281
|
import { defaultLocale, getHTMLTextDir } from "intlayer";
|
|
281
282
|
import { type ReactNode } from "react";
|
|
282
283
|
import { IntlayerProvider } from "react-intlayer";
|
|
283
|
-
|
|
284
|
+
|
|
285
|
+
const localeRoute = getRouteApi("/{-$locale}");
|
|
284
286
|
|
|
285
287
|
export const Route = createRootRouteWithContext<{}>()({
|
|
286
288
|
head: () => ({
|
|
@@ -302,7 +304,7 @@ export const Route = createRootRouteWithContext<{}>()({
|
|
|
302
304
|
});
|
|
303
305
|
|
|
304
306
|
function RootDocument({ children }: { children: ReactNode }) {
|
|
305
|
-
const params =
|
|
307
|
+
const params = localeRoute.useParams();
|
|
306
308
|
const locale = params?.locale ?? defaultLocale;
|
|
307
309
|
|
|
308
310
|
return (
|
|
@@ -635,7 +637,7 @@ As seen in Step 5, you can manage the `lang` and `dir` attributes of the `html`
|
|
|
635
637
|
|
|
636
638
|
```tsx fileName="src/routes/__root.tsx"
|
|
637
639
|
function RootDocument({ children }: { children: ReactNode }) {
|
|
638
|
-
const params =
|
|
640
|
+
const params = localeRoute.useParams();
|
|
639
641
|
const locale = params?.locale ?? defaultLocale;
|
|
640
642
|
|
|
641
643
|
return (
|