The ultimate guide to mastering Next JS — (Part 1 of 3)
Tags: javascript, react, nextjs, webdev
Published: 2023-02-18 12:29:05

React has taken the tech world by the storm, thanks to its declarative nature that it has risen to the top preferred tech stack by most startups.

Next.js, a framework of React, is steadily gaining popularity not just because React developers can easily adopt it but also because it solves a lot of React’s shortcomings, such as server-side rendering, SEO, performance, etc.

Before moving on to the more advanced concepts of Next JS, let’s first understand some basic terminologies that you need to have a strong grasp on in order to fully understand the benefits and more importantly the “WHY” behind Next JS.

**TABLE OF CONTENTS:**

- Development vs Production environments.
- Compilation
- Minifying
- Bundling
- Code-splitting

**1. Development vs production environments:
**

**Development environment:
**
It is, simply put, the environment that is optimised to help developers increase their productivity — basically anything that helps them do their job better and easier.

A few things, you as a dev, can think of off the top of your head could be — prettier for better indentation, Fast-refresh features, Linters such as ESLint, VS-code’s colour-coding for better readability, TypeScript to mitigate bugs, etc.

As you can think of by now, none of this matters for the end-user who actually you’re building the products for. And this is where the production environment comes in.

**Production environment:
**
The end-user who is actually using the product doesn’t care if your code looks pretty and readable, or if your functions are modular, or if you pass the props in just right.

The only thing that matters here is:

Is the webpage the end-user is requesting for getting served, loaded and painted onto their screen in the fastest, most efficient way possible?

In other words, is it performant and accessible?

This is where the production-environment comes in, and the production build is just code that is optimised for the end-user. (As simple as that!)

In the production-build, we compile the development build, code-split wherever necessary, minify, (more on these terminologies soon!) and several other modifications— all of which help with the end goal — Snappy, reliable and predictable software.

NextJS offers several out-of-the-box tools to facilitate that. (More on that later!)

**2. Compilation:
**
Compiling refers to the process of taking code in one language and outputting it in another language or another version of that language.

With respect to React and NextJS, it is the process of converting your JS code into a language that the browser understands.

We use JS ES (6, 7, 8), JSX, TS, TSX and several other abstractions that have been built purely for the benefit of the developers, but in reality, browsers have a tough-time catching up to the rapid development of such abstractions.

The solution? Compilers. In React, more commonly, we use Babel, which converts your new-age JS code into the older JS format that browsers can understand.

Next.js handles these code-transformations out-of-the-box using a super-fast compiler based on Rust to make it easier for your code to go into production.

Now, we’ll learn what each of these tranformations are.

**3. Minifying:
**
Minification is the process of removing unneccessary code formatting and comments without changing the code’s functionality. The goal is to increase the application’s performance by decreasing the file sizes.


As you can see, developers write code for human readability, but our machines don’t care if they’re indented or has a bunch of comments for context. Removing the unnecessary spaces and comments could further decrease file sizes leading to better load-times.

**4. Bundling
**

Developers break up their application into modules, components, and functions that can be used to build larger pieces of their application. Exporting and importing these internal modules, as well as external third-party packages, creates a complex web of file dependencies.




Bundling is the process of resolving the web of dependencies and merging (or ‘packaging’) the files (or modules) into optimized bundles for the browser, with the goal of reducing the number of requests for files when a user visits a web page.

**5. Code-splitting
**
Developers usually split their applications into multiple pages that can be accessed from different URLs. Each of these pages becomes a unique entry point into the application.

Code-splitting is the process of splitting the application’s bundle into smaller chunks required by each entry point. The goal is to improve the application’s initial load time by only loading the code required to run that page.

Next.js has built-in support for code splitting. By default, every page you have in your Next.js will have its separate chunk.

Consider a hypothetic blog website called animallife.org that writes about animals, and the end user wants to read about seahorses in particular.

Instead of loading the entire codebase just to display a page about seahorses, Next.js has a separate chunk of js file dedicated for seahorses, and loads up just that. End result: Snappy, performant website.

Additionally, if there’s a module that is shared amongst components, the chunk associated with that module is downloaded just once, and is reused by the client for other components.

Further: After the initial page load, Next.js can start pre-loading the code of other pages users are likely to navigate to.

**CONCLUSION:
**
Congratulations! You’re now familiar with the base-level Next.js terminologies. Knowing these helps lay the groundwork for understanding more advanced concepts such as rendering, pre-rendering (where Next.js really shines), the types of pre-rendering, the specific instances where we would opt for one type of rendering over the other and much much more!

Thanks for reading! Do comment your thoughts, like and share this post to your fellow developers if you found this valuable.