---
createdAt: 2025-03-13
updatedAt: 2025-06-29
title: Вставлення
description: Дізнайтеся, як оголошувати та використовувати заповнювачі (placeholders) для вставлення вмісту. Ця документація проведе вас крок за кроком по процесу динамічного вставлення значень у заздалегідь визначені структури вмісту.
keywords:
  - Вставлення
  - Динамічний вміст
  - Заповнювачі
  - Intlayer
  - Next.js
  - JavaScript
  - React
slugs:
  - doc
  - concept
  - content
  - insertion
history:
  - version: 8.0.0
    date: 2026-01-18
    changes: "Автоматичне оформлення вмісту вставки"
  - version: 5.5.10
    date: 2025-06-29
    changes: "Ініціалізація історії"
---

# Вміст вставлень / Вставлення в Intlayer

## Як працює вставлення

В Intlayer вставки контенту реалізуються за допомогою функції `insertion`, яка виявляє поля-плейсхолдери в рядку (наприклад `{{name}}` або `{{age}}`), що можуть бути динамічно замінені під час виконання. Такий підхід дозволяє створювати гнучкі, шаблоноподібні рядки, де конкретні частини вмісту визначаються даними, переданими з вашого застосунку.

При інтеграції з React Intlayer або Next Intlayer достатньо передати об'єкт даних, що містить значення для кожного плейсхолдера, і Intlayer автоматично відрендерить вміст із заміненими плейсхолдерами.

## Налаштування Insertion-контенту

Щоб налаштувати insertion-контент у вашому проєкті Intlayer, створіть модуль контенту, який містить визначення вставок.

<Tabs>
  <Tab label="Ручне обгортання" value="manual-wrapping">
    Використовуйте функцію `insert`, щоб явно оголосити вміст для вставки.

    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
    import { insert, type Dictionary } from "intlayer";

    const myInsertionContent = {
      key: "my_key",
      content: {
        myInsertion: insert("Привіт, мене звати {{name}} і мені {{age}} років!"),
      },
    } satisfies Dictionary;

    export default myInsertionContent;
    ```

    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
    {
      "$schema": "https://intlayer.org/schema.json",
      "key": "my_key",
      "content": {
        "myInsertion": {
          "nodeType": "insertion",
          "insertion": "Привіт, мене звати {{name}} і мені {{age}} років!",
        },
      },
    }
    ```

  </Tab>
  <Tab label="Автоматичне виявлення" value="automatic-detection">
    Якщо рядок містить загальні індикатори вставки (наприклад, `{{name}}`), Intlayer автоматично перетворить його.

    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
    import { type Dictionary } from "intlayer";

    const myInsertionContent = {
      key: "my_key",
      content: {
        myInsertion: "Привіт, мене звати {{name}} і мені {{age}} років!",
      },
    } satisfies Dictionary;

    export default myInsertionContent;
    ```

    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
    {
      "$schema": "https://intlayer.org/schema.json",
      "key": "my_key",
      "content": {
        "myInsertion": "Привіт, мене звати {{name}} і мені {{age}} років!",
      },
    }
    ```

  </Tab>
</Tabs>

## Використання вставного контенту з React Intlayer

Щоб використовувати insertion контент у React-компоненті, імпортуйте та використайте хук `useIntlayer` з пакету `react-intlayer`. Цей хук отримує контент для вказаного ключа і дозволяє передати об'єкт, який зіставляє кожен заповнювач (placeholder) у вашому контенті зі значенням, яке ви хочете відобразити.

```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const InsertionComponent: FC = () => {
  const { myInsertion } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Виведе: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* Ви можете повторно використовувати ту саму вставку з різними значеннями */
          myInsertion({ name: "Alice", age: "25" })
        }
      </p>
    </div>
  );
};

export default InsertionComponent;
```

## Додаткові ресурси

Для більш детальної інформації щодо конфігурації та використання, зверніться до наступних ресурсів:

- [Документація Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md)
- [Документація Intlayer для React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_create_react_app.md)
- [Документація Intlayer для Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_15.md)

Ці ресурси надають додаткову інформацію щодо налаштування та використання Intlayer у різних середовищах та фреймворках.
