Contentlayer

We have native support for Contentlayer which provides the default configuration with required MDX plugins.

It also adds extra functionalities to Contentlayer, making it more convenient to use and straightforward.

Setup

npm install fumadocs-contentlayer

Edit your configuration.

contentlayer.config.ts

import { makeSource } from 'contentlayer/source-files';
import { defaultConfig } from 'fumadocs-contentlayer/configuration';

export default makeSource(defaultConfig);

Note

Configuration file can't be imported from Next.js runtime.

Load the files with Source API.

import { allDocs, allMeta } from 'contentlayer/generated';
import { createContentlayerSource } from 'fumadocs-contentlayer';
import { loader } from 'fumadocs-core/source';

export const docs = loader({
  baseUrl: '/docs',
  rootDir: 'docs',
  source: createContentlayerSource(allMeta, allDocs),
});

Pages Structure

All documents should be located in /content or /content/docs.

Pages Structure

Learn how to structure your pages

Adding Icons

You can configure the icon handler in the loader.

Setup

Pages Structure

Pages Structure

Adding Icons

On this page