remark-next-mdx-frontmatter

README

This module allows you to use Frontmatter with @next/mdx which doesn't officially support frontmatter.

To install

$ yarn add remark-next-mdx-frontmatter

Configure your next.config.mjs. This module doesn't support next.config.js.

// next.config.mjs
import withMDXFm from "@next/mdx";
import remarkFm from "./lib/frontmatter.mjs";

const withMDX = withMDXFm({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [remarkFm, { path: "../components/Post" /* default path to layout component */ }]
    ]
  },
});

const config = withMDX({ ...nextConfig });
export default config;

Make a component at the path. The attribute name is frontmatter.

// ../components/Post
type PostProps = {
  children: JSX.Element;
  frontmatter: {
    [key: string]: number | string;
  };
};

export default function Post({ children, frontmatter }: PostProps) {
  return (
    <article>
      {frontmatter.title} written by {frontmatter.author}.
      <section>{children}</section>
    </article>
  );
}

Put a .mdx file with frontmatter.

// pages/hello.mdx
---
title: hello world
author: tmtk75
---
# Hello World
something...