Using remark-mdx-frontmatter with Next.js
Unanswered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
I add metadata to my MDX-pages using yaml-frontmatter. I want to use the metadata to render a header-component, that should precede the actual content of the article. I added the plugin like so:
But now I don't know where I can find the metadata! I tried looking at the props of the
How can I get a hold of my metadata?
js
import nextMDX from "@next/mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
};
const withMDX = nextMDX({
options: {
remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
rehypePlugins: [],
},
});
export default withMDX(nextConfig);But now I don't know where I can find the metadata! I tried looking at the props of the
layout.tsx, where the mdx is rendered, but there is no object with name frontmatter there, [as advertised in the remark-mdx-frontmatter repository](https://github.com/remcohaszing/remark-mdx-frontmatter#usage).How can I get a hold of my metadata?