Next.js で MDX (Markdown React) を使って SSG したい

このブログは互換性重視なので、極力通常の Markdown を書いているのですが、例えばドキュメントサイトとかだと、
React Component を扱えると便利なケースがあります。
よくあるパターンだと、タブとかそういうものですね。

ということで、 Next.js で MDX を扱う方法。

今回は contentlayer と呼ばれるライブラリーをベースにします。
これは、 Markdown とか MDX、その他のコンテンツを良い感じに扱えるようにしてくれるラッパーみたいなライブラリです。
ということで、いつも通りインストールから。

$ yarn add contentlayer next-contentlayer

その後、 contentlayer.config.ts にスキーマを記述します。
ブログの場合は下のような感じ：

import { defineDocumentType, makeSource } from "contentlayer/source-files";

const Blog = defineDocumentType({
  name: "Blog",
  filePathPattern: "blog/**/*.md",
  bodyType: "mdx",
  fields: {
    title: { type: "string", required: true },
    date: { type: "date", required: true },
  },
});

const config = makeSource({
  contentDirPath: "contents",
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [require("remark-gfm")],
    rehypePlugins: []
  },
});

export default config;

next.config.js もこんな感じ。

const { withContentlayer } = require("next-contentlayer");

module.exports = withContentlayer()({
  reactStrictMode: true,
  trailingSlash: true,
});

で、 pages/[...slug].tsx はこんな感じにする

import React from "react";
import { useMDXComponent } from "next-contentlayer/hooks";
import { allBlogs } from ".contentlayer/data";

import SomeComponent from "../components/SomeComponent";

const getStaticPaths = ...;
const getStaticProps = ...;

export default Entry = ({ entry }) => {
  const Component = useMDXComponent(entry.body.code);

  return (
    <>
      <Component components={{ SomeComponent }}/>
    </>
  );
}

こんな感じで使えます。
ということでメモでした。