---
title: Next.js
description: Setup Fumadocs on Next.js.
---

## Prerequisite

Before continuing, make sure you have configured:

- Next.js 16.
- Tailwind CSS 4.

We will use [Fumadocs MDX](/docs/mdx) as a content source, you can configure it first:

<include cwd>content/docs/mdx/(integrations)/next.mdx#setup-section</include>

<Callout title='Good to Know'>

Fumadocs also supports other content sources, including [Content Collections](/docs/headless/content-collections) and headless CMS.

</Callout>

## Getting Started

```npm
npm i fumadocs-ui fumadocs-core
```

### Root Layout

Wrap the entire application inside [Root Provider](/docs/ui/layouts/root-provider), and add required styles to `body`.

```tsx title="app/layout.tsx"
import { RootProvider } from 'fumadocs-ui/provider/next';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        // required styles [!code ++]
        className="flex flex-col min-h-screen"
      >
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}
```

### Styles

Add the following Tailwind CSS styles to `global.css`.

```css title="global.css"
@import 'tailwindcss';
/* [!code ++:2] */
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
```

> It doesn't come with a default font, you may choose one from `next/font`.

### Routes

Create a `lib/layout.shared.tsx` file to put the shared options for our layouts.

<include cwd meta='title="lib/layout.shared.tsx"'>
  ../../examples/next-min/lib/layout.shared.tsx
</include>

Create the following files & routes:

<include cwd meta='tab="components/mdx.tsx"'>
  ../../examples/next-min/components/mdx.tsx
</include>

<include cwd meta='tab="app/docs/layout.tsx"'>
  ../../examples/next-min/app/docs/layout.tsx
</include>

<include cwd meta='tab="app/docs/[[...slug]]/page.tsx"'>
  ../../examples/next-min/app/docs/[[...slug]]/page.tsx
</include>

<include cwd meta='tab="app/api/search/route.ts"'>
  ../../examples/next-min/app/api/search/route.ts
</include>

> The search is powered by ZBSearch, learn more about [Document Search](/docs/headless/search).

### Finish

You can start the dev server and create MDX files.

```mdx title="content/docs/index.mdx"
---
title: Hello World
---

## Introduction

I love Anime.
```
