Why I Choose NextJS
Let me preface this by saying that I have been a web developer for over 10 years. I have seen many frameworks come and go. Some have stood the test of time, while others have faded into obscurity. With its powerful features and flexible architecture, NextJS has become the go-to framework for building modern web applications. In this blog post, I will share my thoughts on why I regularly choose NextJS for my projects. I will also discuss some of the key features that make NextJS a great choice for web development.
I will also discuss some of the troubles I have faced, and some considerations to keep in mind when choosing NextJS for your projects. Although NextJS is a great framework, it is not without its flaws. I will walk you through what I believe are the core reasons why NextJS is a great choice for web development.
TL DR
React Recommended
Along with other frameworks, NextJS is recommended by the React.
API Routes and Server Components
NextJS offers two great features that make it a great choice for web development: API routes and server components.
Its Fast
NextJS is extremely fast because it uses server-side rendering and static site generation. Along with its image optimizations, pre-rendering capabilities, and incremental static regeneration, Next.js is a powerhouse for performance.
File Based Routing
NextJS uses file-based routing, which is a great feature that allows you to build a website without having to build a separate router.
Flexibility
NextJS offers a lot of flexibility. You can build a static website, a dynamic website, or a combination of both. You can opt in or out of the features that NextJS offers.
React Recommended
Along with other frameworks, NextJS is recommended by the React. React also recommends other frameworks, such as Gatsby and Remix. However, NextJS has seemingly been ahead of the curve as it introduced server-side rendering and static site generation before other frameworks. This has made NextJS a popular choice for many developers.
Gatsby has offered static websites from the beginning, howver NextJS has taken this a step further more recently by offering static website generation as an option you can choose when you build your app. This is a great feature that allows you to build a static website that can be hosted on a CDN, and is great for SEO. Server side rendering is also a great feature that allows you to build a dynamic website that can be hosted on a server. However, my experience with Gatsby has been that it is not as flexible as NextJS. NextJS offers a lot of flexibility and control over your application.
“If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.” - React
You can read more about why React recommends using various frameworks on the React website. React
API Routes and Server Components
NextJS offers two great features that make it a great choice for web development: API routes and server components. API routes allow you to build an API directly into your NextJS application. This is a great feature that allows you to build a backend for your application without having to build a separate server..
Server components are a new feature that allows you to build server-side components directly into your NextJS application. This is a great feature that allows you to build dynamic components that are rendered on the server.
Its Fast
NextJS is extremely fast because it uses server-side rendering and static site generation. It introduced the first-page load time be rendering the initial HTML on the server. This is a great feature that allows you to build a fast website that is great for SEO.
Combined with its image optimizations, pre-rendering capabilities, and incremental static regeneration, Next.js is a powerhouse for performance.
Nextjs also has built-in chaching, so pages load quicker. You can mnually set the header on any API routes and retrieve content and server-side rendered props to use Cache-Control. Of course, this is a feature that you can choose to opt out of.
File Based Routing
NextJS uses file-based routing, which is a great feature that allows you to build a website without having to build a separate router. Browsers execute a "hard navigation" during page transitions. The App Router in NextJS facilitates "soft navigation" across pages, making sure that only the segments of the route that have changed undergo re-rendering (partial rendering). This approach maintains the React state on the client side throughout the navigation process.
The filed based routing inherently makes it easier to organize your code. This allows you to build a website that is easy to maintain and easy to navigate.
Call me a purist, but I love the simplicity of file-based routing. Brings me back to the days of PHP and HTML.
Flexibility
NextJS offers a lot of flexibility. You can build a static website, a dynamic website, or a combination of both. You can also build a website with server-side rendering, static site generation, or a combination of both. This is a great feature that allows you to build a website that is tailored to your needs. If you want to develop as if it were react you can, or you can use the features that NextJS offers.
The fact of the matter is even if I ain't using many of the features built into NextJS, I may need something eventually.
Conclusion
At the end of the day, the tech stack you choose will depend on your project requirements, your team's expertise, and your personal preferences. NextJS is a great choice for web development, but it may not be the best choice for every project. I have found that NextJS is a great choice for building modern web applications that require server-side rendering, static site generation, and a flexible architecture.
Ultimatley, the tech stack we choose just has a few goals it should accomplish.
- Deliver the ender user a good experience
- And do it quickly
Keeping these goals in mind, I have found that NextJS addresses most of my concerns when developing a modern web application but that doesn't mean it's the ONLY choice. I've spent a lot of time with NextJS so I have a lot of experience with it and have learned to appreciate the features it offers.
There is clearly more that goes into choosing your tech stack, like time to market, cost, and scalability. But if you're looking for a framework that offers a lot of flexibility, great performance, and a robust set of features, NextJS is a great choice.
I hope this blog post has given you some insight into why I choose NextJS for my projects.