Content Collections

Content Collections is a library that transforms your content into type-safe data collections.

Setup

Follow their official guide to setup Content Collections for your React framework.

Make sure you have MDX configured:

npm i @content-collections/mdx

To integrate with Fumadocs, add the following to your content-collections.ts.

content-collections.ts

import { defineCollection, defineConfig } from '@content-collections/core';
import {
  frontmatterSchema,
  metaSchema,
  transformMDX,
} from '@fumadocs/content-collections/configuration';

const docs = defineCollection({
  name: 'docs',
  directory: 'content/docs',
  include: '**/*.mdx',
  schema: frontmatterSchema,
  transform: transformMDX,
});

const metas = defineCollection({
  name: 'meta',
  directory: 'content/docs',
  include: '**/meta.json',
  parser: 'json',
  schema: metaSchema,
});

export default defineConfig({
  collections: [docs, metas],
});

And pass it to loader().

lib/source.ts

import { allDocs, allMetas } from 'content-collections';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from '@fumadocs/content-collections';

export const source = loader({
  baseUrl: '/docs',
  source: createMDXSource(allDocs, allMetas),
});

Done! You can access the pages and generated page tree from Source API.

import { getPage } from '@/lib/source';

const page = getPage(slugs);

// MDX output
page?.data.body;

// Table of contents
page?.data.toc;

// Structured Data, for Search API
page?.data.structuredData;

MDX Options

You can customise MDX options in the transformMDX function.

import { defineCollection } from '@content-collections/core';
import { transformMDX } from '@fumadocs/content-collections/configuration';

const docs = defineCollection({
  transform: (document, context) =>
    transformMDX(document, context, {
      // options here
    }),
});

Import Components

To use components from other packages like Fumadocs UI, pass them to your <MDXContent /> component.

import { MDXContent } from '@content-collections/mdx/react';
import { getMDXComponents } from '@/mdx-components';

return <MDXContent code={page.data.body} components={getMDXComponents()} />;

You can also import them in MDX Files, but it is not recommended.

Deep Dive: Why?

Content Collections uses mdx-bundler to bundle MDX files.

To support importing a package from node modules, Fumadocs added a default value to the cwd option of MDX Bundler. It works good, but we still do not recommend importing components in MDX files.

Reasons:

It requires esbuild to bundle these components, while it should be done by the framework's bundler (e.g. Vite or Turbopack)
You can refactor the import path of components without changing your MDX files.
With Remote Sources, it doesn't make sense to add an import in MDX files.

Content Collections

Setup

MDX Options

Import Components

On this page