Contentlayer

Learn how to use Contentlayer with Fumadocs

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
  1. 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.

  1. 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.

Last updated on

Source API

Image Optimization

Edit on Github