Импорт и экспорт в MDX

MDX — это расширение формата Markdown, позволяющее использовать JSX-компоненты внутри Markdown-документов. Одной из ключевых особенностей MDX является возможность работать с импортом и экспортом модулей, что позволяет интегрировать JavaScript-код и компоненты React прямо в содержимое документа.

Импорт компонентов и модулей

В MDX используется стандартный синтаксис ES6 для импорта. Любой компонент или функция, экспортированная из внешнего файла, может быть импортирована в MDX-документ с помощью инструкции import.

import Button from './Button';
import { Header, Footer } from './Layout';
import * as Utils from './utils';
  • Button — импорт компонента по умолчанию (default export).
  • { Header, Footer } — именованный импорт нескольких сущностей.
  • * as Utils — импорт всех экспортов как объект, доступный через пространство имен Utils.

Импортированные компоненты можно использовать так же, как JSX-теги внутри MDX:

MDX позволяет также импортировать не только компоненты, но и данные или функции:

import { formatDate } from './utils';

Сегодняшняя дата: {formatDate(new Date())}

Экспорт из MDX

MDX поддерживает экспорт данных и компонентов, аналогично обычным модулям ES6. Это удобно для интеграции MDX-документов в приложения, где нужен доступ к их содержимому или метаданным.

export const meta = {
  title: 'Документация по MDX',
  author: 'Иван Иванов',
  date: '2026-03-23',
};
  • meta — объект с метаданными документа, который можно использовать при генерации навигации или списков статей.
  • Экспорт может включать функции, константы или даже JSX-компоненты:
export function CustomButton({ label }) {
  return ;
}

Этот компонент можно импортировать в другой MDX-файл или React-компонент:

import { CustomButton } from './MyDoc.mdx';

Динамический импорт в MDX

MDX поддерживает использование динамического импорта, что особенно полезно для ленивой загрузки больших компонентов или библиотек:

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });
  • dynamic — функция из Next.js или аналогичного фреймворка для динамического импорта.
  • Опция ssr: false отключает серверный рендеринг, чтобы компонент загружался только на клиенте.

Динамический импорт позволяет уменьшить размер основной сборки и ускорить рендеринг страниц MDX.

Совмещение импорта и JSX

MDX объединяет Markdown-разметку с импортированными компонентами. Это дает возможность:

  • Использовать React-компоненты внутри стандартного Markdown-контента.
  • Подключать утилиты и функции прямо в тексте.
  • Экспортировать метаданные и интерактивные элементы из документа.

Пример сочетания текста, импортированного компонента и функции:

import { formatDate } from './utils';
import Button from './Button';

Сегодня: {formatDate(new Date())}

Ограничения и особенности

  • MDX поддерживает только ES6-синтаксис импорта и экспорта; CommonJS (require) использовать нельзя.
  • Все импорты должны находиться в начале документа, до основной разметки Markdown.
  • Экспортированные сущности доступны при импорте MDX-файла как обычные модули.

Использование экспорта для метаданных

В больших приложениях часто создают структуру метаданных в MDX-документах:

export const meta = {
  slug: '/docs/mdx-import-export',
  tags: ['mdx', 'javascript', 'react'],
  published: true,
};

Метаданные можно собрать автоматически с помощью статических генераторов (Next.js, Gatsby) для формирования навигации, списков статей или фильтрации контента.

Импорт CSS и других ресурсов

MDX позволяет импортировать стили и ассеты, если это поддерживает сборщик:

import './styles.css';
import image from './logo.png';

Логотип

Таким образом MDX становится не просто Markdown-документом, а полноценным модулем с возможностью использовать JSX, данные, стили и динамические ресурсы.

Оглавление