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 (
)