如何在nextjs中导出mdx

Question

My Problem

关于mdx的nextjs文档说明它不支持frontmatter。相反，建议创建一个常量并将其导出[1]。然而，我似乎无法以这种方式导出数据。例如，使用下面的

/* -- ./pages/example.mdx -- */
export const meta = {
title: 'some example title'
}

/* -- ./pages/index.js -- */
import Example from './example.mdx';
export default function Index ({ ... props }) {
return <Example />
}

似乎导入的东西可以用作react组件，但似乎没有任何地方引用meta属性。

• Example没有meta属性
• import { meta } from './example.mdx不产生任何
• 在渲染组件上没有meta键
• 使用require ('./example.mdx')产生相同的结果。

我想做的

我有一个markdown文件列表，并希望创建一个概述页面，其中列出了所有这些文件，使用每个文件中定义的元数据。类似于下面的

import fs from 'fs/promises';
import path from 'path';
export async function getStaticProps () {
const root = path.join (process.cwd (), 'pages/items');
const listing = await fs.readdir(root);
const items = listing
.filter (item => item.endsWith ('.mdx'))
.map (item => {
const meta = require (`./items/${item}`).meta;
const id = item.replace (/.md$/, '');
return { id, ... meta }
});
return { props: { items } };
}
export default function Overview ({ items, ... props }) {
/* ... use items */
}

<标题>

编辑似乎使用.md和.mdx之间有很大的区别。在这里给出的示例中，我使用了.mdx，但在本地我使用了.md。切换扩展使一切正常。

这是奇怪的扩展产生这样的差异，即使它们都配置在next.config.js

const withMDX = require ('@next/mdx') ({
extension: /.mdx?$/
});
module.exports = withMDX ({ /* ... */ });

[1] https://nextjs.org/docs/advanced-features/using-mdx frontmatter

Answer 1

使用.mdx扩展代替.md扩展

Answer 2

似乎你可以创建一个输入文件来导入它如果你使用typescript

步骤1 -创建输入文件

declare module '*.mdx' {
export const meta: {
title: string
}
}

步骤2 -导入导出的内容

import Example, {meta} from './example.mdx';

从这里得到答案https://gist.github.com/peterblazejewicz/1ac0d99094d1886e7c9aee7e4faddef3#file-index-d-ts-L68