next-mdx-remoteの使い方

October 14, 2024

本記事ではnext-mdx-remoteについて紹介します。

next-mdx-remoteの概要

next-mdx-remoteは、Next.jsアプリケーションでMDX（Markdown with JSX）ファイルを動的にレンダリングするためのモジュールです。MDXは、Markdownの書式にReactコンポーネントを埋め込むことができる拡張機能で、ブログやドキュメントの作成に便利です。

何ができるモジュールなのか

next-mdx-remoteを使うと、以下のことが可能になります：

サーバーサイドでのMDXファイルのレンダリング：next-mdx-remoteを使用すると、MDXコンテンツをサーバーサイドで解析し、静的ページやSSR（サーバーサイドレンダリング）の形で提供できます。動的なデータを取得して、その内容をMDXとしてレンダリングすることも可能です。
Reactコンポーネントとの統合：MDXの中にReactコンポーネントを挿入し、動的な要素をMarkdownファイル内で利用することができます。これにより、コードブロック、カスタムレイアウト、インタラクティブなUIコンポーネントなどを埋め込むことができます。
静的サイト生成（SSG）との相性が良い：Next.jsの静的サイト生成（SSG）機能と組み合わせることで、ビルド時にMDXファイルを事前にレンダリングし、パフォーマンスを最適化したページを生成できます。

導入するメリット

柔軟なコンテンツ作成：Markdownのシンプルな書式でコンテンツを作成しつつ、必要に応じてReactコンポーネントを埋め込むことができます。これにより、コンテンツ編集者と開発者の間で役割を分けやすくなります。
パフォーマンスの向上：静的ページ生成とサーバーサイドレンダリングのサポートにより、ページの読み込み速度が向上します。特に、next-mdx-remoteは動的なデータを含むMDXコンテンツでもサーバー側で処理できるため、クライアント側の負荷を軽減できます。
カスタマイズ性：next-mdx-remoteを使うと、MDXコンテンツのレンダリング方法を柔軟にカスタマイズできます。独自のコンポーネントを定義して、MDX内で使用するタグや要素を拡張することが可能です。

これらのメリットにより、ブログ、技術ドキュメント、インタラクティブなコンテンツページなどをNext.jsアプリケーションで効率的に実装できます。

導入方法

Copied!!
npm install next-mdx-remote

使い方

ポイント
- serialize関数に表示したいmarkdownの文字列を渡す
  - ローカルディレクトリに置いているファイルやリモートに置いているファイル、データベースから読み取ることも可能です。
- 自分で作成したコンポーネントをmarkdown内に書き込み利用できる
出力結果

pages/examples/next-mdx-remote.js
Copied!!
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import Test from '../../components/next-mdx-remote-test'

const components = { Test }

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = '**マークダウン** のテキスト, カスタムなコンポーネント <Test link="/posts/next-mdx-remote" title="next-mdx-remoteの使い方" />'
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}

components/next-mdx-remote-test.js
Copied!!
import Link from 'next/link';

export default function Test({ link, title }) {
    return (
      <Link href={link}>「{title}」へ戻る</Link>
    )
}

next-mdx-remoteの拡張

next-mdx-remoteでは以下のような機能をサポートしていません。これらはコンポーネントを工夫することで追加できます。

マークダウン内のリンクをタブで開くようにする
コードのシンタックスハイライト
コードのファイル名を表示する

TAKEO