I am attempting to extract metadata from an mdx file.
I have followed the guidelines outlined in NextJS Markdown Frontmatter, but encountered build errors.
It is important to note that I am unable to utilize fs.
Code Section
Page.tsx File
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 File
---
title: "Title",
subtitle: "Sub",
date: "2024-3-18",
coverImage: "",
---
# Contents text
mdx-components.tsx File
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}
next.config.mjs File
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);
I Also Attempted The Following
export const metadata = {
title: "Title",
subtitle: "Sub",
date: "2024-3-18",
coverImage: "",
}
# My MDX page
In this scenario, I successfully retrieved the metadata from the .mdx file and it ran smoothly when using npm run dev. However, a build error occurred as follows:
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.