Next.js

セットアップ

Next.js アプリケーションに Fumadocs MDX をセットアップします。

インストール

npm i fumadocs-mdx fumadocs-core @types/mdx

Next.js の設定ファイルにプラグインを追加します。

next.config.mjs

import { createMDX } from 'fumadocs-mdx/next';

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

const withMDX = createMDX();

export default withMDX(config);

ESM 専用

Fumadocs MDX は ESM 専用です。ESM を正しく解決するため、next.config.mjs の使用をおすすめします。

TypeScript の設定ファイルを使用するには、Node.js ネイティブの TypeScript リゾルバーが必要です。詳しくは Next.js のドキュメントを参照してください。

Fumadocs との統合

lib/source.ts ファイルを作成します。

lib/source.ts

import { defineDocs } from 'fumadocs-mdx/macro';
import { loader } from 'fumadocs-core/source';

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});