Adding new Conventions

mdx-component.tsx

Sometimes there's questions raised by beginners confused about where to add MDX components. Although it's simply located in page.tsx which shouldn't be difficult to find, I think some kind of conventions may help, so I decided to add back mdx-components.tsx.

I love to have fewer files, but considering create-fumadocs-app should also act as a starting point for beginners who may not familiar with MDX, it's such more helpful to provide it by default.

Existing Projects

The convention is optional (only to make the learning curve smoother). For existing users, you probably knew how to pass MDX components, and no further change is needed.

But you can still make one:

import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
 
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    ...components,
  };
}

And use it in your MDX component.

import { getMDXComponents } from '@/mdx-components';
 
<MDXContent
  components={getMDXComponents({
    // extend it
  })}
/>;

Deprecating <I18nProvider />

We now prefer a single <RootProvider /> for everything, replacing the need of <I18nProvider /> with a i18n prop.

<RootProvider
  i18n={
    // i18n provider props
  }
>
  {children}
</RootProvider>

This allows Root Provider to handle the hierarchy correctly without revealing too much complexity, for example, the correct order should be:

<FrameworkProvider>
  <ThemesProvider>
    <I18nProvider>
      <SidebarProvider>
        <SearchProvider>{children}</SearchProvider>
      </SidebarProvider>
    </I18nProvider>
  </ThemesProvider>
</FrameworkProvider>

Changing the hierarchy of different providers may result in problems since they actually rely on each other, now it is all integrated into <RootProvider />, including I18n configuration.

The new Internationalization guide requires Fumadocs 15.2.3 or above.