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

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

---
title: "Пример использования метаданных"
author: "Иван Иванов"
date: "2026-03-23"
tags:
  - mdx
  - react
  - tutorial
---

# Основной контент

Структура и доступ к метаданным

Frontmatter всегда располагается между строками с --- в начале MDX-файла. При компиляции MDX с использованием библиотек вроде @mdx-js/mdx или next-mdx-remote, данные frontmatter автоматически становятся доступными как объект. Например:

import { useMDXComponents } from 'mdx-bundler/client';
import content from './example.mdx';

console.log(content.frontmatter.title); // "Пример использования метаданных"

Важно: все ключи и значения frontmatter интерпретируются как строки, числа или массивы, но могут включать вложенные объекты, что открывает широкие возможности для структурирования информации.

Встраивание метаданных в компоненты

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

import AuthorCard from './AuthorCard';

<AuthorCard name={frontmatter.author} date={frontmatter.date} />

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

Использование метаданных для маршрутизации и SEO

Метаданные часто используются для генерации динамических маршрутов в Next.js или Gatsby:

export async function getStaticProps() {
  const { frontmatter } = await import(`../posts/example.mdx`);
  return { props: { meta: frontmatter } };
}

Затем данные можно использовать в <Head> для SEO:

import Head from 'next/head';

<Head>
  <title>{meta.title}</title>
  <meta name="author" content={meta.author} />
  <meta name="keywords" content={meta.tags.join(', ')} />
</Head>

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

Динамические компоненты на основе метаданных

MDX поддерживает условный рендеринг компонентов в зависимости от frontmatter. Например, если у поста есть тег "tutorial", можно автоматически вставить баннер с подсказкой:

{frontmatter.tags.includes('tutorial') && (
  <div className="banner">Это обучающий материал</div>
)}

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

Типизация метаданных

Для TypeScript-проектов удобно задавать типы для frontmatter:

export interface PostMeta {
  title: string;
  author: string;
  date: string;
  tags: string[];
}

declare module '*.mdx' {
  let frontmatter: PostMeta;
  export { frontmatter };
}

Это позволяет получать автодополнение и проверку типов, предотвращая ошибки при работе с данными.

Интеграция с глобальными состояниями и контекстом

Метаданные можно передавать не только в отдельные компоненты, но и в глобальные контексты React. Например, для системы тегов:

import { TagsContext } from './TagsContext';

<TagsContext.Provider value={frontmatter.tags}>
  <PostContent />
</TagsContext.Provider>

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

Советы по организации frontmatter

  • Единый стиль ключей: camelCase или snake_case. Это облегчает поддержку проектов.
  • Минимизация вложенности: сложные структуры лучше хранить отдельно в JSON-файлах, а в frontmatter оставлять только ссылку.
  • Использование массивов: для тегов, категорий или списков компонентов — упрощает фильтрацию и динамический рендеринг.

Метаданные в MDX позволяют не только структурировать контент, но и создавать полностью динамические страницы с минимальным количеством повторяющегося кода, интегрируя Markdown с React и современными фреймворками.

Оглавление