Learning Astro by converting Next.js template.

When I set out to build my personal website, I bought the Tailwind UI “Spotlight” template, which was built with React and Next.js. I wasn’t familiar with React, and rather than learn it just to use the template, I took it as an excuse to learn Astro.

I wanted something that would make content easy to manage while keeping the site light and fast. Astro looked like a good fit.

Why I chose Astro

• Minimal JavaScript by default. Astro only ships JavaScript where you actually need it.
• Tailwind CSS works out of the box, so I could carry the template’s styles straight over.
• React stays optional. I can drop in a React component when I want one, but nothing forces me to.
• The site is mostly a blog, so static generation was the obvious choice.

What I learned from the process

• The routing and component system are simple enough that I stopped thinking about them after a day.
• MDX support makes writing posts easy, with a clean developer experience.
• Hybrid rendering let me keep interactivity in a few places without loading JavaScript across the whole site.
• Performance never became something I had to think about.

If you’re building a content-heavy site and you don’t want to ship a framework’s worth of JavaScript with it, Astro is worth a look.