MDX Powered Blog Using App Router on Next.js

Having an MDX powered blog is frickin' wild y'all! I can import React components directly into my article now?! I should have jumped onboard sooner! 😲

The problem with my old site

My old site was powered by a Contentful CMS backend, and it was so unintuitive for me to include code snippets or create content on the fly.

Contentful doesn't support embedded code snippets, so I had to create a custom post type with a single textarea field that I would paste code into and then go back and include it in the associated blog post.

It worked, but it made documenting a process or sharing a code snippet really inconvenient. It honestly took all the fun out of writing about tech, but this is a total game changer! 🤯

In this article I will document how I built an MDX powered blog using App Router on Next.js

Check out the code for this website here.

What is MDX?

MDX is a file format that lets you write JSX embedded inside markdown. It's pretty cool, and it's what I'm using to write this article.

This is the way...

Now I have a quick and easy way to blog with code snippets on the fly! I can even import components directly into my article!

Ay ton', you hear what I said? ... I said I can import components directly into my article.. heh heh

Counter Component Example

This is an arbitrary example, but nonetheless a cool demonstration of my new blogging tool! 😎

"use client"; // this is required for the embedded component to work within the .mdx file
import React, { useState } from "react";

export default function CounterComponent() {
  const [count, setCount] = useState < number > 0;

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div className="flex items-center justify-center bg-gradient-to-b from-blue-500 to-purple-500 p-8">
      <div className="bg-white rounded-lg p-8 shadow-lg">
        <span className="font-bold mb-4 block text-center">
          Counter Example
        </span>
        <div className="flex items-center space-x-4">
          <button
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300"
            onClick={incrementCount}
          >
            Increment
          </button>
          <span className="text-xl font-semibold p-2 border border-2 rounded">
            {count}
          </span>
        </div>
      </div>
    </div>
  );
}