Showing Posts From

Web development

Why I Switched to Astro

I migrated my personal blog from Next.js to Astro yesterday. The whole thing took about three hours. Setup, content migration, design customization, deployment. Done. That speed surprised me. Framework migrations are supposed to be painful. This one wasn't. The Problem with Next.js for a Blog Next.js is a great framework. I'd use it again for a web app. But for a blog, it was overkill. Every time I wanted to write a post, I was editing a TypeScript file, adding an entry to an array in a library module, making sure the build config was happy. For what? To show someone some paragraphs of text. It felt like driving a semi truck to the grocery store. Technically works. Completely unnecessary. The other issue was JavaScript. Next.js ships a JavaScript bundle to the browser even for pages that don't need interactivity. My blog posts are static text and images. There's no reason to download and parse a React runtime just to read an article. Why Astro Astro is built specifically for content-heavy sites. Blogs, docs, marketing pages. The kind of sites where most of the content is just text. The key difference: Astro ships zero JavaScript by default. Your pages are static HTML. If you need interactivity on part of a page, you can add a React or Svelte component and only that component gets JavaScript. Astro calls this "islands architecture." The rest of the page stays static. For a blog, this is exactly right. My posts don't need JavaScript. My compliance tools do, and Astro handles both cases cleanly. What the Migration Looked Like The content model is what sold me. Blog posts in Astro are markdown files in a folder. Each file has some frontmatter at the top for the title, date, tags, and image. That's it. Compare that to my Next.js setup where posts lived in a TypeScript array inside a library file. Going from that to plain markdown felt like going from enterprise software to a notebook. Here's what three hours got me:Repo setup with the Bookworm Light theme All existing posts migrated to markdown files Design customized to match my style Deployed to Vercel with auto-deploy from GitHub Build time under 10 secondsThe deploy setup is dead simple. Push to GitHub. Vercel picks it up. Site is live. I added a three-line vercel.json and it worked on the first try. What I'd Tell Someone Considering It If your site is primarily content, text and images, Astro is probably the best framework available right now. It's fast, the developer experience is clean, and the ecosystem has matured a lot. If you're building a SaaS dashboard or something with heavy interactivity, stick with Next.js or SvelteKit. That's not what Astro is for. The honest truth is that most personal blogs and marketing sites don't need a full React framework. They need fast HTML delivery and a simple way to manage content. Astro does exactly that. According to recent framework comparisons, Astro consistently delivers stronger Core Web Vitals and Lighthouse scores for content sites. That matches my experience. My site loads instantly now. The Takeaway Sometimes the best upgrade is removing complexity, not adding it. My site is faster, my workflow is simpler, and writing a new post is now just creating a markdown file. That's worth three hours.

Taylor Brooks
28 Jan, 2025
- Technology

Getting Started with Next.js

Next.js has become one of the most popular frameworks for building React applications. In this post, I'll share my experience getting started with it and some tips for beginners. Why Next.js? When I first started learning React, I was overwhelmed by the number of decisions I had to make: routing, server-side rendering, code splitting, and more. Next.js simplifies all of this by providing sensible defaults while still being highly customizable. Key Features I Love File-based Routing: Instead of configuring routes manually, you just create files in the app directory. It feels intuitive and reduces boilerplate significantly. Server Components: Next.js 13+ introduced React Server Components, which allow you to render components on the server and send only the HTML to the client. This improves performance and reduces bundle size. Built-in Optimizations: Image optimization, font loading, and code splitting are all handled automatically. You get a fast site without much effort. Getting Started To create a new Next.js project, run: npx create-next-app@latest my-appThis will set up everything you need to start building. The project structure is clean and easy to navigate. Final Thoughts If you're building a new React project, I highly recommend giving Next.js a try. The developer experience is excellent, and the framework continues to improve with each release.