Gist Links to Embeds in Markdown on 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.


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.

Published December 24, 2023