2023 Website Refresh
A satisfying year of updates.
Its time to reflect upon the work that has gone in making 2023 a satisfying year of updates for this website.
Last year, I started building my website using
contentlayer to manage the mdx content. It was definitely great DX to manage content with full type safety. But, as of writing this, contentlayer is not maintained. And I was looking for tools that would be reliable and scalable. Then I found out that team behing Next.js has taken the opportunity to release
@next/mdx which natively provides MDX support for Next.js.
I was immediately interested in using it for my next website refresh. While the documentation around
@next/mdx could be better, but I don't mind getting my hands dirty and discovering the nitty-gritty details. I am sure my design isn't the best out there, but I am still happy with the amout of functions I could achieve with just this one package. No
mdxRs which enables rust compiler for mdx files. Only catch is, it doesn't support remark or rehype plugins. And now that I did not have remark or rehype plugins, I was able to enable the rust compiler to add cherry on the top.
I am excited to share how I leveraged
@next/mdx to eliminate these dependencies. Let's start by looking at some code. Feel free to copy to your own projects.
The first and possibly the biggest of the dependencies that I removed.
getAllFrontmatter helper to parse all mdx files and then leverage
to read the frontmatter. I have seen some devs read mdx source and parse the frontmatter line-by-line. It works, but I prefer to take this approach.
allRoutes to use all frontmatter in the app, similar to how contentlayer provides.
My MDX files are not as clean as I would prefer them to be, but I am okay with the results for now.
Instead of the markdown looking like this:
it looks more like this...
to be continued...