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

import { makeSource } from 'contentlayer/source-files';
import { defaultConfig } from 'fumadocs-contentlayer/configuration';
 
export default makeSource(defaultConfig);

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

Adding Icons

You can configure the icon handler in the loader.

Image Optimization

Contentlayer integration supports the built-in next/image component by looking for the size of images automatically. You can enjoy the benefits of Next.js Image Optimization without extra configurations.

The image must be located under the /public folder.

![banner](/banner.png)

Under the hood, It gets the image size using rehype-img-size, then pass the obtained size to your image element.