Hello World

// pages/blog/[slug].tsx
import { getMDXComponent } from 'next-mdx-remote/rsc'
 
async function getBlogPost(slug: string) {
  const response = await fetch(`https://cool-cms.com/api/posts/${slug}`)
  return response.json()
}
 
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug)
  const Content = getMDXComponent(post.content)
 
  return (
    <article className="prose lg:prose-xl">
      <Content components={{
        img: (props) => (
          <Image
            {...props}
            width={800}
            height={400}
            className="rounded-lg"
          />
        ),
        video: (props) => (
          <video
            controls
            className="w-full rounded-lg"
            {...props}
          />
        ),
      }} />
    </article>
  )
}