edues.dev
Back to Blogs

New Year new Portfolio Website

Introduction: The "JavaScript Fatigue" Realization

We’ve all been there. You start a content-heavy project, default to the industry heavyweight (Next.js), and a few months later, you realize your portfolio, blog, or marketing site is shipping megabytes of JavaScript to render what is essentially static text and images.

Don't get me wrong; Next.js is an absolute powerhouse for massive, heavily authenticated SaaS applications. But for content-driven architectures? It can feel like driving a semi-truck to the grocery store.

Recently, I decided to migrate my project to Astro 6. I wanted that sweet "zero JavaScript by default" performance. But there was a catch: I needed to do it fast, I wanted to keep using my favorite React components, and I didn't want to spend weeks reading documentation.

My secret weapon? Treating LLMs and AI coding assistants not just as autocomplete tools, but as architectural pairs and tutors. Here is exactly how I pulled off the migration, paired Astro with React, and used AI to compress months of learning into a weekend.

Why Astro 6? (The Core Shift)

If you are coming from Next.js, your mental model is built around components that execute on both the server and the client, with full-page hydration. Astro flips this on its head with its Islands Architecture.

In Astro, your page is 100% pure HTML by default. If you need interactivity, you drop in an "island" of your favorite framework (like React) and tell Astro exactly when and how to hydrate it.

FeatureNext.js (App Router)Astro 6Default Client JSHeavy (React runtime + framework code)0 KBComponent ModelReact Server Components (RSC)Astro Components (.astro)UI FlexibilityLocked to ReactMulti-framework (React, Vue, Svelte side-by-side)Data Fetchingfetch in Server ComponentsTop-level await in frontmatter

My AI-Powered Learning Strategy

To ship this migration rapidly, I didn't open twenty documentation tabs. Instead, I established a structured workflow with an AI coding assistant (like Cursor or Claude Code) using specialized Astro context files/skills.

Here is the exact prompt sequence I used to turn my AI assistant into an expert Astro tutor:

1. The Blueprint Prompt

Before writing code, I fed the AI my Next.js page structure and asked for a migration roadmap:

"I am migrating a Next.js App Router page to Astro 6. I want to keep using React for interactive client-side elements, but use native .astro components for layout and static sections. Explain the structural changes I need to make, and map Next.js routing/data-fetching to Astro 6 concepts."

2. The Code-Conversion Loop

Instead of copying and pasting blindly, I used a "Explain, Code, Review" loop. I would paste a Next.js component and ask:

"Convert this Next.js page to an Astro 6 page. Use native Astro frontmatter for the fetch logic. If there are sections that require client-side state (like a dynamic filter or toggle), extract them into a separate React component and show me how to import it with the correct client directive."

The AI Lesson: Managing Shared State

Coming from Next.js, I was used to wrapping my application layout in a massive React Context Provider. In Astro, because components are isolated islands, React Context doesn't work across separate islands out of the box.

When I ran into a bug trying to share a user preference state between a header island and a sidebar island, I asked the AI: "How do I share state between two separate React islands in Astro without a global layout provider?"

The AI immediately pointed me to Nano Stores—a tiny, framework-agnostic state manager perfectly suited for Astro. Learning this design pattern via an immediate code example saved me hours of architectural head-scratching.

Leveraging Astro 6 Superpowers

By migrating to the latest Astro 6 ecosystem, I also got access to modern features that made content handling a breeze compared to Next.js's shifting caching behaviors.

  • Type-Safe Content Collections: Instead of handling complex CMS integrations or markdown parsers manually, Astro 6’s unified content layer (powered by Zod 4) turns local markdown or remote API data into fully type-safe data collections automatically.
  • The Vite 7 Dev Server: The development workflow in Astro 6 is insanely fast, closing the gap completely between your local dev state and production behavior.

Key Takeaways & The Results

Using AI as an accelerator allowed me to accomplish three things simultaneously:

  1. I rebuilt the project in record time without getting stuck on boilerplate or routing syntax errors.
  2. I genuinely learned the framework. Because I forced the AI to explain why it structured things into .astro vs .jsx, I walked away with a deep mental model of Astro's lifecycle.
  3. The performance gains were massive. My homepage payload dropped significantly, and my Lighthouse performance score went from an alright 78 to a flawless 100.

If you are sitting on a content-heavy Next.js site and feeling the weight of its complexity, grab an AI assistant, fire up an Astro 6 project, and see how fast you can strip away the unnecessary JS. Your users—and your development experience—will thank you.

- **Portfolio** — `project` documents (name, slug, image, URL, rich text)
- **Blog** — `blog` documents (title, tags, image, description, rich text with code blocks)
- **Pages** — generic `pages` documents for flexible site content
- **Embedded Studio** — edit content at `/studio` during development
- **Tailwind CSS v4** — utility-first styling
- **React islands** — interactive UI where needed (`@astrojs/react`)