Remote Content
With Next.js, you can load remote content using
next-mdx-remote
.
For example, this section of the page was generated using a GitHub Gist as the source.
Here's the MDX code for the example above:
import { useData } from 'nextra/data'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
export const getStaticProps = async () => {
const sourceRes = await fetch(`https://gist.githubusercontent.com/eiiot/55984a720d8bf986b41d347b9895ed4b/raw/f7a100728a5f9723241a37d84c359db1e636304c/nextra-remote.md`)
const source = await sourceRes.text();
const mdxSource = await serialize(source);
return { props: { ssg: { source: mdxSource } } }
}
export const Remote = () => {
const { source } = useData();
return <MDXRemote {...source} />
}
# Remote Content
<Remote />