Learn how to use Contentlayer with Fumadocs

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.


According to the state of Contentlayer, it is no longer actively maintained.

You may consider Fumadocs MDX, it is a drop-in replacement to Contentlayer. Other content sources like MDXTS and Content Collections can also be supported via a custom adapter.

This adapter has been deprecated, please take it on your own risk.


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

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

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.


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

Last updated on

On this page

Edit on Github