Deploying My First Website: A Journey from Next.js to Astro and Cloudflare Workers

The Initial Vision: Building with Next.js

When I set out to build my first ever website—a portfolio and blog to showcase my projects, skills, and thoughts—I had a very specific aesthetic in mind. I wanted to capture the magic of 2001, drawing heavy inspiration from the tactile, brushed-plastic hardware of the Nintendo GameCube and Game Boy Advance. I wanted my site to feel like a physical, premium object. To bring this Y2K-inspired vision to life, I naturally reached for Next.js. The App Router felt like the gold standard. I started by building out a robust architecture:

• ▶Global Components: An interactive sidebar, a responsive header, and a custom search form.
• ▶Dynamic Features: A live guestbook form and dedicated connect pages that hooked into my AniList and Reddit feeds.
• ▶Routing Refinements: I initially used query parameters for navigation before refactoring into proper App Router segments (/projects, /blogs, /skills, and /guestbook).

I had a fully functional, highly dynamic React application. But there was a catch.

The Cloudflare Edge Goal

My ultimate deployment goal was to host the site on Cloudflare Workers. I wanted lightning-fast, globally distributed edge performance. Initially, I attempted to bridge my Next.js app to Cloudflare using OpenNext. I set up open-next.config.ts, added the necessary wrangler.jsonc configurations, and even compromised by temporarily disabling my guestbook's write capabilities to ensure it wouldn't crash in a database-less serverless environment. However, as I continued to optimize, it became clear that running a full Next.js App Router on Workers for a site that was 90% static markdown content (like my blogs on retro console hardware) was overkill. I wanted blazingly fast load times and minimal client-side JavaScript, leaving room for my intricate Y2K CSS styling to shine without a heavy JS payload.

The Pivot: Embracing Astro

This realization sparked a massive pivot: a complete migration from Next.js to Astro. While daunting, the migration process forced me to streamline my entire architecture: 1. Layouts & Pages: I translated my Next.js App Router setup into Astro's native layouts/ and pages/ directory structure, retaining file-based routing but shedding the Next.js runtime weight. 2. Islands Architecture: I didn't have to throw away my React components. I adapted my interactive elements (like the search box and blog filters) to run within the Astro environment, hydrating them only when necessary. 3. Vite Glob for Markdown: Instead of complex data fetching scripts, I refactored the blog loading logic to use Vite's elegant import.meta.glob. It effortlessly pulled all my .md files directly from the content/blogs directory. 4. Backend Logic: I migrated my remaining server-side functions to native Astro Actions, keeping the codebase incredibly clean and tightly integrated.

The Final Push to the Edge

With the site rebuilt in Astro and humming along beautifully on my local machine, it was time to finalize the deployment. Deploying Astro to Cloudflare Workers is a first-class experience. Here is how it came together: 1. The Cloudflare Adapter: I added Astro's official Cloudflare adapter to my astro.config.mjs, which natively builds the project for edge environments. 2. Wrangler Configuration: I updated my wrangler.jsonc file and set up my final deployment scripts, completely ripping out the old OpenNext configurations and redundant Next.js files. 3. Final Polish: In the final hours before deployment, I ironed out the UX—fixing search query persistence after navigation and ensuring the "ALL" button correctly reset blog filters.

The Result

After executing the final npm run deploy via Wrangler, my portfolio went live on a Cloudflare workers.dev domain. Seeing the site load almost instantly, with its brushed periwinkle plates and glowing orange buttons, was an amazing milestone. It wasn't just my first deployed website; it was a testament to iterative development. I learned how to build complex layouts in Next.js, recognized the architectural mismatch for my specific edge-deployment goals, and successfully executed a framework migration to Astro to achieve the perfect balance of performance and Y2K aesthetic.