Динамические метаданные

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

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

Метаданные в MDX обычно задаются с помощью frontmatter — блока YAML в начале файла. Пример базового frontmatter:

---
title: "Пример документа"
date: "2026-03-23"
tags: ["MDX", "Javascript", "Учебник"]
draft: false
---

Frontmatter предоставляет статические данные, но возможности MDX позволяют создавать динамические метаданные, вычисляемые во время рендеринга.

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

В MDX можно использовать обычный JavaScript для генерации значений, которые зависят от внешних условий. Например, метку date можно формировать программно:

export const meta = {
  title: "Пример динамических метаданных",
  date: new Date().toISOString(),
  author: process.env.USER || "Неизвестный автор"
};

Здесь объект meta может использоваться при интеграции MDX с компонентами React, позволяя отображать актуальную информацию о документе без ручного редактирования.

Связывание метаданных с компонентами

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

import { meta } from './document.mdx';

<h1>{meta.title}</h1>
<p>Автор: {meta.author}</p>
<p>Дата публикации: {new Date(meta.date).toLocaleDateString()}</p>

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

Использование функций для метаданных

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

export function getMeta() {
  return {
    title: "Документ с вычисляемыми метаданными",
    tags: ["MDX", "Dynamic", "JavaScript"],
    updated: new Date().toISOString()
  };
}

Компоненты, рендерящие MDX, могут вызывать эти функции, чтобы получать актуальные значения:

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

const meta = getMeta();

<h2>{meta.title}</h2>
<ul>
  {meta.tags.map(tag => <li key={tag}>{tag}</li>)}
</ul>
<p>Последнее обновление: {meta.updated}</p>

Интеграция с Next.js и Gatsby

В Next.js динамические метаданные особенно полезны для генерации SEO-данных:

import { getMeta } from '../content/page.mdx';

export async function getStaticProps() {
  const meta = getMeta();
  return {
    props: { meta }
  };
}

В компонентах страницы можно использовать meta для формирования <title> и <meta> тегов:

import Head from 'next/head';

export default function Page({ meta }) {
  return (
    <>
      <Head>
        <title>{meta.title}</title>
        <meta name="description" content={`Обновлено: ${meta.updated}`} />
      </Head>
      <h1>{meta.title}</h1>
    </>
  );
}

Gatsby предоставляет похожую возможность через GraphQL: MDX-файлы с динамическими метаданными могут быть обработаны через gatsby-plugin-mdx, позволяя выбирать и рендерить данные в страницах.

Метаданные и условный рендеринг

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

export const config = {
  showBanner: new Date().getDay() === 1 // Показывать баннер только по понедельникам
};

{config.showBanner && <Banner message="Сегодня понедельник!" />}

Такой подход делает документ интерактивным и контекстно-зависимым, что недоступно при чистом Markdown.

Практические рекомендации

  • Использовать экспорт объектов или функций: это позволяет отделять данные от визуальной части документа.
  • Избегать побочных эффектов в frontmatter: frontmatter лучше оставлять статическим, а динамику выносить в экспортируемые функции.
  • Соблюдать типизацию: если используется TypeScript, экспортируемые метаданные можно типизировать, чтобы избежать ошибок при рендеринге.
  • Интеграция с окружением: переменные среды (process.env) идеально подходят для динамических метаданных, например, автор документа или дата сборки.

Пример полного MDX-документа с динамическими метаданными

---
title: "Статический заголовок"
---

export const meta = {
  title: "Динамический заголовок",
  date: new Date().toISOString(),
  author: process.env.USER || "Неизвестный автор",
  tags: ["MDX", "Динамика"]
};

<h1>{meta.title}</h1>
<p>Автор: {meta.author}</p>
<p>Дата: {new Date(meta.date).toLocaleString()}</p>

{meta.tags.length > 0 && (
  <ul>
    {meta.tags.map(tag => <li key={tag}>{tag}</li>)}
  </ul>
)}

В этом примере метаданные полностью отделены от содержимого и могут изменяться автоматически, делая документ гибким и поддерживаемым.

Динамические метаданные в MDX открывают возможности адаптивного контента, интеграции с React-компонентами и фреймворками, а также автоматизации процессов публикации и SEO-оптимизации.

Оглавление