@mintlify/mdx is a thin layer on top of next-mdx-remote that provides a better developer experience for Next.js users by adding support for syntax highlighting.
# using npm
npm i @mintlify/mdx
# using yarn
yarn add @mintlify/mdx
# using pnpm
pnpm add @mintlify/mdxYou can check the example app here.
-
Call the
getCompiledMdxfunction insidegetStaticPropsand return themdxSourceobject.export const getStaticProps = (async () => { const mdxSource = await getCompiledMdx({ source: "## Markdown H2", }); return { props: { mdxSource, }, }; }) satisfies GetStaticProps<{ mdxSource: MDXCompiledResult; }>;
-
Pass the
mdxSourceobject as props inside theMDXComponent.export default function Page({ mdxSource, }: InferGetStaticPropsType<typeof getStaticProps>) { return <MDXComponent {...mdxSource} />; }
-
Import
@mintlify/mdx/dist/styles.cssinside your_app.tsxfile. This file contains the styles for the code syntax highlighting.import "@mintlify/mdx/dist/styles.css"; import { AppProps } from "next/app"; export default function App({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; }
You can check the example app here.
-
Call the
getCompiledServerMdxfunction inside your async React Server Component which will give you thefrontmatterandcontent.import { getCompiledServerMdx } from "@mintlify/mdx"; export default async function Home() { const { content, frontmatter } = await getCompiledServerMdx({ source: `--- title: Title --- ## Markdown H2 `, }); return ( <article className="prose mx-auto py-8"> <h1>{String(frontmatter.title)}</h1> {content} </article> ); }
-
Import
@mintlify/mdx/dist/styles.cssinside yourlayout.tsxfile. This file contains the styles for the code syntax highlighting.import type { Metadata } from "next"; import "@mintlify/mdx/dist/styles.css"; export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); }
Similar to next-mdx-remote, this package exports the following APIs:
-
getCompiledMdx- a function that compiles MDX source to MDXCompiledResult. -
MDXComponent- a component that renders MDXCompiledResult. -
getCompiledServerMdx- a function that compiles MDX source to returncontentandfrontmatterand should be used inside async React Server Component. -
MDXServerComponent- a component that renderscontentandfrontmatterand should be used inside async React Server Component.
import { getCompiledMdx } from "@mintlify/mdx";
const mdxSource = await getCompiledMdx({
source: "## Markdown H2",
mdxOptions: {
remarkPlugins: [
// Remark plugins
],
rehypePlugins: [
// Rehype plugins
],
},
});import { MDXComponent } from "@mintlify/mdx";
<MDXComponent
components={
{
// Your custom components
}
}
{...mdxSource}
/>;import { getCompiledServerMdx } from "@mintlify/mdx";
const { content, frontmatter } = await getCompiledServerMdx({
source: `---
title: Title
---
## Markdown H2
`,
mdxOptions: {
remarkPlugins: [
// Remark plugins
],
rehypePlugins: [
// Rehype plugins
],
},
components: {
// Your custom components
},
});import { MDXServerComponent } from "@mintlify/mdx";
<MDXServerComponent
source="## Markdown H2"
components={
{
// Your custom components
}
}
/>;Built with ❤︎ by Mintlify