Next.jsでmdxを使ってみた。@next/mdxのインストールから表示までの手順。

はじめに

マークダウンのライブラリの選択肢は、今回紹介するNext/MDXの他にもあります。
Reactで、react-markdownを使用したことがありますが、個人的には好みではなく、
完全なマークダウンではなく、何かしら変数を組み合わせられたり簡単に画像を挿入できたりと要件がありました。

そういった要件を満たそうとすると、どうしても複雑になりがちです。
そんな中「Next/MDX」が要件を満たしており、なおかつスマートに記述できるので選定してみました。

プロジェクトに追加するところから、表示するところまで記します。

@next/mdxのレンダリングにあたり、いくつかのパッケージが必要になります。
下のコマンドを実行してプロジェクトに追加します。

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

以下のように記します。

// next.config.js
const withMDX = require('@next/mdx')()
const nextConfig = {
	//省略
};
module.exports = withMDX(nextConfig);

withMDXは、MDXを構成するMarkDownとReactをサポートするためのプラグインです。
widthMDX(nextConfig)と記すことで、MDXファイルがビルドプロセスに統合されるようになります。

src/component/md.mdx

を作成します。

# Welcome to my MDX page!
 
This is some **bold** and _italics_ text.
 
This is a list in markdown:
 
- One
- Two
- Three

src/app/page.tsx

を作成します。

"use client"
import Mdx from '@/component/md.mdx'
const App = () => {
  return (
  <>
    <Mdx />
  </>
 );
}
export default App;

このように記すことで、マークダウンがHTMLレンダリングされて表示することができます。
App Routerを使用しているため、”use client”を先頭につけています。

導入も簡単で、扱いやすいですね。
マークダウンライブラリの中でも人気があるので、参考文献が多く助かります。
また、他のフレームワークでも使用できるそうで汎用的に使えそうですね。