Why I use NextJSDecember 21, 2022
Is NextJS right for your next project? Are you reevaluating your current website and looking for an alternative framework to re-architect it around? Are you scouting around for a more modern approach to your frontend? In this post, I want to help break down three specific core functionalities that NextJS excels at, so that you can make a well-informed decision on your upcoming project’s major framework.
Simply put, NextJS is a framework for React. It is not for frameworks like Angular or Vue. What it does for your React project is provide a ton of foundation to a website, including routing, server-side rendering, API proxying, and incremental adoption. It also introduces a lot of efficiency techniques for development, such as using the Rust based transpiler SWC instead of Babel.
If you create a React website without a framework like NextJS, and need to incorporate these foundations, you’ll find yourself creating a lot of this functionality from scratch, or piece-mealing many libraries together. To make a decision on whether or not NextJS is right for you, I believe server-side rendering, SEO, and upgradability are some of the more important factors to consider. We’ll primarily focus on these three core functionalities next.
NextJS is able to pre-render content in two ways: server-side rendering, which has a slower time to first byte, but guarantees content is always up to date; and static generation, where NextJS pre-renders your content into HTML at build time, which is less up-to-date but significantly faster.
The downside to a server-side rendering approach depends on the complexity of your project. If you need thousands of pages, you likely don’t want all of your content being regenerated on every request. NextJS can perform incremental static regeneration, allowing you to choose when pages are compiled. You can also choose to render some things client-side. However, the danger of having a mix of client and server-side code is that browser APIs, for example, won’t be available in both types. So you have to be prepared to isolate code that is needed for each context, otherwise the complexity can get out of control, and your code base could become confusing. With that said, the major benefit is being able to choose between client and server-side rendering on a case-by-case basis with your website content.
If you follow proper modularization and component-based structuring with your NextJS React project, the complexities I’ve mentioned can be easily mitigated, and used to your advantage. Besides the organization of React components and pages themselves, Hooks can be used for more dynamic content, and functions such as getStaticProps can be used to generate static content at build time, caching the content in the process.
You’ll see that when people review NextJS, they always mention the benefits of SEO. The reality is that Google is pretty good at crawling through pages and rendering content, even if you don’t have any technical solution to SEO. That being said, if SEO is a huge priority for your web project, NextJS can help give you that slight edge you’re looking for. Here’s a couple examples of what that might look like:
- Server-side rendering makes sure that the web content is ready to go before the site is even loaded, which means that Google’s bots are able to render everything much more efficiently
- You can also use the NextJS webpack configuration to switch your React dependencies to Preact in a production environment, to find even more efficient loading times
- Generating sitemaps on each build is quite easy to implement, and guarantees further finishing touches on helping Google recognize everything, especially changing content, exactly as you intend
These points all help improve your Web Core Vitals metric. However, on average these benefits are small.
The last core functionality I wanted to go over is the upgradability of NextJS as a library. With Node projects, we have access to thousands of amazing open-source libraries. The downside is that we can frequently face deprecation, abandonment by the owner, or even with financially backed libraries, api breaking updates. My experience with NextJS regarding this has been extremely positive. Vercel, the company that created NextJS, is highly cognizant of how major updates can interfere with large codebases. Web libraries change often, and we don’t have time to refactor everything once a month. There are a couple tools to help with this for whenever a breaking change is introduced to a new version, or if you want to convert your entire website framework to NextJS:
Codemods - these are npx commands that let you preview and automatically transform specific parts in your entire project in order to follow a new API standard
Incremental adoption - if you have an existing non-NextJS project, or previous major version, you can gradually incorporate the major tenets of NextJS in a manageable way
NextJS offers so many foundations that are needed with developing a website, that you’ll find yourself having more time to work on the important part: the content. You don’t need to reinvent the wheel with routing, api proxying, cache management, static vs. client-side rendered content, and more. And personally, I love how friendly each of their major updates are to adopt into a codebase. I can spend more time on the UI or the actual functionality the user will experience, and leave the rest to NextJS.Still not sure? Check out the NextJS showcase where you can see real, familiar websites that are built off of this framework.
Stay in the loop with our latest content!
Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.
Big Victories with Big DataDecember 18, 2019
The term (“big data”) is often misunderstood or misapplied - the following is an attempt to help you better understand the concept so you can apply it in your professional world.Read more
Chicago Roboto 2022 RetrospectiveAugust 11, 2022
Scott Schmitz shares some notes of interest from talks at Chicago Roboto 2022, an Android community conference, that took place August 1-2.Read more
Michigan Software Labs Ranks No. 50 on Inc. Magazine’s List of the Midwest’s Fastest-Growing Private CompaniesMarch 17, 2021
March 17, 2021 – Inc. magazine today revealed that Michigan Software Labs is No. 50 on its 2021 Inc. 5000 Regionals: Midwest list, the most prestigious ranking of the fastest-growing private companies in Illinois, Indiana, Iowa, Kansas, Michigan, Minnesota, Missouri, Nebraska, North Dakota, Ohio, South Dakota, and Wisconsin.Read more