Import MDX Files

Introduction

MDX files will be compiled into JavaScript with exports like:

• default: the main component.
• frontmatter: frontmatter data.
• other properties generated by remark/rehype plugins.

Hence, they can also be used as a page, or components that you can import.

Using as Component

You can import them as a component:

import MyPage from '@/content/page.mdx';
import { getMDXComponents } from '@/mdx-components';

export default function Page() {
  return (
    <div className="prose">
      {/* pass MDX components and render it */}
      <MyPage components={getMDXComponents()} />
    </div>
  );
}

Using as Page

On Next.js, you can use page.mdx instead of page.tsx for creating a new page under the app directory.

---
title: My Page
---

export { default } from '@/components/layouts/page';

# Hello World

This is my page.

MDX Components

It doesn't have MDX components by default, you have to provide them:

import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents, // for Fumadocs UI
    ...components,
  };
}

// export a `useMDXComponents()` that returns MDX components
export const useMDXComponents = getMDXComponents;

Other Frameworks?

Other frameworks like Tanstack Start require explicit declaration of loaders, it's recommended to use them as components in your pages instead.