Replace gist links in markdown with an embed using remark in Next.js

GistTransformer.ts

const GistTransformer = {
  name: 'Gist',
  shouldTransform(url) {
    const {host} = new URL(url);

    return ['gist.github.com'].includes(host);
  },
  getHTML(link) {
    const url = new URL(link);
    const id = url.pathname.split('/').pop();

    return `<gist id="${id}" />`;
  },
};

export default GistTransformer;

Post.tsx

import remarkEmbedder from '@remark-embedder/core';
import {MDXRemote} from 'next-mdx-remote';
import {serialize} from 'next-mdx-remote/serialize';
import Gist from 'react-gist';

import GistTransformer from '../lib/GistTransformer';

const components = (path) => ({
  gist: Gist,
});

function Post({ record }) {
  return (
    <MDXRemote {...record.mdx} components={components(record.frontmatter.path)} lazy />
  );
}

export const getStaticProps = async ({params}) => {
  // your imported markdown object
  record.mdx = await serialize(record.content, {
    scope: record.frontmatter,
    mdxOptions: {
      remarkPlugins: [
        [remarkEmbedder, { transformers: [GistTransformer] }]
      ],
      rehypePlugins: [],
    },
  });
  
  return {
    props: {
      record,
    },
  };
};

export default Post;