Import MDX Files | Hanzo Docs

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:

app/my-page.tsx

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.

app/my-page/page.mdx

components/layouts/page.tsx

---
title: My Page
---

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

# Hello World

This is my page.

import type { ComponentProps } from 'react';

export default function Content(props: ComponentProps<'main'>) {
  return (
    <main className="px-8 py-12">
      <article className="prose">{props.children}</article>
    </main>
  );
}

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

mdx-components.tsx

source.config.ts

import defaultMdxComponents from '@hanzo/docs/ui/mdx';
import type { MDXComponents } from 'mdx/types';

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

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

import { defineConfig } from '@hanzo/docs/mdx/config';

export default defineConfig({
  mdxOptions: {
    // Path to import your `mdx-components.tsx` above.
    providerImportSource: '@/mdx-components',
  },
});

Other Frameworks?

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