guide · 8 min read
I Migrated My Portfolio From Next.js to Astro — Here's What Changed
E
Eastvale Team 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.