Logo
Journey from CRA to Next JS

Journey from CRA to Next JS

April 27, 2024

As a web developer, it's always essential to stay up-to-date with the latest tools and technologies to ensure that you can deliver the best possible user experience to your clients. One of the most popular and widely-used frameworks in the world of web development is ReactJS, and if you're reading this, chances are you're already familiar with it.

In this blog post, I'm going to share my journey of starting with Create-React-App, refactoring it for Vité, and now refactoring it to NextJS. This journey has been exciting and challenging, but ultimately, it has helped me become a better developer.

Starting with Create-React-App

When I started learning React, I began with Create-React-App (CRA). CRA is a fantastic tool for creating a new React project with a few simple commands. It takes care of all the initial setup and configuration, so you can jump straight into coding. I found it easy to use and was quickly able to create simple applications using CRA.

Refactoring for Vité

As I progressed in my learning journey, I came across Vité, which is a build tool for modern web development. Vité is designed to be fast, lightweight, and extensible, making it an excellent choice for building scalable web applications. I decided to refactor one of my CRA projects to use Vité to take advantage of its features.

Refactoring to Vité was a bit challenging at first, as it required me to rethink my project's file structure and configuration. However, I quickly realized the benefits of using Vité, as my project's build time reduced significantly. This helped me to focus more on developing my project rather than waiting for it to build.

Refactoring to NextJS

Recently, I came across NextJS, which is a framework built on top of React. NextJS provides several features that are not available in CRA or Vité, such as server-side rendering, automatic code splitting, and static site generation. I decided to refactor one of my Vité projects to use NextJS to see how it would perform.

Refactoring to NextJS was relatively easy, as the framework provides a simple CLI for creating a new project. Additionally, NextJS has a well-defined file structure, which made it easy to understand where everything was located. Once I started using NextJS, I realized how much easier it was to build complex applications compared to CRA or Vité.

Conclusion

In conclusion, my journey of starting with Create-React-App, refactoring for Vité, and now refactoring to NextJS has been an exciting and challenging experience. Each of these tools has its advantages, and choosing the right one depends on the project's requirements. I found that each tool helped me improve my skills as a developer and allowed me to create better applications. If you're starting with React or looking to improve your skills, I highly recommend trying out each of these tools to see which one works best for you.