如何在 nextjs 中从 .mdx 获取 frontmatter (meta)？答案

【问题标题】：How to obtain frontmatter (meta) from .mdx in nextjs?如何在 nextjs 中从 .mdx 获取 frontmatter (meta)？
【发布时间】：2023-02-23 05:43:30
【问题描述】：

我使用 ts 支持 and mdx according to the docs 设置了 nextjs13。

现在我想将 frontmatter 导入到一个文件中，该文件是从另一个文件导出的。那可能吗？

pages/post.mdx包含

export const meta = {
  title: "some meta",
}

pages/index.tsx包含

import post from './post.mdx';
console.log(post.meta);

输出：

undefined

预期输出：

{ title: "some meta" }

【问题讨论】：

标签： next.js mdx mdxjs

【解决方案1】：

找到了解决方案，while stepping over a github comment：

错误的：

import post from './post.mdx';
console.log(post.meta);

正确的：

import post, { meta } from './post.mdx';
console.log(meta);

【讨论】：

【解决方案2】：

我使用 front-matter，一个 NPM 包。

例子：

import React from "react";
import fm from "front-matter";

export default function SomeComponent({ markdown }) {
  const data = fm(markdown);

  return <div>{JSON.stringify(data)}</div>;
}

【讨论】：