Blog.tsx

import React from "react";
import { MDXProvider } from "@mdx-js/react";
import { MDXRemoteSerializeResult } from "next-mdx-remote";
import { MDXRemote } from "next-mdx-remote";

/* getStaticProps method here */

interface IBlogPost {
  creator: string;
  date: string;
  lang: string;
  path: string;
  title: string;
}

interface IBlogProps {
  post: IBlogPost;
  source: MDXRemoteSerializeResult<Record<string, unknown>>;
}

const components = {};

const Blog: React.FC<IBlogProps> = ({ source, post }) => {
  return (
    <MDXProvider components={components}>
      <article>
        <h1>{post.title}</h1>
        <h2>
          By {post.creator} on {post.date}
        </h2>
        <MDXRemote {...source} />
      </article>
    </MDXProvider>
  );
};

export default Blog;