类型错误：模块“*.mdx”没有导出的成员“元数据”。您的意思是使用“从“*.mdx”导入元数据”吗？

Question

我想从 mdx 文件中获取元数据。
我遵循了这个NextJS Markdown Frontmatter， 但它会导致构建错误。

我无法使用

fs

，所以请注意。

代码

Page.tsx

文件

import ContentPost from "@/components/post.mdx"


const PostPage = () => {
  

  return (
    <div>
          <div className="  mb-8 md:mb-24 text-center">
            <h1 className="text-3xl">Title</h1>
            <p className="text-slate-400 mt-2">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;

*.mdx

文件

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

# Contents text

mdx-components.tsx

文件

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

next.config.mjs

文件

import nextMDX from '@next/mdx';
const withMDX = nextMDX({
    extension:/\.mdx?$/,
    options:{
        remarkPlugins:[],
        rehypePlugins:[],
    }
})


/** @type {import('next').NextConfig} */
const nextConfig = {
    pageExtensions: ['js', 'jsx', 'mdx', 'md', 'ts', 'tsx'],
    images:{
        unoptimized: true,
        remotePatterns:[
        {
            protocol: "https",
            hostname: "img.youtube.com",
        },
    ]
    }
};

export default withMDX(nextConfig);

我在下面尝试过。

export const metadata = {
    title: "Title",
    subtitle: "Sub",
    date: "2024-3-18",
    coverImage: "",
}
 
# My MDX page

在这种情况下，我可以从 .mdx 文件中获取元数据。
它在

npm run dev

上完美运行。
但当我尝试构建时，它导致了这个错误。

Type error: Module '"*.mdx"' has no exported member 'metadata'. Did you mean to use 'import metadata from "*.mdx"' instead?

  4 | import Link from "next/link";
  5 |
> 6 | import ContentPost, { metadata } from "@/components/post.mdx";
    |                       ^
  7 |
  8 |
  9 | const PostPage = () => {


Error: An unexpected error has occurred.

Answer 1

我自己想出了一个办法。

首先，我不知道frontmatter是什么。所以我无法使用 frontmatter api。明白了这一点后，我找到了我需要的功能。这是

matter.read("md path")

。不过，我必须将

*.mdx

文件更改为

*.md

。

为了解决这个问题，我使用了两个主要的 API。

import Markdown from "markdown-to-jsx"
import matter from "gray-matter";

const PostPage = () => {
  const postObj =matter.read("public/post-contents/post.md")
  const metadata = postObj.data

  return (
    <div>
          <div className="  mb-8 md:mb-24 text-center">
            <h1 className="text-3xl">Title</h1>
            <p className="text-slate-400 mt-2">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;