Next.js

安装

🌐 Setup

为你的 Next.js 应用设置 Fumadocs MDX。

🌐 Set up Fumadocs MDX for your Next.js application.

安装

🌐 Installation

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

创建配置文件：

🌐 Create the configuration file:

source.config.ts

import { defineDocs, defineConfig } from 'fumadocs-mdx/config';

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

export default defineConfig();

将插件添加到 Next.js 配置中：

🌐 Add the plugin to Next.js config:

next.config.mjs

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

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

const withMDX = createMDX({
  // customise the config file path
  // configPath: "source.config.ts"
});

export default withMDX(config);

仅限 ESM

Fumadocs MDX 仅支持 ESM，建议使用 next.config.mjs 以实现准确的 ESM 解析。

🌐 Fumadocs MDX is ESM-only, it's recommended to use next.config.mjs for accurate ESM resolution.

对于 TypeScript 配置文件，它需要本地 Node.js TypeScript 解析器，你可以查看 Next.js 文档获取详细信息。

🌐 For TypeScript config file, it requires Native Node.js TypeScript Resolver, you can see Next.js docs for details.

Setup an import alias (recommended):

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "fumadocs-mdx:collections/*": [".source/*"]
    }
  }
}

与 Fumadocs 集成

🌐 Integrate with Fumadocs

你可以创建一个 lib/source.ts 文件，并从 docs 集合输出中获取 Fumadocs 源代码。

🌐 You can create a lib/source.ts file and obtain Fumadocs source from the docs collection output.

lib/source.ts

import { docs } from 'fumadocs-mdx:collections/server';
import { loader } from 'fumadocs-core/source';

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