Экспорт метаданных

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

Определение метаданных

Метаданные в MDX представляют собой произвольные данные, которые экспортируются из MDX-файла как объект. Чаще всего они используются для описания документа, управления маршрутизацией или передачи параметров для компонентов.

Стандартный способ определения метаданных — это экспорт объекта meta или любого другого идентификатора с использованием синтаксиса ES Module:

export const meta = {
  title: "Пример документа MDX",
  date: "2026-03-23",
  tags: ["javascript", "mdx", "tutorial"],
  author: "Иван Иванов"
};

В этом примере создаётся объект meta, содержащий заголовок документа, дату, теги и автора. Этот объект будет доступен при импорте MDX-файла в JavaScript-коде.

Доступ к метаданным

После экспорта метаданных можно использовать их в других компонентах или страницах приложения. Например, в Next.js или Astro можно импортировать MDX-файл и получить объект метаданных:

import Document from './example.mdx';

console.log(Document.meta.title); // "Пример документа MDX"
console.log(Document.meta.tags);  // ["javascript", "mdx", "tutorial"]

Это позволяет динамически строить списки статей, фильтровать контент по тегам или отображать дату публикации без необходимости парсить сам текст документа.

Совмещение метаданных с контентом

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

import React from 'react';
import Post from './post.mdx';

export default function BlogPost() {
  return (
    <article>
      <h1>{Post.meta.title}</h1>
      <p>Автор: {Post.meta.author}</p>
      <Post />
    </article>
  );
}

Здесь Post — это компонент, который рендерит весь контент MDX-файла, а Post.meta предоставляет доступ к метаданным. Такой подход позволяет отделить структурную информацию документа от его основного содержания, сохраняя чистоту архитектуры.

Структурирование метаданных

Для более сложных проектов рекомендуется придерживаться единого формата метаданных, чтобы облегчить автоматическую обработку:

export const meta = {
  title: "Продвинутый MDX",
  date: "2026-03-23",
  description: "Детальное руководство по библиотеке MDX",
  tags: ["mdx", "react", "javascript"],
  category: "Tutorials",
  coverImage: "/images/mdx-cover.png"
};

Рекомендации по структурированию:

  • title — заголовок документа.
  • description — краткое описание содержания.
  • date — дата создания или публикации.
  • tags — массив ключевых слов для фильтрации.
  • category — категория документа для организации контента.
  • coverImage — путь к изображению для карточек и превью.

Динамическая генерация метаданных

MDX-файлы могут экспортировать функции, возвращающие метаданные. Это удобно, если данные зависят от внешних источников или вычисляются динамически:

export function getMeta() {
  const timestamp = new Date().toISOString();
  return {
    title: "Документ с динамическими метаданными",
    date: timestamp
  };
}

Импорт в коде будет выглядеть следующим образом:

import { getMeta } from './dynamic.mdx';

const meta = getMeta();
console.log(meta.date); // текущая дата и время

Такой подход используется для автоматического обновления даты публикации или генерации уникальных идентификаторов.

Взаимодействие с системами управления контентом

Метаданные MDX часто интегрируются с CMS или статическими генераторами сайтов (например, Next.js, Gatsby, Astro). Экспортированные данные позволяют автоматически формировать списки статей, карты сайта, навигацию и SEO-теги.

Пример использования с генератором маршрутов:

import allPosts from './posts/*.mdx';

export function getAllPosts() {
  return allPosts.map(post => ({
    title: post.meta.title,
    slug: post.meta.slug,
    date: post.meta.date
  }));
}

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

Советы по организации метаданных

  1. Единый стандарт: все MDX-документы должны использовать одинаковые ключи для метаданных.
  2. Минимизация дублирования: данные, которые могут меняться, лучше хранить в отдельной конфигурации или CMS.
  3. Семантические ключи: использовать понятные и однозначные названия (например, author, tags, date).
  4. Документирование структуры: полезно поддерживать отдельный файл с описанием всех возможных ключей метаданных.

Экспорт метаданных в MDX — фундаментальный инструмент для построения структурированных и интерактивных документов, позволяющий отделить содержимое от управляющей информации и интегрировать MDX с современными фреймворками и CMS.

Оглавление