Updated

Next.js

After learning the basics React and all it had to offer, I decided that I wanted to use it to build my first project. However, after further research, I learned that React by itself (using create-react-app) was not really performant or production-ready for a website. It delivers the entire JavaScript bundle along with an empty HTML shell and tells the client to do all the work. This can be problematic if the user's device or internet connection is weak, resulting in poor TTI (time-to-interactive) and long loading times. Additionally, because the HTML shell is initially empty, search engine crawlers can potentially collect all their data before any content has a chance to render. There are package addons and ways to work around these problems with a basic React app - but that's a lot of extra obstacles and dependencies to manage.

Enter Next.js - a framework for React that solves all the problems above that can result in a website having poor performance and poor SEO. Next.js can take the React code I've written, compile it down to pure HTML and serve it to the client with lightning-fast loading times, and only afterwards hydrate the page with the interactive elements I created. This results in high performance and stellar SEO - perfect for what I needed.

Next.js also offers so many more features that I love - page routing including dynamic routes, image optimization, a built-in API designed to run off serverless functions, and so much more. I've really only scratched the surface on learning all the features and benefits of using Next.js over a plain React app.

Given that Next.js is being actively developed and maintained by Vercel - continuously adding new features all the time (including on-demand ISR which was just added a few weeks ago at the time of writing this), I see no reason to use any other framework for React applications.