Content Collections
Use Content Collections for Fumadocs
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/mdxTo integrate with Fumadocs, add the following to your content-collections.ts.
import { defineCollection, defineConfig } from '@content-collections/core';
import { transformMDX } from '@fumadocs/content-collections/configuration';
import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
const docs = defineCollection({
name: 'docs',
directory: 'content/docs',
include: '**/*.mdx',
schema: pageSchema,
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().
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 customize 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 '@/components/mdx';
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.
How is this guide?