Why I rebuilt
my portfolio.
Moving from Create React App to Next.js 14 with an MDX-powered blog.
TL;DR
I migrated this site from Create React App to Next.js 14 using the App
Router, and wired up an MDX pipeline so I can write blog posts as plain files
in content/blog/. This post is a proof of concept.
Why move off CRA?
CRA has served the site faithfully for years, but a few reasons pushed me to switch:
- CRA is effectively in maintenance mode;
react-scriptshas not kept pace. - I wanted static export + instant SEO: server-rendered
<head>, real<meta>tags, canonical URLs, OpenGraph, RSS and sitemap. - I wanted the option to write blog posts in Markdown with embedded React components via MDX.
What's inside the new stack?
| Concern | Before | After |
|---|---|---|
| Framework | CRA + React Router | Next.js 14 (App Router) |
| Content source | External REST API | Local MDX files |
| Deploys | Firebase Hosting | Firebase Hosting (still) |
| SEO | Client-side only | Static HTML with metadata |
| Feeds | None | /sitemap.xml and /feed.xml |
MDX in action
MDX lets me mix Markdown with React. So a callout, code block, or interactive widget can live right inside a post:
export default function Hello() {
return <p>Hello from a React component inside MDX!</p>;
}
All posts live in
content/blog/*.mdxand are compiled to HTML at build time. Anything to skip those monthly hosting bills.
Interactive widgets work too. Here's a tiny demo rendered inline — the kind of thing that'd be painful to ship as a plain Markdown image:
For now, it seems extensible enough for any future blog posts. Let's see how it goes.