---
title: Next.js
description: Use Fumadocs MDX with Next.js
---

## Setup

Set up Fumadocs MDX for your Next.js application.

<section id="setup-section">
<div className="fd-steps [&_h3]:fd-step">

### Installation

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

Add the plugin to Next.js config:

```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);
```

<Callout title="ESM Only" type='warn'>

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

For TypeScript config file, it requires Native Node.js TypeScript Resolver, you can see [Next.js docs](https://nextjs.org/docs/app/api-reference/config/typescript#using-nodejs-native-typescript-resolver-for-nextconfigts) for details.

</Callout>

### Integrate with Fumadocs

Create a `lib/source.ts` file:

```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

You can now write content in `content/docs` folder.

</div>
</section>

## What is Next?

<Cards>
  <Card title="Macro API" href="/docs/mdx/macro">
    Define collections in your app modules with `fumadocs-mdx/macro`.
  </Card>
  <Card title="Config API" href="/docs/mdx/collections">
    Define collections in `source.config.ts` with generated entry files.
  </Card>
  <Card title="Lazy Loading" href="/docs/mdx/async">
    Hit performance bottleneck? You can try lazy loading.
  </Card>
</Cards>
