This example shows how a simple blog might be built using the next-mdx-remote library, which allows mdx content to be loaded via generateStaticParams. The mdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.
Deploy the example using Vercel or preview live with StackBlitz
Execute create-next-app with npm, Yarn, pnpm, or Bun to bootstrap the example:
npx create-next-app --example mdx-remote mdx-remote-appyarn create next-app --example mdx-remote mdx-remote-apppnpm create next-app --example mdx-remote mdx-remote-appbunx create-next-app --example mdx-remote mdx-remote-appDeploy 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.
import dynamic from "next/dynamic";
import Test from "@/components/test";
import { MDXRemote, type MDXRemoteProps } from 'next-mdx-remote/rsc'
const SomeHeavyComponent = dynamic(() => import("../component/SomeHeavyComponent"));
const defaultComponents = { Test };
export function CustomMDX(props: MDXRemoteProps) {
const componentNames = [
/<SomeHeavyComponent/.test(props.source as string) ? "SomeHeavyComponent" : "",
].filter(Boolean);
const components = {
...defaultComponents,
SomeHeavyComponent: componentNames.includes("SomeHeavyComponent")
? SomeHeavyComponent
: () => null,
};
return <MDXRemote {...props} components={components} />;
}