MDX Remote

IntroductionCopy Anchor Link

Fumadocs offers the MDX Remote package, it is a helper to integrate Markdown/MDX content sources with Fumadocs. You can think it as a next-mdx-remote with built-in plugins for Fumadocs.

import { createCompiler } from '@fumadocs/mdx-remote';

const compiler = createCompiler({
  format: 'md',
  // skip reading files and fetching URLs for image sizes
  remarkImageOptions: false,
});

SetupCopy Anchor Link

npm install @fumadocs/mdx-remote

The main feature it offers is the MDX Compiler, it can compile MDX content to JSX nodes. Since it doesn't use a bundler, there's some limitations:

• Images have to be optimized at runtime.
• No imports and exports in MDX files.

UsageCopy Anchor Link

Create a compiler:

import { createCompiler } from '@fumadocs/mdx-remote';

export const compiler = createCompiler({
  // options
});

Compile the content of your pages, @/lib/source stands for your content source:

import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { compiler } from '@/lib/compiler';
import { getPage } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
  const { slug } = await props.params;
  const page = getPage(slug);
  const { body: MdxContent, toc } = await compiler.compile({
    source: page.content,
  });

  return (
    <DocsPage toc={toc}>
      <DocsBody>
        <MdxContent components={getMDXComponents()} />
      </DocsBody>
    </DocsPage>
  );
}

ImagesCopy Anchor Link

On serverless platforms like Vercel, the original public folder (including static assets like images) will be removed after production build. The MDX compiler might no longer be able to access local images in public.

When referencing images, make sure to use a URL.