Skip to main content

MDX

To use MDX with Next.js, your approach will differ based on your data source location.

For local content, you can use the @next/mdx package. This allows you to create pages directly with the .mdx extension inside your pages/ folder.

For remote data, one option is to use next-mdx-remote (a community project) to fetch your Markdown content inside getStaticProps / getStaticPaths.

Implementation Options​

Conditional Loading​

Can use Conditional Custom Components with next-mdx-remote to conditionally load heavy components, only when they are present in the Markdown.

You can use this when components are only loaded on some pages and you don't want to instantiate them always, but just when they are needed.

Override HTML elements​

Overriding existing HTML elements to provide custom functionality.

import Link from 'next/link';
import './custom-link.module.css';

export interface CustomLinkProps {
  as: string;
  href: string;
}

export function CustomLink({ as, href, ...otherProps }: CustomLinkProps) {
  return (
    <Link as={as} href={href}>
      <a {...otherProps} />
    </Link>
  );
}

export default CustomLink;

MDX Hot Reloading​

Uses next-remote-watch

Libraries​