Contentlayer

Fumadocs provides the default configuration with required MDX plugins for Contentlayer.

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

Setup

npm install fumadocs-contentlayer contentlayer next-contentlayer

Configure Contentlayer correctly.

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 Files

Using 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),
});

Organize Pages

Pages Structure

Learn how to structure your pages

Adding Icons