Next.js + MDX でエラーが出る？実装方法

先日、Next.jsとMDXの動作確認をしてみました。ドキュメントに少し不親切な部分があり、エラーに躓きました。実装方法について説明します。

公式ドキュメント

next.config.mjsを編集

ドキュメントではnext.config.jsになっていますが、現在、Next.jsの設定ファイルはnext.config.mjsです。そのため、ドキュメントのnext.config.jsのコードではエラーが発生します。

ReferenceError: require is not defined in ES module scope, you can use import instead

ReferenceError: module is not defined in ES module scope

ドキュメントの下の方にnext.config.mjsのコードがあるので、そちらを使用します。

my-app/next.config.mjs

import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure "pageExtensions" to include MDX files
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below
}

const withMDX = createMDX({
// Add markdown plugins here, as desired
options: {
  remarkPlugins: [remarkGfm],
  rehypePlugins: [],
},
})

// Wrap MDX and Next.js config with each other
export default withMDX(nextConfig)

remark-gfmをインストールします。

npm i remark-gfm

mdx-components.tsxを作成

公式ドキュメントの通り、プロジェクトのルート直下にmdx-components.tsxを作成します。

my-app/mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
  ...components,
}
}

コンポーネントを作成

ルートにcomponentsフォルダを作り、その中に任意のコンポーネントを作成します。

my-app/components/test-component.tsx

import React from "react";

const TestComponent = () => {
  return (
      <div>TestComponent</div>
  );
}

export default TestComponent;

mdxファイルを作成

appフォルダの直下にtest-pageフォルダを作成し、その中にpage.mdxを作成します。

my-app/app/test-page/page.mdx

import TestComponent from "@/components/test-component"

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

Checkout my React component:

<TestComponent />

ページを確認

ローカルサーバーを起動します。

npm run dev

以下のURLにアクセスし、正しく表示されることを確認します。

http://localhost:3000/test-page

Tech Wiz