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 />

TypeScript Built-ins