Как извлечь и использовать метаданные из файлов MDX в блоге React? ⇐ Javascript

[Anonymous]

Я создаю блог в React с использованием файлов MDX, и я столкнулся с проблемой. У меня есть несколько сообщений в формате MDX, и я хотел бы определить для них метаданные, чтобы я мог выполнять поисковые запросы. Поскольку файлы MDX не подлежат напрямую из базы данных, я не уверен, как приблизиться к этому. < /P>
Вот пример файла MDX: < /p>

Код: Выделить всё

---
title: "Hello World"
author: "Yasha"
date: "2025-01-24"
tags: ["React", "MDX"]
---

# Title

It's my first _post_! I'm really **EXCITED**.

Hello
World

< /code>
И вот мой компонент React для рендеринга: < /p>
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { MDXProvider } from "@mdx-js/react";

import { readFile } from "node:fs/promises";
import { compile } from "@mdx-js/mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";

const Post = () => {
const { slug } = useParams();
const navigate = useNavigate();

const [PostComponent, setPostComponent] = useState(null);

useEffect(() => {
const loadPost = async () => {
try {
// Check that the slug is valid and doesn't include slashes
const post = await import(`@/posts/${slug}.mdx`);

const { value } = await compile(await readFile(`@/posts/example.mdx`), {
jsx: true,
remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
});
console.log(value);

setPostComponent(() => post.default);
} catch (err) {
console.error("Post not found:", err);
setPostComponent(() => () => navigate("/notfound"));
}
};

if (slug) loadPost();
}, [slug]);

return (

{PostComponent ? (



) : (
Loading...
)}

);
};

export default Post;

Я пробовал использовать Frontmatter для обработки метаданных, но, похоже, он плохо интегрируется с TypeScript для обеспечения безопасности типов. Я также пробовал использовать серое вещество и переднее вещество, но они не работали должным образом.
Может ли кто-нибудь объяснить, как извлечь и использовать метаданные правильно? Можно ли запрашивать файлы MDX из серверной части и по-другому обрабатывать метаданные, чтобы сделать это более масштабируемым?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... react-blog