@intlayer/docs 8.1.6 → 8.1.8

package/docs/en/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2025-09-09
+updatedAt: 2026-02-25
 title: Intlayer Compiler | Automated Content Extraction for i18n
 description: Automate your internationalization process with the Intlayer Compiler. Extract content directly from your components for faster, more efficient i18n in Vite, Next.js, and more.
 keywords:
@@ -20,6 +20,9 @@ slugs:
   - doc
   - compiler
 history:
+  - version: 8.1.7
+    date: 2026-02-25
+    changes: Update compiler options
   - version: 7.3.1
     date: 2025-11-27
     changes: Release Compiler
@@ -53,6 +56,9 @@ As an alternative, to automate your i18n process while keeping full control of y
 
 ## Usage
 
+<Tabs>
+ <Tab value='vite'>
+
 ### Vite
 
 For Vite-based applications (React, Vue, Svelte, etc.), the easiest way to use the compiler is through the `vite-intlayer` plugin.
@@ -79,6 +85,8 @@ export default defineConfig({
 });
 ```
 
+See complete tutorial: [Intlayer Compiler with Vite+React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react_compiler.md)
+
 #### Framework Support
 
 The Vite plugin automatically detects and handles different file types:
@@ -97,6 +105,9 @@ npm install @intlayer/vue-compiler
 npm install @intlayer/svelte-compiler
 ```
 
+ </Tab>
+ <Tab value='nextjs'>
+
 ### Next.js (Babel)
 
 For Next.js or other Webpack-based applications using Babel, you can configure the compiler using the `@intlayer/babel` plugin.
@@ -131,3 +142,71 @@ module.exports = {
 ```
 
 This configuration ensures that content declared in your components is automatically extracted and used to generate dictionaries during your build process.
+
+See complete tutorial: [Intlayer Compiler with Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_compiler.md)
+
+ </Tab>
+</Tabs>
+
+### Custom config
+
+To customize the compiler behavior, you can update the `intlayer.config.ts` file in the root of your project.
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  compiler: {
+    /**
+     * Indicates if the compiler should be enabled.
+     * Set to 'build-only' to skip the compiler during development and speed up start times.
+     */
+    enabled: true,
+
+    /**
+     * Pattern to traverse the code to optimize.
+     */
+    transformPattern: [
+      "**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}",
+      "!**/node_modules/**",
+    ],
+
+    /**
+     * Pattern to exclude from the optimization.
+     */
+    excludePattern: ["**/node_modules/**"],
+
+    /**
+     * Output directory for the optimized dictionaries.
+     */
+    outputDir: "i18n",
+
+    /**
+     * Dictionary key prefix
+     */
+    dictionaryKeyPrefix: "", // Remove base prefix
+
+    /**
+     * Indicates if the components should be saved after being transformed.
+     * That way, the compiler can be run only once to transform the app, and then it can be removed.
+     */
+    saveComponents: false,
+  },
+};
+
+export default config;
+```
+
+### Fill missing translation
+
+Intlayer provide a CLI tool to help you fill missing translations. You can use the `intlayer` command to test and fill missing translations from your code.
+
+```bash
+npx intlayer test         # Test if there is missing translations
+```
+
+```bash
+npx intlayer fill         # Fill missing translations
+```
+
+> For more details, refer to the [CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/ci.md)

package/docs/en/component_i18n.md

@@ -78,7 +78,7 @@ JSON is also supported if you prefer configuration files.
 
 ## 2) Retrieve your content
 
-### Case A — React app (Vite/SPA)
+### Case A. React app (Vite/SPA)
 
 Default approach: use `useIntlayer` to retrieve by key. This keeps components lean and typed.
 
@@ -129,7 +129,7 @@ export function ComponentWithDictionary() {
 }
 ```
 
-### Case B — Next.js (App Router)
+### Case B. Next.js (App Router)
 
 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.
 

package/docs/en/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-02-12
+updatedAt: 2026-02-25
 title: Configuration
 description: Learn how to configure Intlayer for your application. Understand the various settings and options available to customize Intlayer to your needs.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.1.7
+    date: 2026-02-25
+    changes: Update compiler options
   - version: 8.1.5
     date: 2026-02-23
     changes: Add compiler option 'build-only', and dictionary prefix
@@ -481,6 +484,12 @@ const config: IntlayerConfig = {
      * Dictionary key prefix
      */
     dictionaryKeyPrefix: "", // Remove base prefix
+
+    /**
+     * Indicates if the components should be saved after being transformed.
+     * That way, the compiler can be run only once to transform the app, and then it can be removed.
+     */
+    saveComponents: false,
   },
 
   /**
@@ -1214,6 +1223,12 @@ Settings that control the Intlayer compiler, which extracts dictionaries straigh
   - _Example_: `'my-key-'`
   - _Note_: When dictionaries are extracted, the key is generated based on the file name. This prefix is added to the generated key to prevent conflicts.
 
+- **saveComponents**:
+  - _Type_: `boolean`
+  - _Default_: `false`
+  - _Description_: Indicates if the components should be saved after being transformed.
+  - _Note_: If true, the compiler will replace the original files with the transformed files. That way, the compiler can be run only once to transform the app, and then it can be removed.
+
 - **transformPattern**:
   - _Type_: `string | string[]`
   - _Default_: `['**/*.{ts,tsx,jsx,js,cjs,mjs,svelte,vue}', '!**/node_modules/**']`

package/docs/en/index.md

@@ -64,7 +64,7 @@ Organize your multilingual content close to your code to keep everything consist
 - **[Enumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/enumeration.md)**  
   Easily manage repeated or fixed sets of data across various languages.
 
-- **[Condition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/conditional.md)**  
+- **[Condition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/condition.md)**  
   Learn how to use conditional logic in Intlayer to create dynamic content.
 
 - **[Gender](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/gender.md)**  
@@ -79,7 +79,7 @@ Organize your multilingual content close to your code to keep everything consist
 - **[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md)**  
   Learn how to use Markdown in Intlayer to create rich content.
 
-- **[File embeddings](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file_embeddings.md)**  
+- **[File embeddings](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md)**  
   Discover how to embed externals files in Intlayer to use them in the content editor.
 
 - **[Nesting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/nesting.md)**  

package/docs/en/intlayer_CMS.md

@@ -464,7 +464,7 @@ Example using Vite:
 
 The Live Sync server wraps your application and automatically applies updated content as it arrives.
 
-To receive change notifications from the CMS, the Live Sync server maintains an SSE connection to the backend. When content changes in the CMS, the backend forwards the update to the Live Sync server, which writes the new dictionaries. Your application will reflect the update on the next navigation or browser reload—no rebuild required.
+To receive change notifications from the CMS, the Live Sync server maintains an SSE connection to the backend. When content changes in the CMS, the backend forwards the update to the Live Sync server, which writes the new dictionaries. Your application will reflect the update on the next navigation or browser reload, no rebuild required.
 
 Flow chart (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
 

package/docs/en/intlayer_with_adonisjs.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-08-23
 updatedAt: 2025-12-30
-title: AdonisJS i18n - How to translate your AdonisJS app – guide 2026
+title: AdonisJS i18n - How to translate an AdonisJS app in 2026
 description: Discover how to make your AdonisJS backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_analog.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2025-12-30
-title: Analog i18n - How to translate your Analog app – guide 2026
+title: Analog i18n - How to translate an Analog app in 2026
 description: Discover how to make your Analog app multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_angular.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2025-12-30
-title: Angular i18n - How to translate your Angular app – guide 2026
+title: Angular i18n - How to translate an Angular app in 2026
 description: Discover how to make your Angular website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_astro.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - How to translate your Astro app – guide 2026
+title: Astro i18n - How to translate an Astro app in 2026
 description: Learn how to add internationalization (i18n) to your Astro website using Intlayer. Follow this guide to make your site multilingual.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_create_react_app.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-08-23
 updatedAt: 2025-12-30
-title: Create React App i18n - How to translate your React app – guide 2026
+title: Create React App i18n - How to translate an React app in 2026
 description: Discover how to make your Create React App (CRA) website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_express.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-08-23
 updatedAt: 2025-12-30
-title: Express i18n - How to translate your Express app – guide 2026
+title: Express i18n - How to translate an Express app in 2026
 description: Discover how to make your Express backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_fastify.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-12-30
 updatedAt: 2025-12-30
-title: Fastify i18n - How to translate your Fastify app – guide 2026
+title: Fastify i18n - How to translate an Fastify app in 2026
 description: Discover how to make your Fastify backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_hono.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-08-23
 updatedAt: 2025-12-30
-title: Hono i18n - How to translate your Hono app – guide 2026
+title: Hono i18n - How to translate an Hono app in 2026
 description: Discover how to make your Hono backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_lynx+react.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-03-09
 updatedAt: 2025-12-30
-title: Lynx and React i18n - How to translate your Lynx app – guide 2026
+title: Lynx and React i18n - How to translate an Lynx app in 2026
 description: Discover how to make your Lynx and React mobile app multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_nestjs.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-09-09
 updatedAt: 2025-12-30
-title: NestJS i18n - How to translate your NestJS app – guide 2026
+title: NestJS i18n - How to translate an NestJS app in 2026
 description: Discover how to make your NestJS backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_next-i18next.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-10-05
 updatedAt: 2025-10-05
-title: Next.js and next-i18next i18n - How to translate your Next.js app – guide 2026
+title: next-i18next - How to translate a Next.js (i18n) app in 2026
 description: A practical, production-ready guide to internationalize a Next.js 15 App Router app with i18next/next-i18next and enhance it with Intlayer.
 keywords:
   - Internationalization
@@ -37,7 +37,7 @@ applicationTemplate: https://github.com/aymericzip/intlayer-next-i18next-templat
 - Intlayer integration to automate translation workflows (tests, AI fill, JSON sync)
 
 > Note: next-i18next is built on top of i18next. This guide uses the i18next primitives compatible with next-i18next in the App Router, while keeping the architecture simple and production-ready.
-> For a broader comparison, see [next-i18next vs next-i18next vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/next-i18next_vs_next-i18next_vs_intlayer.md).
+> For a broader comparison, see [next-i18next vs next-intl vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/next-i18next_vs_next-intl_vs_intlayer.md).
 
 ---
 

package/docs/en/intlayer_with_next-intl.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-10-05
 updatedAt: 2025-10-05
-title: Next.js and next-intl i18n - How to translate your Next.js app – guide 2026
+title: next-intl - How to translate a Next.js (i18n) app in 2026
 description: Discover how to make your Next.js 15 App Router website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization

package/docs/en/intlayer_with_nextjs_14.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-12-06
 updatedAt: 2025-12-30
-title: Next.js i18n - How to translate your Next.js 14 app – guide 2026
+title: Next.js i18n - How to translate an Next.js 14 app in 2026
 description: Discover how to make your Next.js 14 App Router website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -1540,7 +1540,7 @@ export const myServerAction = async () => {
 >
 > This ensures the most appropriate locale is selected based on available context.
 
-### (Optional) Step 13: Optmize your bundle size
+### (Optional) Step 13: Optimize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 

package/docs/en/intlayer_with_nextjs_15.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-10-25
 updatedAt: 2025-12-30
-title: Next.js i18n - How to translate your Next.js 15 app – guide 2026
+title: Next.js i18n - How to translate an Next.js 15 app in 2026
 description: Discover how to make your Next.js 15 website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -1614,7 +1614,7 @@ export const myServerAction = async () => {
 >
 > This ensures the most appropriate locale is selected based on available context.
 
-### (Optional) Step 13: Optmize your bundle size
+### (Optional) Step 13: Optimize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 

package/docs/en/intlayer_with_nextjs_16.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-12-06
 updatedAt: 2025-12-30
-title: Next.js i18n - How to translate your Next.js 16 app – guide 2026
+title: Next.js i18n - How to translate an Next.js 16 app in 2026
 description: Discover how to make your Next.js 16 website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -708,6 +708,8 @@ const ServerComponentExample = () => {
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useIntlayer.md).
 
+> If your app already exists, you can use the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md), as well as the [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md), to transform thousands of components in a second.
+
 ### (Optional) Step 7: Configure Proxy for Locale Detection
 
 Set up proxy to detect the user's preferred locale:
@@ -1599,7 +1601,7 @@ export const myServerAction = async () => {
 >
 > This ensures the most appropriate locale is selected based on available context.
 
-### (Optional) Step 13: Optmize your bundle size
+### (Optional) Step 13: Optimize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.