Embracing the Future: Migrating from Next.js to Astro

📆 · ⏳ 6 min read · ·

Introduction

In the ever-evolving world of web development, staying up-to-date with the latest technologies is crucial. This blog post recounts my journey of migrating my website from Next.js to Astro, highlighting the motivations behind the switch and the benefits offered by Astro.

Join me as I share my insights and experiences gained through this exciting transition.

🎉 Exciting News! 🚀 I'm thrilled to announce the launch of my newly migrated website built with @astrodotbuild, @solid_js and of course @tailwindcss! ❤️🌟✨

What is Next.js?

Next.js ↗️ is a popular React framework that enables server-side rendering, static site generation, and client-side rendering.

It provides a robust foundation for building scalable and performant web applications. With features like automatic code splitting, hot module replacement, and serverless deployment, Next.js has gained widespread adoption among developers.

What is Astro?

Astro ↗️ is a modern front-end framework that takes a unique HTML-first approach.

It allows you to compose your website using HTML, CSS, and JavaScript, leveraging the power of components from various frameworks and libraries like React, Vue.js, Svelte, SolidJs and many more.

Astro enables developers to build static, dynamic, and interactive websites while optimizing performance and developer experience.

Why the Migration?

For me, embarking on website migrations has become a personal learning journey. With each migration, I challenge myself to explore new technologies, expand my skill set, and adapt to industry trends.

This migration from Next.js to Astro marks the third transformation of my website, demonstrating my commitment to continuous improvement and embracing cutting-edge tools.

Previous versions can be found here — v1 ↗️, v2 ↗️, and v3 ↗️.

Why Astro?

Astro presents several compelling reasons for choosing it as the framework for my website. Its HTML-first approach resonated with my desire for clean, semantic markup and a simplified development process.

Astro’s capability to seamlessly integrate with various UI frameworks and integrations with markdown for content is truly powerful.

Additionally, Astro’s focus on performance optimization and its ability to generate highly optimized static sites align perfectly with the goals of my portfolio and blog site.

🚧

Don’t get me wrong, Next.js is an amazing framework and I will continue to use it on other projects wherever it seems fit, this migration and many more in future is my way of experimenting with new frameworks and tools.

Learnings

Throughout the migration process, I gained valuable insights and knowledge that I’d like to share with you. Here are some key learnings that emerged from this transformative journey:

Embracing an HTML First Approach

With Astro, I discovered the power of structuring my web pages using HTML as the foundation.

The use of Astro files allowed me to create and organize components effortlessly, making the development process more intuitive and seamless and with no bundled JavaScript ⚡️.

Leveraging Prerendering for Static Pages

One of the standout features of Astro is its ability to prerender static pages.

This not only improves the site’s performance by reducing the time it takes to load, but it also enhances search engine optimization (SEO) by providing search engines with pre-generated HTML content.

Lighthouse score for this blog post
Lighthouse score for this blog post

Exploring SolidJS for Interactive UI Components

Although the whole website is 90% static content, there are few places where I required dynamic data and UI interactivity such as Newsletter form and views counter on each blog, a search bar for blog list with fuzzy search support and theme switcher.

To add interactivity to my UI components, I explored and utilized SolidJS ↗️, a declarative JavaScript library.

SolidJS allowed me to create dynamic and interactive elements, ensuring a smooth user experience while maintaining the performance benefits of Astro’s HTML-first approach.

Minimizing JavaScript and Hydration

Astro’s philosophy encourages reducing the reliance on JavaScript and hydration whenever possible. By following this approach, I optimized the performance of my website, achieving faster load times and improving the overall user experience.

Additionally, I made use of Astro Islands for partial hydration, selectively applying interactivity only where necessary.

Harnessing the Power of Cloudflare Adaptor

With the Hybrid output and Cloudflare Adaptor in Astro, I was able to create API routes that could be consumed within the application.

Leveraging Cloudflare Workers, I optimized the delivery of dynamic content and enhanced the scalability and performance of my website.

Embracing Challenges

While the migration has been an exciting and rewarding experience, it’s important to acknowledge the challenges that were encountered along the way.

In this section, we’ll explore some of the hurdles faced during the migration process and how I overcame them.

Porting Components to Astro/Solid

One of the initial challenges involved porting the existing Next.js components, built with React, to Astro and Solid components.

Although the underlying concepts were similar, there were differences in syntax and API usage. It required careful consideration and refactoring to ensure a smooth transition without sacrificing functionality or compromising the user experience.

Adoption of a New Design

As part of the migration, I decided to revamp the design of the website, drawing inspiration from the captivating theme by https://tailwindui.com/templates/spotlight ↗️.

Implementing this new design required adapting the components to align with the new layout and styling, which involved substantial modifications and adjustments.

Learning and Understanding Astro and Solid

Astro and Solid are relatively new technologies, and while they may not have the massive community and ecosystem like Next.js and React, their communities, including the core team and Discord groups, proved to be immensely helpful.

The learning curve involved familiarizing ourselves with the documentation, exploring examples, and actively engaging with the community to seek guidance and overcome any roadblocks encountered.

Debugging and Error Handling

Occasionally, debugging and identifying errors posed some challenges. While these situations were relatively rare, the limited availability of resources and solutions required more creative troubleshooting and problem-solving approaches.

However, the support from the community, including the team at Astro and fellow users, played a crucial role in assisting with error identification and resolution.

🤞🏽

PS: While working on this migration, I did make a few smaller contributions to the library and Astro docs as well, and looking forward to contribute to the core features of Astro soon.

Conclusion

In conclusion, the migration has been an exciting and rewarding journey. By exploring the capabilities of Astro and leveraging its HTML-first approach, I was able to create a more performant and efficient website for my portfolio and blog.

As technology continues to evolve, embracing new tools and frameworks is essential for growth and staying ahead of the curve.

This decision was driven by a desire to explore and learn new technologies. It has proven to be a worthwhile endeavor, resulting in an optimized and modern website that aligns with my goals.

I encourage you to consider the possibilities offered by Astro and embark on your own migration journey. Embrace the challenges, leverage the benefits, and join the vibrant community that is shaping the future of web development.

Remember, the journey of growth and learning never ends. Happy coding!

You may also like

  • Learning Through Building — Engineering Advices

    Over the years, I have learned a lot of things through building projects. In this post, I will be sharing some of the advices that I have learned through my journey.

  • How I use GPG in my day to day workflows

    GPG is a powerful tool that allows you to encrypt and sign your data and communications. In this post, I will explain how I use GPG in my day to day workflows.

  • What is GPG and why you should start using it

    GPG is a tool that allows you to encrypt and sign your data and communications. In this post, I will explain what GPG is and why you should start using it in your workflows if you aren't already.