The Next.js framework is often appreciated both by developers and clients as a real helping hand when it comes to building front ends. However, there is still a lack of resources that clearly show the advantages of Next.js and how it can really help during the application development process.
This article is full of the knowledge of Next.js that developers look for, and here they can learn about what Next.js is, what problems it solves, and its pros and cons.
What is Next.js—a definition
Next.js is an open-source JavaScript framework created by Vercel (previously Zeit). It is based on React and Node.js. This framework is full of cool features which help developers optimize UX, performance and score great numbers in Core Web Vitals at audit time.
Some say it is a full-stack JavaScript/React framework, and I agree with them as it allows you to develop REST or GraphQL APIs via a feature called API routes alongside your frontend application.
From our previous article, you can get more details about React—what it is and what React keys are.
At some point, it feels like Next.js took a step back (from classic single-page applications to server-side-rendering and static sites) just to take two steps forward. More details about the hydration process will be described below.
Now, let's take a look at how Next.js can help you in your day-to-day work.
Next.js and problems that it solves
Next.js, as mentioned earlier, is based on React. It allows you to write your frontend code with all the benefits of this well-known and established library. JSX, CSS in JS, hooks, all of that is available to you.
As is well known, React plays well when it comes to building complex SPAs (single-page applications). It separates the frontend and backend layers and is highly optimized during build time. It also has a vast ecosystem of libraries that cooperate well with it. The whole JavaScript application can be cached and only downloaded when a new version comes in.
On the other hand, if care isn’t taken, certain difficulties can make your application less performant than it could be (like improper code splitting and lazy loading). Secondly, Google web crawlers still have difficulties with interpreting JavaScript, and most of our React applications are JavaScript applications. It turns out that when it comes to SEO, server-side rendered pages score better in Google search rankings than sophisticated SPAs.
This is where Next.js shines. It helps you easily develop server-side rendering, static generation, or a hybrid of the two, and bring interactivity to your front end through React code. You may ask: “Ok, but what about the great SPA user experience that comes with client-side routing?”. After sending a pre/rendered page (HTML), Next.js sends JavaScript code that makes your front end an interactive SPA. This step is called hydration. Thanks to automatic code-splitting it will send only the data that it needs to. Its Link component will also prefetch or, if configured in another way, load the rest of the application on demand.
This combination lets you achieve several goals:
- Score well in Core Web Vitals.
- Achieve a great user experience.
- Google crawlers are able to index your page without a problem.
However, like every other solution, Next.js also has its weaknesses and it is worth being aware of these if you use this solution for your next project.
Pros and cons of Next.js
You have had a chance of a brief look at what problems Next.js solves. But to sum up, some of the benefits and drawbacks of Next.js applications have to be pointed out.
Benefits of using Next.js applications
- They are fast due to server-side rendering and static site generation (especially the second one).
- Google crawlers are able to index these apps.
- The Next.js ecosystem comes with a pre-configured environment ready to ship to production.
- The framework comes with configured code splitting per route and lazy loading.
- Ability to use dynamic imports.
- A great Image component that lets you optimize images.
- Font optimization resulting in improvement in First Contentful Paint and Largest Contentful Paint.
- Script optimization saves developers time while improving loading performance.
- Fast refresh and Hot Module Replacement during development.
- Ability to choose your preferred way of styling (CSS modules, CSS in JS).
- API Routes and middleware alongside frontend code.
- Browser support with proper polyfills reaching IE11.
- Good documentation allows you to start using a framework in several hours.
- Compiler written in the Rust language (much faster than Babel).
After all of these benefits, it’s time to look at the down sides of Next.js.
Disadvantages of Next.js
- The talent pool of Next.js developers is narrower than React.js developers.
- Some developers prefer not to use its file-based router. Also, layouts and nested routes can be tricky to implement.
- For dynamic routing, you need to use server-side rendering or static site generation.
- No built-in state manager, which means you have to configure this solution on your own.
- Requires full-stack knowledge and removes the distinction from frontend and backend layers.
Quick recap
Next.js solves some of the issues attributed to React applications, but also introduces new problems. It can be a good solution when SEO is required (e-commerce applications, landing pages, social media applications, job boards, etc.)
React is often described as unopinionated. Next.js removes some of it, for example, introducing a single router.
On the other hand, developers and companies should strive to deliver the best user experience, and Next.js is more performant than React SPAs.
Overall, Next.js is a great framework, but it won’t replace classic React SPAs.
