# Fumadocs MDX (the built-in content source): Next.js
URL: /zh-TW/docs/mdx/next
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/mdx/(integrations)/next.zh-TW.mdx
在 Next.js 中使用 Fumadocs MDX
## 設定 [#setup]
為您的 Next.js 應用程式設定 Fumadocs MDX。
### 安裝 [#installation]
```npm
npm i fumadocs-mdx fumadocs-core @types/mdx
```
在 Next.js 設定中加入外掛：
```js title="next.config.mjs"
import { createMDX } from 'fumadocs-mdx/next';
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
};
// [!code ++:4]
const withMDX = createMDX();
// [!code highlight]
export default withMDX(config);
```
Fumadocs MDX 僅支援 ESM，建議使用 `next.config.mjs`，以確保 ESM 能正確解析。
若要使用 TypeScript 設定檔，則需啟用 Node.js 原生 TypeScript 解析器，詳情請參閱 [Next.js 文件](https://nextjs.org/docs/app/api-reference/config/typescript#using-nodejs-native-typescript-resolver-for-nextconfigts)。
### 與 Fumadocs 整合 [#integrate-with-fumadocs]
建立 `lib/source.ts` 檔案：
```ts title="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(),
});
```
### 完成 [#done]
現在您可以開始在 `content/docs` 資料夾中撰寫內容了。
## 下一步 [#what-is-next]
使用 `fumadocs-mdx/macro` 在應用程式模組中定義集合。
在 `source.config.ts` 中定義集合，並透過產生的進入點檔案存取。
遇到效能瓶頸了嗎？您可以試試延遲載入。