Content Collections

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

Setup

Install the required packages.

npm install @fumadocs/content-collections @content-collections/core @content-collections/mdx @content-collections/next

After the installation, add a path alias for the generated collections to the tsconfig.json.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      "content-collections": ["./.content-collections/generated"]
    }
  }
}

In the Next.js configuration file, apply the plugin.

next.config.mjs

import { withContentCollections } from '@content-collections/next';
 
/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};
 
export default withContentCollections(config);

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

content-collections.ts

import { defineCollection, defineConfig } from '@content-collections/core';
import {
  createMetaSchema,
  createDocSchema,
  transformMDX,
} from '@fumadocs/content-collections/configuration';
 
const docs = defineCollection({
  name: 'docs',
  directory: 'content/docs',
  include: '**/*.mdx',
  schema: createDocSchema,
  transform: transformMDX,
});
 
const metas = defineCollection({
  name: 'meta',
  directory: 'content/docs',
  include: '**/meta.json',
  parser: 'json',
  schema: createMetaSchema,
});
 
export default defineConfig({
  collections: [docs, metas],
});

And pass it to Source API.

app/source.ts

import { allDocs, allMetas } from 'content-collections';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from '@fumadocs/content-collections';
 
export const { getPage, getPages, pageTree } = loader({
  baseUrl: '/docs',
  source: createMDXSource(allDocs, allMetas),
});

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

import { getPage } from '@/app/source';
 
const page = getPage(slugs);
 
// MDX output
page?.data.body;
 
// Table of contents
page?.data.toc;
 
// Structured Data, for Search API
page?.data.structuredData;

Content Collections

Setup

On this page