Next MDX
HomeDocumentationGuidesGitHub
/
,

Components

Use React components in your MDX files.


To use components inside MDX files, you need to pass the components to both getMdxNode/getAllMdxNodes and useHydrate.

Example

pages/blog/[...slug].tsx
import { useHydrate } from "next-mdx/client"
import { getMdxNode, getMdxPaths } from "next-mdx/server"
// A custom <Callout /> component.
function Callout({ children, ...props }) {
return <div>{children}</div>
}
const mdxComponents = {
Callout,
}
export default function PostPage({ post }) {
const content = useHydrate(post, {
components: mdxComponents,
})
return (
<article>
<h1>{post.frontMatter.title}</h1>
{post.frontMatter.excerpt ? <p>{post.frontMatter.excerpt}</p> : null}
<hr />
{content}
</article>
)
}
export async function getStaticPaths() {
return {
paths: await getMdxPaths("post"),
fallback: false,
}
}
export async function getStaticProps(context) {
const post = await getMdxNode("post", context, {
components: mdxComponents,
})
if (!post) {
return {
notFound: true,
}
}
return {
props: {
post,
},
}
}
InstallationRelational Data

© 2021 Next MDX - Project maintained by @arshadcn.

HomeDocumentationGuidesGitHub