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

はじめに

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

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

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

環境

• Next.js：14.0.3

手順

必要なパッケージのインストール

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

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

設定ファイル（next.config.js）に追加

以下のように記します。

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

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

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

tsx にインポート

src/app/page.tsx を作成します。

"use client"
import Mdx from '@/component/md.mdx'

const App = () => {
  return (
    <>
      <Mdx />
    </>
  );
}
export default App;

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

文献

Markdown and MDX

おわりに

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