@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 '@mintlify/mdx/dist/styles.css'; import type { Metadata } from 'next'; 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