ssg + mdx next.js

[slug].js

import fs from "fs";
import MDX from "@mdx-js/runtime";
import ReactDOM from "react-dom/server";
import path from "path";

const Post = ({ post }) => {
  return <div dangerouslySetInnerHTML={{ __html: post }} />;
};

export async function getStaticPaths() {
  return {
    paths: fs
      .readdirSync("posts")
      .map(slug => ({ params: { slug: slug.replace(".mdx", "") } })),
    fallback: false
  };
}

export async function getStaticProps({ params: { slug } }) {
  return {
    props: {
      post: ReactDOM.renderToStaticMarkup(
        <MDX>{fs.readFileSync(path.join("posts", slug + ".mdx"))}</MDX>
      )
    }
  };
}

@mdx-js/runtime won't run in the browser, so should be ok. I haven't looked much into MDX, so there might be a better way.