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，建議使用 next.config.mjs，以確保 ESM 能正確解析。

若要使用 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(),
});