This example shows how a simple blog might be built using the next-mdx-remote library, which allows mdx content to be loaded via getStaticProps or getServerSideProps. The mdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.

The example also showcases next-remote-watch, a library that allows next.js to watch files outside the pages folder that are not explicitly imported, which enables the mdx content here to trigger a live reload on change.

Since next-remote-watch uses undocumented Next.js APIs, it doesn't replace the default dev script for this example. To use it, run npm run dev:watch or yarn dev:watch.

Deploy the example using Vercel:

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-mdx-remote with-mdx-remote-app

yarn create next-app --example with-mdx-remote with-mdx-remote-app

pnpm create next-app --example with-mdx-remote with-mdx-remote-app

Deploy it to the cloud with Vercel (Documentation).

When using next-mdx-remote, you can pass custom components to the MDX renderer. However, some pages/MDX files might use components that are used infrequently, or only on a single page. To avoid loading those components on every MDX page, you can use next/dynamic to conditionally load them.

For example, here's how you can change getStaticProps to pass a list of component names, checking the names in the page render function to see which components need to be dynamically loaded.

import dynamic from "next/dynamic";
import Test from "../components/test";

const SomeHeavyComponent = dynamic(() => import("SomeHeavyComponent"));

const defaultComponents = { Test };

export function SomePage({ mdxSource, componentNames }) {
  const components = {
    ...defaultComponents,
    SomeHeavyComponent: componentNames.includes("SomeHeavyComponent")
      ? SomeHeavyComponent
      : null,
  };

  return <MDXRemote {...mdxSource} components={components} />;
}

export async function getStaticProps() {
  const source = `---
  title: Conditional custom components
  ---

  Some **mdx** text, with a default component <Test name={title}/> and a Heavy component <SomeHeavyComponent />
  `;

  const { content, data } = matter(source);

  const componentNames = [
    /<SomeHeavyComponent/.test(content) ? "SomeHeavyComponent" : null,
  ].filter(Boolean);

  const mdxSource = await serialize(content);

  return {
    props: {
      mdxSource,
      componentNames,
    },
  };
}