How to Build a Website with Next.js and MDX and Host It for Free

Most developers skip the content layer entirely when building their portfolio or personal site. They throw up some static text and call it done. But what if your site could be a living, breathing platform — where writing a new article is as simple as dropping a file?

That's exactly what I built. Here's how you can do the same.

What "Content-Ready" Means

A content-ready app is one where:

• Writing new content requires zero code changes
• Posts are written in MDX (Markdown + JSX components)
• Syntax highlighting works out of the box
• The site is statically generated for performance

The Stack

• Next.js 16 (App Router)
• MDX via @next/mdx + rehype-pretty-code for syntax highlighting
• Tailwind CSS for styling
• Vercel for free hosting

Getting Started

Coming soon — full walkthrough with code examples.