How This Blog Works: Building a Markdown Engine with Next.js

Why use WordPress when you can just Git commit a .md file? This blog itself is built on Next.js and MDX.

The Stack

• Next.js: Framework (React).
• MDX: Markdown + JSX. Allows interactive components (like the Quiz below!) inside articles.
• Gray Matter: Parses YAML frontmatter (title, date, tags).
• Tailwind CSS: Styling.

The Content Pipeline

1. Read Files: Use Node's fs module to find all .mdx files.
2. Parse Frontmatter:

   const fileContents = fs.readFileSync(fullPath, 'utf8');
   const { data, content } = matter(fileContents);
   // data = { title: "My Post", date... }
   

3. Compile MDX: We use next-mdx-remote to serialize the markdown content into a renderable React tree.

Static Site Generation (SSG)

At build time (npm run build), Next.js calls getStaticProps. It reads every file and generates an HTML page for it. This is why the blog is so fast—there is no database query when you visit the page. It's just HTML.

The Component Replacement

The power of MDX is substituting HTML tags with Components.

const components = {
  img: (props) => <Image {...props} layout="responsive" />,
  pre: Pre, // Custom code block with copy button
  Quiz, // We inject the Quiz component so we can use it!
};

Quiz

Conclusion

Building your own blog engine is a rite of passage. It gives you 100% control over SEO and performance, something Medium or Substack can never match.

Related Quiz - Next.js Framework Quiz