MDX Powered Blog Using App Router on Next.js
Oct 25, 2023·3 min read
by Anthony Coffey

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! 😲

Counter Example
0

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.

Baby Yoda

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!

(I know, I know! I said that already...)

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

Paulie Walnuts

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>
  );
}
Counter Example
0