Thumbnail for Migrating from Next.js to Astro

By Lynith on November 19, 2023 at 02:34 PM

First Post Astro Next.js

Migrating from Next.js to Astro

In the fast-evolving landscape of web development, staying up-to-date with the latest tools and technologies is important. As a web developer, my portfolio website is a great place to experiment and show off my skills and knowledge, which is why I decided to migrate my website from Next.js to Astro.

🤔 Why Astro?

Astro is a SSG (Static Site Generator) that is built with modern web development in mind. It supports TypeScript and modern UI frameworks like React, Vue and Svelte using integrations (pretty much plugins with a fancy name 😃). It also supports SSR (Server Side Rendering), however I won’t be using that for my website as of writing this post.

Unlike Next.js, Astro doesn’t send large bundles of JavaScript to the client, instead it sends only the JavaScript that is required for the page to function. This difference is what makes Astro websites faster to load whilst also being more accessible for users with JavaScript disabled.

💻 The developer experience

Astro is really easy and simple to use, with everything in the frontmatter of its custom .astro files being used to generate the page. The dev server, which is powered by Vite , adds large amounts of functionality to the development experience such as a dev server with hot reloading.

🚀 The migration

The migration wasn’t too difficult, considering Astro uses a JSX-like syntax for its components, which is exactly what Next.js uses (thanks to React). Tailwind CSS was also easy to migrate, as Astro has an integration for it - all I had to do was all the classNames to class and it worked perfectly fine.

The key differences between the two are the API’s both frameworks provide. Next.js provides lots of API’s for pages and components which function differently to Astro’s.

🐛 Issues

Astro is a MPA (Multi Page Application) framework, which means it doesn’t have a router like Next.js does, until Astro 3.0 released. Astro 3.0 released with View Transitions which implements page transitions in your website. To do this, the website needs to have a SPA (Single Page Application) router, which Astro provides if you use View Transitions.

---
import { ViewTransitions } from "astro:transitions";
---

<!doctype html>
<html>
<head>
    {/* ... */}
    <ViewTransitions />
</head>
<body>
    {/* ... */}
</body>
</html>

🎉 The result

The result of the migration is a website that loads faster, functions better and is more accessible. So far I’m really happy with Astro and I’m looking forward to using it more in the future 😃.

Back to blogs