Getting Started the declaration of your content

    Files extensions

    By default, Intlayer watches all files with the following extensions for content declarations:

    • .content.ts
    • .content.tsx
    • .content.js
    • .content.mjs
    • .content.cjs

    The application will search for files that match the ./src/**/*.content.{ts,tsx,js,jsx,mjs,cjs} glob pattern by default.

    These default extensions are suitable for most applications. However, if you have specific requirements, refer to the content extension customization guide for instructions on how to manage them.

    For a full list of configuration options, visit the configuration documentation.

    Declare Your Content

    Create and manage your dictionaries:

    src/example.content.ts
    import { t, enu, cond, nest, md, type Dictionary } from "intlayer";interface Content {  imbricatedContent: {    imbricatedContent2: {      stringContent: string;      numberContent: number;      booleanContent: boolean;    };    multilingualContent: string;    quantityContent: string;    conditionalContent: string;    nestedContent: string;    markdownContent: string;    externalContent: string;  };}export default {  key: "page",  content: {    imbricatedContent: {      imbricatedContent2: {        stringContent: "Hello World",        numberContent: 123,        booleanContent: true,        javaScriptContent: `${process.env.NODE_ENV}`,      },    },    multilingualContent: t({      en: "English content",      "en-GB": "English content (UK)",      fr: "French content",      es: "Spanish content",    }),    quantityContent: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),    conditionalContent: cond({      true: "Validation is enabled",      false: "Validation is disabled",    }),    nestedContent: nest(      "navbar", // The key of the dictionary to nest      "login.button" // [Optional] The path to the content to nest    ),    externalContent: async () => await fetch("https://example.com"),    markdownContent: md("# Markdown Example"),    /*     * Only available using `react-intlayer` or `next-intlayer`     */    jsxContent: <h1>My title</h1>,  },} satisfies Dictionary<Content>; // [optional] Dictionary is generic and allow you to strengthen the formatting of your dictionary

    Function imbrication

    You can without problem imbricate functions into other ones.

    Example :

    src/example.content.ts
    import { t, enu, cond, nest, md, type Dictionary } from "intlayer";const getName = async () => "John Doe";export default {  key: "page",  content: {    // `getIntlayer('page','en').hiMessage` returns `['Hi', ' ', 'John Doe']`    hiMessage: [      t({        en: "Hi",        fr: "Salut",        es: "Hola",      }),      " ",      getName(),    ],    // Composite content imbricating condition, enumeration, and multilingual content    // `getIntlayer('page','en').advancedContent(true)(10) returns 'Multiple items found'`    advancedContent: cond({      true: enu({        "0": t({          en: "No items found",          fr: "Aucun article trouvé",          es: "No se encontraron artículos",        }),        "1": t({          en: "One item found",          fr: "Un article trouvé",          es: "Se encontró un artículo",        }),        ">1": t({          en: "Multiple items found",          fr: "Plusieurs articles trouvés",          es: "Se encontraron múltiples artículos",        }),      }),      false: t({        en: "No valid data available",        fr: "Aucune donnée valide disponible",        es: "No hay datos válidos disponibles",      }),    }),  },} satisfies Dictionary;

    If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

    GitHub link to the documentation
    Intlayer CMSTranslation