React-Static V7 でマークダウン(react-static-plugin-mdx)を使う

React-Static V7 から react-static-plugin-mdx というプラグインが公式で開発されていました。

今までは独自か react-static-plugin-markdown プラグインを使っていましたが、今後は react-static-plugin-mdx を使うことになりそうです。

概要

• react-static/README.md · react-static/react-static · GitHub

詳細は上記を参照すれば使い方まで書かれていますが、react-static-plugin-markdown との違いを中心に一応簡単に。
なお react-static-plugin-markdown に関しては以下をどうぞ。

• react-static-plugin-markdownの使い方 – WEBUTUBUTU

react-static-plugin-markdown との違い

• 中身はmdx-jsのため、mdファイル内にJSXが使える
• 専用のフォルダやファイルを用意する必要はなく、static.config.jsで設定したあとはmdファイルを指定フォルダに入れるだけでいい
• Front Matterが使えない

基本的には楽になる部分がありますし、JSXが使えるのは大きいです。

反面、react-static-plugin-markdownからの乗り換えであれば、Front Matterの部分をJSXかまた別の方法に置き換える必要がある点は面倒に感じました。

使い方

前述の参考ページに載っているので基本的な使い方はそちらを見ていただくとして、basicテンプレートをベースにマークダウンを使う場合の記述例を以下に記載ます。

export default {
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
    [
      require.resolve('react-static-plugin-mdx'),
      {
        extensions: ['.md', '.mdx'], // NOTE: these are the default extensions
      }
    ],
  ]
};

少し関係ないものも入っていますが、上記の記述でsrc/pagesにmdファイルを入れればページとして出力されます。

結び

マークダウンが公式でフォローしてもらえる機能となった点は大きいです。

反面、マークダウンファイルをプレーンに保ちたい場合には工夫が要りそうです。
別システムで使う際に不要部分の削除や書き換えが加工可能な状態にしておけるなら、この点はそれほど気にせずともよいのかもしれませんが。