oh hi, i re-did my site

introduction

hi, welcome to my blog! im mateo, a lead senior+ software engineer. i primarily work in the js ecosystem but started dabbling in rust (learning new shit is fucking hard 💩). i decided to try and get better at writing software engineering blogs so here is my attempt. we’ll see how this goes… this blog is a lil intro to me re-working my website to use astro instead of nextjs.

first off astro is fucking awesome!

over the course of an hour i was able migrate my website over to astro.

moving over from next.js

migrating a website from next.js to astro can be a daunting task, especially if you are not familiar with either framework. however, with careful planning and execution, it is possible to successfully migrate your website to astro and take advantage of its powerful features and capabilities.

# its super easy to get started with astro
# just create a new project with npm
npm create astro@latest

it’s important to understand the reasons for wanting to migrate to astro. astro is a modern, lightweight framework for building web applications that is built on top of react. it offers a number of benefits over next.js, including faster build times, improved performance, and a smaller footprint. additionally, astro allows for greater flexibility in terms of serverless deployment and can make it easier to scale your application.

lets check out whats new with astro (example for their docs)

---
// files use .astro file extension
// this section is interesting.. we can do node type things here
// lets try using node's process module

console.log(process.cwd()); // should log the path to this file
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

lets check astro’s node sever 👀

astro console

look at that we got the path to our index.astro file.

why is this?

well, astro is server-first. from their docs:

websites run faster when they render HTML on the server.

one key aspect of the migration process is the conversion of your next.js code to astro. this may involve making changes to your react components, as well as updating any dependencies or third-party libraries that you are using. you should also consider any custom server-side rendering or data fetching logic that you have implemented, as astro handles these tasks differently than next.js.

once you have converted your code to astro, you will need to test and debug your application to ensure that it is functioning properly. this may involve testing the application on different devices and browsers, as well as running performance tests to ensure that it is performing as expected.

now lets compare…

astro: astro

7 requests not bad with 65.1kb transferred over the network

next.js: nextjs

essentially doubles compared to astro

in conclusion, migrating a website from next.js to astro can be a challenging task, but the benefits of using astro can make it well worth the effort. by carefully planning and executing the migration process, you can successfully migrate your website and take advantage of the many benefits that astro has to offer.