Intlayer Configuration Documentation

Overview

Intlayer configuration files allow customisation of various aspects of the plugin, such as internationalisation, middleware, and content handling. This document provides a detailed description of each property in the configuration.

Configuration File Support

Intlayer accepts JSON, JS, MJS, and TS configuration file formats:

• intlayer.config.ts
• intlayer.config.js
• intlayer.config.json
• intlayer.config.cjs
• intlayer.config.mjs
• .intlayerrc

Example config file

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH],  },  content: {    autoFill: "./{{fileName}}.content.json",    contentDir: ["src", "../ui-library"],  },  middleware: {    noPrefix: false,  },  editor: {    applicationURL: "https://example.com",  },  ai: {    apiKey: process.env.OPENAI_API_KEY,    applicationContext: "This is a test application",  },  build: {    importMode: "dynamic",  },};export default config;

Configuration Reference

The following sections describe the various configuration settings available for Intlayer.

Internationalisation Configuration

Defines settings related to internationalisation, including available locales and the default locale for the application.

Properties

• locales:

  • Type: string[]
  • Default: ['en']
  • Description: The list of supported locales in the application.
  • Example: ['en', 'fr', 'es']
• requiredLocales:
  • Type: string[]
  • Default: []
  • Description: The list of required locales in the application.
  • Example: []
  • Note: If empty, all locales are required in strict mode.
  • Note: Ensure required locales are also defined in the locales field.

• strictMode:

  • Type: string
  • Default: inclusive
  • Description: Ensures strong implementations of internationalised content using TypeScript.
  • Note: If set to "strict", the translation t function will require each declared locale to be defined. If one locale is missing, or if a locale is not declared in your config, it will throw an error.
  • Note: If set to "inclusive", the translation t function will require each declared locale to be defined. If one locale is missing, it will throw a warning. But it will accept if a locale is not declared in your config, but exists.
  • Note: If set to "loose", the translation t function will accept any existing locale.

• defaultLocale:

  • Type: string
  • Default: 'en'
  • Description: The default locale used as a fallback if the requested locale is not found.
  • Example: 'en'
  • Note: This is used to determine the locale when none is specified in the URL, cookie, or header.

Editor Configuration

Defines settings related to the integrated editor, including server port and active status.

Properties

• applicationURL:

  • Type: string
  • Default: http://localhost:3000
  • Description: The URL of the application. Used to restrict the origin of the editor for security reasons.
  • Example:
    • 'http://localhost:3000'
    • 'https://example.com'
    • process.env.INTLAYER_EDITOR_URL
  • Note: The URL of the application. Used to restrict the origin of the editor for security reasons. If set to '*', the editor is accessible from any origin.

• port:

  • Type: number
  • Default: 8000
  • Description: The port used by the visual editor server.

• editorURL:

  • Type: string
  • Default: 'http://localhost:8000'
  • Description: The URL of the editor server. Used to restrict the origin of the editor for security reasons.
    • 'http://localhost:3000'
    • 'https://example.com'
    • process.env.INTLAYER_EDITOR_URL
  • Note: The URL of the editor server to reach from the application. Used to restrict the origins that can interact with the application for security reasons. If set to '*', the editor is accessible from any origin. Should be set if the port is changed, or if the editor is hosted on a different domain.

• cmsURL:

  • Type: string
  • Default: 'https://intlayer.org'
  • Description: The URL of the Intlayer CMS.
  • Example: 'https://intlayer.org'
  • Note: The URL of the Intlayer CMS.

• backendURL:

  • Type: string
  • Default: https://back.intlayer.org
  • Description: The URL of the backend server.
  • Example: http://localhost:4000

• enabled:

  • Type: boolean
  • Default: true
  • Description: Indicates if the application interacts with the visual editor.
  • Example: process.env.NODE_ENV !== 'production'
  • Note: If true, the editor will be able to interact with the application. If false, the editor will not be able to interact with the application. In any case, the editor can only be enabled by the visual editor. Disabling the editor for specific environments is a way to enforce security.

• clientId:

  • Type: string | undefined
  • Default: undefined
  • Description: clientId and clientSecret allow the intlayer packages to authenticate with the backend using oAuth2 authentication. An access token is used to authenticate the user related to the project. To obtain an access token, visit https://intlayer.org/dashboard/project and create an account.
  • Example: true
  • Note: Important: The clientId and clientSecret should be kept confidential and not shared publicly. Please ensure they are stored securely, such as in environment variables.

• clientSecret:

  • Type: string | undefined
  • Default: undefined
  • Description: clientId and clientSecret allow the intlayer packages to authenticate with the backend using oAuth2 authentication. An access token is used to authenticate the user related to the project. To obtain an access token, visit https://intlayer.org/dashboard/project and create an account.
  • Example: true
  • Note: Important: The clientId and clientSecret should be kept confidential and not shared publicly. Please ensure they are stored securely, such as in environment variables.

• dictionaryPriorityStrategy:

  • Type: string
  • Default: 'local_first'
  • Description: The strategy to prioritise dictionaries in the case of both local and distant dictionaries being present. If set to 'distant_first', the application will prioritise distant dictionaries over local dictionaries. If set to 'local_first', the application will prioritise local dictionaries over distant dictionaries.
  • Example: 'distant_first'

• liveSync:

  • Type: boolean
  • Default: false
  • Description: Indicates if the application server should hot reload the content of the application when a change is detected on the CMS / Visual Editor / Backend.
  • Example: true
  • Note: For example, when a new dictionary is added or updated, the application will update the content to display on the page.
  • Note: Live sync needs to externalise the content of the application to another server. This means that it can slightly impact the performance of the application. To limit this, we recommend hosting the application and the live sync server on the same machine. Also, the combination of live sync and optimize can generate a considerable number of requests to the live sync server. Depending on your infrastructure, we recommend testing both options and their combination.

• liveSyncPort:

  • Type: number
  • Default: 4000
  • Description: The port of the live sync server.
  • Example: 4000
  • Note: The port of the live sync server.

• liveSyncURL:

  • Type: string
  • Default: 'http://localhost:{liveSyncPort}'
  • Description: The URL of the live sync server.
  • Example: 'https://example.com'
  • Note: Points to localhost by default but can be changed to any URL in the case of a remote live sync server.

Middleware Configuration

Settings that control middleware behaviour, including how the application handles cookies, headers, and URL prefixes for locale management.

Properties

• headerName:

  • Type: string
  • Default: 'x-intlayer-locale'
  • Description: The name of the HTTP header used to determine the locale.
  • Example: 'x-custom-locale'
  • Note: This is useful for API-based locale determination.

• cookieName:

  • Type: string
  • Default: 'intlayer-locale'
  • Description: The name of the cookie used to store the locale.
  • Example: 'custom-locale'
  • Note: Used to persist the locale across sessions.

• prefixDefault:

  • Type: boolean
  • Default: false
  • Description: Whether to include the default locale in the URL.
  • Example: true
  • Note:
    • If true and defaultLocale = 'en': path = /en/dashboard or /fr/dashboard
    • If false and defaultLocale = 'en': path = /dashboard or /fr/dashboard

• basePath:

  • Type: string
  • Default: ''
  • Description: The base path for the application URLs.
  • Example: '/my-app'
  • Note:
    • If the application is hosted at https://example.com/my-app
    • The base path is '/my-app'
    • The URL will be https://example.com/my-app/en
    • If the base path is not set, the URL will be https://example.com/en

• serverSetCookie:

  • Type: string
  • Default: 'always'
  • Description: Rule for setting the locale cookie on the server.
  • Options: 'always', 'never'
  • Example: 'never'
  • Note: Controls whether the locale cookie is set on every request or never.

• noPrefix:

  • Type: boolean
  • Default: false
  • Description: Whether to omit the locale prefix from URLs.
  • Example: true
  • Note:
    • If true: No prefix in the URL
    • If false: Prefix in the URL
    • Example with basePath = '/my-app':
      • If noPrefix = false: URL will be https://example.com/my-app/en
      • If noPrefix = true: URL will be https://example.com

• detectLocaleOnPrefetchNoPrefix:

  • Type: boolean
  • Default: false
  • Description: Controls whether locale detection occurs during Next.js prefetch requests.
  • Example: true
  • Note: This setting affects how Next.js handles locale prefetching:
    • Example scenario:
      • User's browser language is 'fr'
      • Current page is /fr/about
      • Link prefetches /about
    • With detectLocaleOnPrefetchNoPrefix: true:
      • Prefetch detects 'fr' locale from browser
      • Redirects prefetch to /fr/about
    • With detectLocaleOnPrefetchNoPrefix: false (default):
      • Prefetch uses default locale
      • Redirects prefetch to /en/about (assuming 'en' is default)
    • When to use true:
      • Your app uses non-localised internal links (e.g. <a href="/about">)
      • You want consistent locale detection behaviour between regular and prefetch requests
    • When to use false (default):
      • Your app uses locale-prefixed links (e.g. <a href="/fr/about">)
      • You want to optimise prefetching performance
      • You want to avoid potential redirect loops

Content Configuration

Settings related to content handling within the application, including directory names, file extensions, and derived configurations.

Properties

• autoFill:

  • Type: boolean | string | { [key in Locales]?: string }
  • Default: undefined
  • Description: Indicates how the content should be automatically filled using AI. Can be declared globally in the intlayer.config.ts file.
  • Example: true
  • Example: './{{fileName}}.content.json'
  • Example: { fr: './{{fileName}}.fr.content.json', es: './{{fileName}}.es.content.json' }
  • Note: The auto fill configuration. It can be:
    • boolean: Enable auto fill for all locales
    • string: Path to a single file or template with variables
    • object: Per-locale file paths

• watch:

  • Type: boolean
  • Default: process.env.NODE_ENV === 'development'
  • Description: Indicates if Intlayer should watch for changes in the content declaration files in the app to rebuild the related dictionaries.

• fileExtensions:

  • Type: string[]
  • Default: ['.content.ts', '.content.js', '.content.cjs', '.content.mjs', '.content.json', '.content.tsx', '.content.jsx']
  • Description: File extensions to look for when building dictionaries.
  • Example: ['.data.ts', '.data.js', '.data.json']
  • Note: Customising file extensions can help avoid conflicts.

• baseDir:

  • Type: string
  • Default: process.cwd()
  • Description: The base directory for the project.
  • Example: '/path/to/project'
  • Note: This is used to resolve all Intlayer-related directories.

• dictionaryOutput:

  • Type: string[]
  • Default: ['intlayer']
  • Description: The type of dictionary output to use, e.g., 'intlayer' or 'i18next'.

• contentDir:

  • Type: string[]
  • Default: ['.']
  • Example: ['src', '../../ui-library', require.resolve("@my-package/content")]
  • Description: The directory path where content is stored.

• dictionariesDir:

  • Type: string
  • Default: '.intlayer/dictionaries'
  • Description: The directory path for storing intermediate or output results.

• moduleAugmentationDir:

  • Type: string
  • Default: '.intlayer/types'
  • Description: Directory for module augmentation, allowing better IDE suggestions and type checking.
  • Example: 'intlayer-types'
  • Note: Ensure this is included in tsconfig.json.

• unmergedDictionariesDir:

  • Type: string
  • Default: '.intlayer/unmerged_dictionary'
  • Description: The directory for storing unmerged dictionaries.
  • Example: 'translations'

• dictionariesDir:

  • Type: string
  • Default: '.intlayer/dictionary'
  • Description: The directory for storing localisation dictionaries.
  • Example: 'translations'

• i18nextResourcesDir:

  • Type: string
  • Default: 'i18next_dictionary'
  • Description: The directory for storing i18n dictionaries.
  • Example: 'translations'
  • Note: Ensure this directory is configured for the i18next output type.

• typesDir:

  • Type: string
  • Default: 'types'
  • Description: The directory for storing dictionary types.
  • Example: 'intlayer-types'

• mainDir:

  • Type: string
  • Default: 'main'
  • Description: The directory where main application files are stored.
  • Example: 'intlayer-main'

• excludedPath:

  • Type: string[]
  • Default: ['node_modules']
  • Description: Directories excluded from content search.
  • Note: This setting is not yet used, but planned for future implementation.

Logger Configuration

Settings that control the logger, including the prefix to use.

Properties

• mode:

  • Type: string
  • Default: default
  • Description: Indicates the mode of the logger.
  • Options: default, verbose, disabled
  • Example: default
  • Note: The mode of the logger. Verbose mode will log more information, but can be used for debugging purposes. Disabled mode will disable the logger.

• prefix:

  • Type: string
  • Default: '[intlayer] '
  • Description: The prefix of the logger.
  • Example: '[my custom prefix] '
  • Note: The prefix of the logger.

AI Configuration

Settings that control the AI features of Intlayer, including the provider, model, and API key.

This configuration is optional if you are registered on the Intlayer Dashboard using an access key. Intlayer will automatically manage the most efficient and cost-effective AI solution for your needs. Using the default options ensures better long-term maintainability as Intlayer continuously updates to use the most relevant models.

If you prefer to use your own API key or specific model, you can define your custom AI configuration. This AI configuration will be used globally across your Intlayer environment. CLI commands will use these settings as defaults for the commands (e.g. fill), as well as the SDK, Visual Editor, and CMS. You can override these default values for specific use cases using command parameters.

Intlayer supports multiple AI providers for enhanced flexibility and choice. Currently supported providers are:

• OpenAI (default)
• Anthropic Claude
• Mistral AI
• DeepSeek
• Google Gemini
• Meta Llama

Properties

• provider:

  • Type: string
  • Default: 'openai'
  • Description: The provider to use for the AI features of Intlayer.
  • Options: 'openai', 'anthropic', 'mistral', 'deepseek', 'gemini'
  • Example: 'anthropic'
  • Note: Different providers may require different API keys and have different pricing models.

• model:

  • Type: string
  • Default: None
  • Description: The model to use for the AI features of Intlayer.
  • Example: 'gpt-4o-2024-11-20'
  • Note: The specific model to use varies by provider.

• temperature:

  • Type: number
  • Default: None
  • Description: The temperature controls the randomness of the AI's responses.
  • Example: 0.1
  • Note: A higher temperature will make the AI more creative and less predictable.

• apiKey:

  • Type: string
  • Default: None
  • Description: Your API key for the selected provider.
  • Example: process.env.OPENAI_API_KEY
  • Note: Important: API keys should be kept confidential and not shared publicly. Please ensure they are stored securely, such as in environment variables.

• applicationContext:

  • Type: string
  • Default: None
  • Description: Provides additional context about your application to the AI model, assisting it in generating more accurate and contextually appropriate translations. This can include information about your app's domain, target audience, tone, or specific terminology.

Build Configuration

Settings that control how Intlayer optimises and builds your application's internationalisation.

Build options apply to the @intlayer/babel and @intlayer/swc plugins.

In development mode, Intlayer uses static imports for dictionaries to simplify the development experience.

When optimised, Intlayer will replace dictionary calls to optimise chunking, so the final bundle only imports dictionaries that are actually used.

Properties

• optimize:

  • Type: boolean
  • Default: process.env.NODE_ENV === 'production'
  • Description: Controls whether the build should be optimised.
  • Example: true
  • Note: When enabled, Intlayer will replace all calls of dictionaries to optimise chunking. That way the final bundle will import only the dictionaries that are used. All imports will remain as static imports to avoid async processing when loading the dictionaries.
  • Note: Intlayer will replace all calls of useIntlayer with the defined mode by the importMode option and getIntlayer with getDictionary.
  • Note: This option relies on the @intlayer/babel and @intlayer/swc plugins.
  • Note: Ensure all keys are declared statically in the useIntlayer calls. e.g. useIntlayer('navbar').

• importMode:

  • Type: 'static' | 'dynamic' | 'live'
  • Default: 'static'
  • Description: Controls how dictionaries are imported.
  • Example: 'dynamic'
  • Note: Available modes:
    • "static": Dictionaries are imported statically. Replaces useIntlayer with useDictionary.
    • "dynamic": Dictionaries are imported dynamically using Suspense. Replaces useIntlayer with useDictionaryDynamic.
    • "live": Dictionaries are fetched dynamically using the live sync API. Replaces useIntlayer with useDictionaryFetch.
  • Note: Dynamic imports rely on Suspense and may slightly affect rendering performance.
  • Note: If disabled, all locales will be loaded at once, even if they are not used.
  • Note: This option relies on the @intlayer/babel and @intlayer/swc plugins.
  • Note: Ensure all keys are declared statically in the useIntlayer calls, e.g. useIntlayer('navbar').
  • Note: This option will be ignored if optimize is disabled.
  • Note: If set to "live", only the dictionaries that include remote content and are flagged as "live" will be transformed into live mode. Others will be imported dynamically as "dynamic" mode to optimise the number of fetch queries and load performance.
  • Note: Live mode will use the live sync API to fetch the dictionaries. If the API call fails, the dictionaries will be imported dynamically as "dynamic" mode.
  • Note: This option will not affect the getIntlayer, getDictionary, useDictionary, useDictionaryAsync and useDictionaryDynamic functions.

• traversePattern:

  • Type: string[]
  • Default: ['**/*.{js,ts,mjs,cjs,jsx,tsx,mjx,cjx}', '!**/node_modules/**']
  • Description: Patterns that define which files should be traversed during optimisation.
    • Example: ['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']
  • Note: Use this to limit optimisation to relevant code files and improve build performance.
  • Note: This option will be ignored if optimise is disabled.
  • Note: Use glob pattern.

Doc History