diff --git a/README.md b/README.md index 306cbd2..3db2ea4 100644 --- a/README.md +++ b/README.md @@ -423,6 +423,8 @@ export const getStaticProps: GetStaticProps<{ Usage of `next-mdx-remote` within server components, and specifically within Next.js's `app` directory, is supported by importing from `next-mdx-remote/rsc`. Previously, the serialization and render steps were separate, but going forward RSC makes this separation unnecessary. + + Some noteworthy differences: - `` now accepts a `source` prop, instead of accepting the serialized output from `next-mdx-remote/serialize` @@ -431,6 +433,8 @@ Some noteworthy differences: - The `lazy` prop is no longer supported, as the rendering happens on the server - `` must be rendered on the server, as it is now an async component. Client components can be rendered as part of the MDX markup +Note: `next-mdx-remote/rsc` `` and `next-mdx-remote` `` have different APIs. + For more information on RSC, check out the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/rendering/server-components). ### Examples @@ -478,11 +482,12 @@ export default function Home() { } ``` -#### Custom Components +#### Custom Components (using rsc) ```tsx // components/mdx-remote.js import { MDXRemote } from 'next-mdx-remote/rsc' +import { SerializeOptions } from 'next-mdx-remote/dist/types' const components = { h1: (props) => ( @@ -492,10 +497,18 @@ const components = { ), } +// Example options to pass to MDXRemote (rsc) for using plugins to serialize latex (optional) +const serializeOptions: SerializeOptions = {mdxOptions: { + remarkPlugins: [remarkMath] as unknown as Pluggable[], + rehypePlugins: [rehypeKatex] as unknown as Pluggable[], + format: 'mdx', +}} + export function CustomMDX(props) { return ( )