next-mdx-frontmatter で Next.js の MDX 内にて Front Matter を使う

引き続き Okachi.js MDX 話の続きです。

• Okachi.js にて、MDX と Next.js について話しました
• スライドはこちら : MDX and Next.js

現在、@next/mdx にて、MDX を使えていますが、変数に関しては Front Matter 形式ではなく、export を使って定義していると書きました。

ちなみに Front Matter って何？って人もいると思うので簡単に解説すると、以下のように markdown 文書の先頭に書くことで、タイトルや OGP 画像といった文書のメタ情報を定義できるというものです。正式には YAML Front Matter と言います。

---
layout: post
title: タイトルが入ります
ogpImage: ogp.png
---

# 見出し

文書が入ります

比較的歴史は古く、静的サイトジェネレーターの古参プロダクトである Jekyll でも採用されています。確認した限り、Jekyll が Front Matter を採用した最初の静的サイトジェネレーターだと思うのですが、もし間違っていたら教えてください。

• Front Matter | Jekyll

さて、この Front Matter を書くと、文書のはじめに Human Readable なメタ情報定義が出来るのでオススメなのですが、以前 Next.js 上で next-mdx-frontmatter を使った際に何故か変数としてうまく変換されませんでした。

今回改めて、導入してみて、無事動作したので、しばらく様子を見つつ本格採用としていければと思います。

導入方法

導入方法は以下のように行います。

1. パッケージのインストール

$ npm i -D next-mdx-frontmatter

2. next.config.js にて設定を記述

まず、require をし、

const withMdxFm = require('next-mdx-frontmatter')()

続いて、設定を記載します。例えば以下のような感じです。

module.exports = withTypescript(
    withMdxFm(
        withSass({
            ...
        })))

withMdx の代わりに withMdxFm を使うことで Front Matter つきの MDX 文書を使えます。

この変数は、MDX 内の JSX にて使うことが出来、例えば、以下のように定義した場合、

---
title: "Okachi.js にて、MDX と Next.js について話しました"
---

以下のように変数として使えます。

export default ({ children }) => <MdxDefault title={title}>{children}</MdxDefault>

つまり、以下のように export で定義する必要がなくなるわけです。

export const title = "Okachi.js にて、MDX と Next.js について話しました"

これで、MDX がすっきりしました。こんなに便利な next-mdx-frontmatter ですが、まだスターが 3 くらいしかないので、気に入った方はどんどん応援しましょう。

参照

• next-mdx-frontmatter
• Next.js
• MDX
• Front Matter | Jekyll