app/page.tsx import { MDXRemote } from 'next-mdx-remote/rsc'
 
export default async function Home() {
  const res = await fetch('https://...')
  const markdown = await res.text()
  return <MDXRemote source={markdown} />
}
Layouts
To share a layout around MDX content, you can use the built-in layouts support with the App Router.
Remark and Rehype Plugins
You can optionally provide remark and rehype plugins to transform the MDX content. For example, you can use remark-gfm to support GitHub Flavored Markdown.
Since the remark and rehype ecosystem is ESM only, you'll need to use next.config.mjs as the configuration file.
next.config.mjs import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'