Next.js中MDX文件metadata导出构建报错问题求助

1. 修正MDX文件的Frontmatter格式 #

你的MDX文件frontmatter使用了YAML格式，但多余的逗号会导致解析异常，先删除所有逗号：

---
title: "Title"
subtitle: "Sub"
date: "2024-3-18"
coverImage: ""
---

# Contents text

2. 显式导出MDX Metadata #

在MDX文件末尾添加代码，将frontmatter内容作为metadata变量导出（MDX编译时会自动暴露frontmatter变量对应YAML头内容）：

---
title: "Title"
subtitle: "Sub"
date: "2024-3-18"
coverImage: ""
---

# Contents text

export const metadata = {
  title: frontmatter.title,
  subtitle: frontmatter.subtitle,
  date: frontmatter.date,
  coverImage: frontmatter.coverImage,
}

3. 添加MDX类型声明文件 #

新建types/mdx.d.ts文件，为TypeScript提供MDX模块的类型定义，避免构建时类型错误：

declare module '*.mdx' {
  import type { MDXProps } from 'mdx/types'
  const Component: (props: MDXProps) => JSX.Element
  export const metadata: {
    title: string
    subtitle: string
    date: string
    coverImage: string
  }
  export default Component
}

同时在tsconfig.json中确保types目录被TypeScript识别：

{
  "compilerOptions": {
    // 保留原有配置
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

4. 在Page组件中正常使用 #

现在可以正确导入并使用metadata：

import ContentPost, { metadata } from "@/components/post.mdx"

const PostPage = () => {
  return (
    <div>
          <div className="mb-8 md:mb-24 text-center">
            <h1 className="text-3xl">{metadata.title}</h1>
            <p className="text-slate-400 mt-2">{metadata.date}</p>
          </div>

          <article className="prose mb-52 prose-emerald md:prose-lg lg:prose-xl dark:prose-invert">
            <ContentPost />
          </article>
    </div>
  );
};

export default PostPage;

替代方案：用插件自动导出Frontmatter #

如果不想手动写导出代码，可以通过remark插件自动提取并导出frontmatter：

安装依赖 #

npm install remark-frontmatter remark-extract-frontmatter yaml

修改next.config.mjs #

import nextMDX from '@next/mdx';
import remarkFrontmatter from 'remark-frontmatter';
import remarkExtractFrontmatter from 'remark-extract-frontmatter';
import yaml from 'yaml';

const withMDX = nextMDX({
    extension:/\.mdx?$/,
    options:{
        remarkPlugins:[
          remarkFrontmatter,
          [remarkExtractFrontmatter, { yaml: yaml.parse }]
        ],
        rehypePlugins:[],
    }
})

// 保留原有nextConfig配置

此时MDX的frontmatter会自动作为frontmatter命名导出，只需同步更新类型声明文件中的导出字段即可。

内容的提问来源于stack exchange，提问作者Sevovo