How I migrated my NextJS Blog to Astro over a Weekend

9 min. read |
NextJS Category Icon
JavaScript Category Icon
Performance Category Icon
ReactJS Category Icon
Article

Migrating a blog from one framework to another can be a daunting task.

In this blog, I will share my experience of migrating my Next.js blog to Astro and discuss the challenges I faced along the way.

I will also provide insights into whether you should consider migrating your blog to Astro or not. So Let's get started...

The Why:

First of all, for all the React Haters Out there, I love React and I love NextJS. It’s just that it is overkill for a content-heavy website. But When I built my blog for the first time, I wasn’t aware of this (Poor Me). So I spent about a week just to add a Blog Page to my portfolio Website that too because of the Huge Ecosystem of React Libraries and although it looked good and was functional, it wasn’t the fastest solution. You can still check it out at https://thedevguy-blog.netlify.app/.

But as I’ve said it took a WEEK to Achieve this and it was fast but it wasn’t the fastest. OH, and there were Some Many Problems that I’ll discuss in this blog. So Anyway I decided it was time to “break up and move on”.

The Idea:

But Break Up is HARD and Moving On is HARDER. After all, You were accustomed to your Partner and Finding a New One who lets you do the things You Like (pun intended) was not easy. So I started looking for the next best thing. I had been hearing a lot of buzz about the upcoming framework called Astro, which had recently hit version 1.0

Intrigued by its promises of Using The framework of your choice, I decided to give it a try, hoping that I could achieve the same functionality but with better performance as Next.js and a simpler setup., it’s a win-win for me. Little did I know that the experience would be fantastic and that I would complete the migration in just a weekend (after spending a week reading the Astro documentation, of course).

The Challenges with a NextJS Blog:

  • NextJS Hates MDX: Now, that may be too harsh but seriously, NextJS is not very fond of markdown files. It treats them as any other data files, so you have to do SO MUCH mumbo-jumbo to read your markdown files with the fs module, remove its extensions, get its raw data, generate the slug for each file from the file names, convert the raw content to valid HTML and then embed it into your MDX components. On top of that, I have to use the gray-matter npm package to insert and parse frontmatter (metadata like title, publishedAt etc.) to and from my markdown files. The reading-time package to generate reading Time, next-mdx-remote and next-mdx-remote/serialize to display the generated HTML into my components which I always find totally unnecessary

You can look at the disaster below from my utils/mdx.js file that I have to create for the above purposes :

  • Syntax Highlighting is Hard: So I use a lot of custom code snippets in my blogs and I want basic Syntax Highlighting for them, but for this purpose, you have to use remark and rehpye plugins to get stuff into place, which can take a lot of configuration and time for basic Syntax Highlighting

Even after going through all of this because React has to hydrate the page if you want any kind of interactivity, the performance is not optimal.

How Astro Solves This :

  1. It’s just JavaScript: The best thing about Astro is that it’s just plain old JavaScript and not framework-specific. This means that even beginners can write features in normal JS or use any JS library from the thousands of available npm packages, based on their own use case. It also comes with built-in SASS Support which is also good.


This is the code to toggle between Light and Dark Mode, Now I know that it’s much more code than if you were using something like React, But it’s still very simple and understandable.

  1. Server-Rendered and Highly Performant: Astro’s focus on performance was evident from the start. The framework ships No JS by default, resulting in faster page load times and improved overall performance and user experience.
  2. Great Markdown Support: Astro provides excellent features like syntax highlighting, utility functions, and integration with rehype and remark plugins. This allows leveraging the full power of Markdown, making it easy to create and customize content using familiar syntax and tools.

The Above code is all we need to get the data from our markdown files including the frontmatter, slugs and reading time with syntax highlighting without any additional packages, configuration or any other hassle. It just works. Now compare this with its alternative NextJS code and see the difference. Minimum code with Maximum Results. That’s Astro for you.

  1. File-Based Routing: Just like NextJS works with .js files through its pages folder, Astro does the same for .md or .mdx files in its pages folder. Simply creating a file makes it a page, providing a convenient and intuitive way to organize content.
  2. Bring Your Own Framework: Now I haven’t used this feature for this blog, but if you don’t want to BREAKUP with your Favourite Framework, you can bring it Onboard and Astro won’t mind. It’s very understanding of the Developer’s feelings for their favourite framework. You can write your components with them and Astro just converts them to static HTML components and if you want interactivity, you can easily Lazy load them using directives like client:load etc.

Conclusion

Migrating my Next.js blog to Astro was a rewarding experience. The framework’s developer experience, performance optimizations, and customization options impressed me from the start. By taking the time to understand Astro’s concepts and following the migration steps, I successfully transformed my blog into a highly performant and customizable static site. If you’re considering migrating your blog or website to Astro, I encourage you to check out Astro.dev as now they have also added the Web Transitions and Collections API in their latest Version (We’ll talk about these later). The Astro documentation and real-world examples will guide you through the process and help you unlock the full potential of this exciting framework. Remember, learning something new can be challenging, but with patience and practice, you’ll be able to make wiser decisions and create exceptional stuff. Emphasize performance, prioritize user experience, and enjoy the journey of exploring different possibilities and approaches to solve Problems.

Until Next Time,

Happy Debugging Coding 👋

Back To Articles