使用 create-next-app 创建一个新的 Next.js 应用程序，并安装所需的包。
fumadocs-ui fumadocs-core
Fumadocs 支持不同的内容源，您可以选择您喜欢的一种。
以下是官方支持的源列表：
请确保在继续之前按照其设置指南正确配置库，我们将在本指南中使用 @/lib/source.ts 导入源适配器。
将整个应用程序包装在 Root Provider 中，并为 body 添加所需的样式。
import { RootProvider } from 'fumadocs-ui/provider' ; import type { ReactNode } from 'react' ;
export default function Layout ({ children } : { children : ReactNode }) { return ( < html lang = "en" suppressHydrationWarning > < body // you can use Tailwind CSS too style = {{ display: 'flex' , flexDirection: 'column' , minHeight: '100vh' , }} > < RootProvider >{children}</ RootProvider > </ body > </ html > ); } 在您的 Next.js 应用程序上设置 Tailwind CSS v4，将以下内容添加到 global.css。
@import 'tailwindcss' ; @import 'fumadocs-ui/css/neutral.css' ; @import 'fumadocs-ui/css/preset.css' ;
/* path of `fumadocs-ui` relative to the CSS file */ @source '../node_modules/fumadocs-ui/dist/**/*.js';
它不附带默认字体，您可以从 next/font 中选择一个。
创建一个 app/layout.config.tsx 文件，放置我们布局的共享选项。
{ "file" : "../../examples/next-mdx/app/layout.config.tsx" , "codeblock" : { "meta" : "title= \" app/layout.config.tsx \" " } } 为我们的文档创建一个文件夹 /app/docs，并给它一个适当的布局。
{ "file" : "../../examples/next-mdx/app/docs/layout.tsx" , "codeblock" : { "meta" : "title= \" app/docs/layout.tsx \" " } }
pageTree 指的是页面树，应该由您的内容源提供。
为文档页面创建一个捕获所有路由 /app/docs/[[...slug]]。
在页面中，将您的内容包装在 Page 组件中。
这可能因您的内容源而异。您应该使用 generateStaticParams 配置静态渲染，并使用 generateMetadata 配置元数据。
Fumadocs MDX Content Collections
{ "file" : "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx" , "codeblock" : { "meta" : "title= \" app/docs/[[...slug]]/page.tsx \" tab= \" Fumadocs MDX \" " } }
使用基于 Orama 的默认文档搜索。
Fumadocs MDX Content Collections
{ "file" : "../../examples/next-mdx/app/api/search/route.ts" , "codeblock" : { "meta" : "title= \" app/api/search/route.ts \" tab= \" Fumadocs MDX \" " } }
了解更多关于文档搜索 的信息。
您可以启动开发服务器并创建 MDX 文件。
--- title : Hello World ---
## Introduction
I love Anime. 您可以为网站的其他页面使用 Home Layout ，它包含一个带有主题切换的导航栏。
它应该在 Vercel 和 Netlify 上开箱即用。
如果您想使用 Docker 部署您的 Fumadocs 应用程序，并且已配置了 Fumadocs MDX ，请确保将 source.config.ts 文件添加到 Dockerfile 中的 WORKDIR。
以下片段取自官方 Next.js Dockerfile 示例 ：
WORKDIR /app
# Install dependencies based on the preferred package manager COPY package.json yarn.lock * package-lock.json * pnpm-lock.yaml * .npmrc * source.config.ts ./ 这确保 Fumadocs MDX 在构建期间可以访问您的配置文件。
