Next.js Discord

Discord Forum

Using remark-mdx-frontmatter with Next.js

Unanswered
Saltwater Crocodile posted this in #help-forum
Open in Discord
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:

 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?

0 Replies