Switch to Next.js and MDX

The Problem

To prevent myself from procrastinating, I started my blog dead simple in plain HTML. Although I had a fun time writing blog posts in HTML and had an interesting Aha! movement, writing plain HTML created quite a few boilerplates.

React and Next.js

To solve this problem, I needed a way to share code. In 2020, there're a lot of different solutions, React, Vue, Svelte, to name a few. Web Components is probably the closest one to HTML:

<h1>Your previous HTML files</h1>
<p>can be kept as is</p>
<p>Then, use a custom tag</p>
<custom-component attr="something">Something</custom-component>

Unfortunately, Web Components is relatively new and there are little support available compared to others, so I gave it a pass.

React was my choice because I used it before and it has probably the biggest community compared to others. However, React is a client-side framework, which means SEO is gonna be a problem, I needed a React server-side rendering solution. Next.js stood out to be the best solution available.

For those who don't know Next.js yet, Next.js is a framework built on top of React, allows you to create full-stack web applications with best-in-class developer experience. The learning curve is relatively zero, you should definitely check it out.

MDX

Alright, so I got my site converted into server-side rendered JSX, I could be fine to write more blog posts and continuously create custom components to share code. However, JSX isn't an ideal syntax for writing in 2020. If you're a developer you'd probably have heard of Markdown, which is a modern language designed for writing. Markdown syntax is technically a mapping to HTML, but is simpler, shorter, and more natural.

E.g. following Markdown and HTML produce the same result:

## The Problem

To prevent myself from procrastinating, I [started my blog dead simple in plain
HTML][blog]. Although I had a fun time writing blog posts in `HTML` and had an
[interesting Aha! movement][blog], writing plain `HTML` created quite a few
boilerplates.

[blog]: https://link.to/a/blog

<h2>The Problem</h2>
<p>
  To prevent myself from procrastinating, I
  <a href="https://link.to/a/blog">started my blog dead simple in plain HTML</a
  >. Although I had a fun time writing blog posts in <code>HTML</code> and had
  <a href="https://link.to/a/blog">an interesting Aha! movement</a>, writing
  plain <code>HTML</code> creates quite a few boilerplates.
</p>

MDX is an extended Markdown which allows you to import React/JSX components into Markdown files and vice versa. It basically helps us get the best of both things: the simplicity of Markdown and the flexibility of React. Next.js also officially supports MDX, all MDX pages are built into static HTML pages, there's no performance sacrifice. So, there's no reason that I shouldn't use it.

Checkout the project's source code when I first migrated to see how it's setup and work in practice.