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,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 content dictionaries:

    Using typescript

    typescript
    // src/app/[locale]/page.content.ts
import { t, enu, type DeclarationContent } from "intlayer";

interface Content {
  getStarted: {
    main: string;
    pageLink: string;
  };
  numberOfCar: string;
}

export default {
  key: "page",
  content: {
    getStarted: {
      main: t({
        en: "Get started by editing", // 편집을 시작하세요
        fr: "Commencez par éditer",
        es: "Comience por editar",
      }),
      pageLink: "src/app/page.tsx",
    },
    numberOfCar: enu({
      "<-1": "Less than minus one car", // 1대 이하
      "-1": "Minus one car", // 1대 감소
      "0": "No cars", // 자동차 없음
      "1": "One car", // 1대 자동차
      ">5": "Some cars", // 몇 대의 자동차
      ">19": "Many cars", // 많은 자동차
    }),
  },
} satisfies DeclarationContent<Content>;

    Using ECMAScript modules

    javascript
    // src/app/[locale]/page.content.mjs

import { t } from "intlayer";

/** @type {import('intlayer').DeclarationContent} */
export default {
  key: "page",
  content: {
    getStarted: {
      main: t({
        en: "Get started by editing", // 편집을 시작하세요
        fr: "Commencez par éditer",
        es: "Comience por editar",
      }),
      pageLink: "src/app/page.tsx",
    },
    numberOfCar: enu({
      "<-1": "Less than minus one car", // 1대 이하
      "-1": "Minus one car", // 1대 감소
      0: "No cars", // 자동차 없음
      1: "One car", // 1대 자동차
      ">5": "Some cars", // 몇 대의 자동차
      ">19": "Many cars", // 많은 자동차
    }),
  },
};

    Using CommonJS modules

    javascript
    // src/app/[locale]/page.content.cjs

const { t } = require("intlayer");

/** @type {import('intlayer').DeclarationContent} */
module.exports = {
  key: "page",
  content: {
    getStarted: {
      main: t({
        en: "Get started by editing", // 편집을 시작하세요
        fr: "Commencez par éditer",
        es: "Comience por editar",
      }),
      pageLink: "src/app/page.tsx",
    },
    numberOfCar: enu({
      "<-1": "Less than minus one car", // 1대 이하
      "-1": "Minus one car", // 1대 감소
      0: "No cars", // 자동차 없음
      1: "One car", // 1대 자동차
      ">5": "Some cars", // 몇 대의 자동차
      ">19": "Many cars", // 많은 자동차
    }),
  },
};

    Using JSON

    json5
    // src/app/[locale]/page.content.json

{
  "key": "page",
  "content": {
    "getStarted": {
      "main": {
        "nodeType": "translation",
        "translation": {
          "en": "Get started by editing", // 편집을 시작하세요
          "fr": "Commencez par éditer",
          "es": "Comience por editar",
        },
      },
      "pageLink": "src/app/page.tsx",
    },
    "numberOfCar": {
      "nodeType": "enumeration",
      "enumeration": {
        "<-1": "Less than minus one car", // 1대 이하
        "-1": "Minus one car", // 1대 감소
        "0": "No cars", // 자동차 없음
        "1": "One car", // 1대 자동차
        ">5": "Some cars", // 몇 대의 자동차
        ">19": "Many cars", // 많은 자동차
      },
    },
  },
}

    Warning, JSON content declaration make impossible to implement function fetching

    이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

    문서에 대한 GitHub 링크
    Intlayer Editor번역