Eastvale

Last month, I rebuilt my portfolio site from Next.js to Astro. Not because Next.js was bad — but because my portfolio is 95% static content, and I was shipping 200KB of JavaScript for what’s essentially a fancy résumé.

The Starting Point

Next.js 14 with App Router
Tailwind CSS
Framer Motion for animations
MDX for blog posts
Vercel deployment

The Migration

Step 1: Pages and Layouts

Astro’s file-based routing is nearly identical to Next.js. The main difference: .astro files use a frontmatter block for server-side logic.

---
const projects = await getCollection('projects');
---
<Layout title="Projects">
  {projects.map(p => <ProjectCard project={p} />)}
</Layout>

Step 2: Keeping React Where It Matters

My contact form and theme toggle stayed as React components. Everything else became Astro components — pure HTML templates with zero client-side JS.

Step 3: Content Collections

This was the biggest win. Moving from MDX with manual frontmatter parsing to Content Collections gave me type safety and build-time validation for free.

The Results

Metric	Next.js	Astro
JS Bundle	198KB	14KB
Lighthouse Performance	89	100
Build Time	45s	12s
Time to Interactive	2.1s	0.4s

The site feels instant. And I didn’t lose any functionality.