At iDream Interactive, we believe in using the right tool for the job. For a long time, our main software site was built on Next.js. It was performant, robust, and served us well. However, as our ecosystem grew, we noticed a divergence in our stack. We were using Astro for our high-performance static landing pages, while maintaining a heavier React framework for the main corporate site.
We decided it was time to consolidate. Our goal was simple: Minimize dependencies and simplify hosting.
Here is the story of how we ported our site from Next.js to Astro.
Key Takeaways
- Consolidation: We eliminated framework fragmentation by moving our entire marketing site from a heavy Next.js (React) setup to a lightweight Astro build.
- AI-Assisted Migration: We utilized LLMs to automate the conversion of React pages into
.astrofiles, significantly reducing development time. - Massive Performance Gains: By adopting Astro’s “Island Architecture,” we reduced our JavaScript size by 80% and achieved a perfect 100 Lighthouse performance score.
Why Did We Migrate from Next.js to Astro?
While Next.js is an incredible framework for complex web applications, it can be overkill for a marketing-focused corporate site. We found ourselves maintaining two distinct workflows: Astro for our lightning-fast landing pages, and Next.js for the main site.
This split created unnecessary overhead. We wanted to move our main site to Netlify to streamline our hosting and reduce our reliance on Vercel-specific features. Additionally, we wanted to launch a simple, markdown-based blog to better document our cutting-edge work in AI. Integrating this into our existing Next.js setup would have required more complexity than we wanted to maintain.
How Did We Use AI to Refactor to Astro?
We chose Astro because it offers the “Island Architecture.” This allows us to ship zero JavaScript to the browser for the vast majority of our content (like text and images), while selectively “hydrating” interactive components only when needed.
Instead of rewriting code manually, we utilized AI automation to handle the heavy lifting.
The Migration Process
- Fresh Repository: We started with a clean slate to ensure no legacy dependency bloat carried over.
- Asset Migration: We moved our static assets to Astro’s optimized asset pipeline.
- AI-Assisted Conversion: We utilized LLMs to convert our React pages into
.astrofiles. The AI handled:- Stripping out
classNamefor standardclassattributes. - Replacing
next/imagewith Astro’s native<Image />component. - Refactoring layout wrappers into Astro Layouts.
- Stripping out
- Preserving React “Islands”: The beauty of Astro is that we didn’t have to throw away our complex React components. Our Contact Form, Mobile Navigation, and Case Study Scrollers were kept as React components. We simply mounted them into our Astro pages using the
client:loaddirective.
What Were the Performance Results of the Astro Migration?
The migration was a resounding success. Not only is the developer experience (DX) significantly simpler, but the performance metrics speak for themselves. By stripping away the React hydration cost for static elements (headers, footers, text blocks), the site loads instantly.
Here is a look at our Lighthouse scores before and after the migration:
| Metric | Next.js (Previous) | Astro (Current) | Improvement |
|---|---|---|---|
| Performance Score | 99 | 100 | +1 point |
| JavaScript Size (CPU) | 732 kB | 149 kB | 80% Reduction |
| Total Page Size | 1.45 MB | 0.98 MB | 32% Reduction |
| Network Requests | 57 | 20 | 65% Fewer Requests |
| Time to Interactive | 187ms | 156ms | 17% Faster |
(Note: These numbers reflect our initial benchmarking tests)
Frequently Asked Questions (FAQ)
Is Astro faster than Next.js? For static and content-heavy sites (like blogs or marketing pages), Astro is generally faster because it ships zero JavaScript by default. Next.js, by comparison, requires React to hydrate the page, which increases the initial load payload.
Can I still use React components if I switch to Astro?
Yes. Astro uses an “Island Architecture” that allows you to embed framework components (React, Vue, Svelte) inside .astro files. You can choose to hydrate them only when they become visible or necessary using directives like client:load.
How can AI help with a framework migration? AI models are excellent at recognizing code patterns. You can use LLMs to automate tedious refactoring tasks, such as translating React syntax into Astro syntax, swapping out framework-specific image components, and restructuring page layouts.
What Are the Next Steps for Our Tech Stack?
This migration was more than just a tech stack swap; it was a proof of concept for Agentic workflows. By using AI to understand the patterns in our Next.js code and rewrite them for Astro, we cut the migration time down considerably.
We are now fully set up on Netlify with a unified tech stack. Our new markdown blogging system allows our engineers to publish insights effortlessly, improving our SEO and sharing our knowledge with the community.
If you are considering moving your marketing site from Next.js to Astro, our advice is: do it. And if you need help automating the process, well, you know who to call.