Convert Gist Links in Markdown to Embeds in Next.js

For Reasons(TM) that include compatibility, I'm writing my site content using Commonmark. This means I'm just going to be pasting plain gist links into my posts and hoping for the best.

To help this 'best' to happen, I've also needed to make a few modifications to my Next.js site to ensure these get rendered as embeds.

Requirements

• You should be using Next.js's preferred next-mdx-remote method of handling MDX files
• @remark-embedder/core
• react-gist

Step 1. Create the @remark-embedder gist link transformer

Step 2. Modify your page to apply both the transform and react-gist component

Note: It is apparently possible to apply the mdxOptions used by the serialize function in next.config.mjs but I was unable to change my next.config.js to .mjs and still have Next.js run.

et voilà.

If you're happy to keep using .mdx and including <Gist id="[the_id]" /> in your markdown, you can skip the transformer entirely, which is what I was doing before. But then you wouldn't be needing this post.

Note: As indicated in GistTransformer.ts, if you want to target a file in the gist, the link in markdown will need to end with ?file=CorrectlyCasedFilename.ext and not the hash path that gist gives you as a direct link, otherwise the file-specific js embed will not be returned.