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