How Next js Works

Nextjs is an opinionated React Framework by Vercel built on top 🗻 of the state of the art React library and file based routing for navigation. Next js has successfully introduced a lot of opinionated practices that ensures that the web application feels native and smooth to the end users as well as the search engines 🚒. So, let’s explore what goes behind the scene to provide this amazing developer experience with Next js.

Source: How Next js works (https://nextjs.org/learn/foundations/how-nextjs-works)

The Next.js Compiler

There are various steps that takes place in Next.js which transforms the React Code into the beautiful page we see in the browser window. The following article elaborates them in sequence.

1. What is Compiling?

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

2. What is Minifying?

Minification is the process of removing unnecessary code formatting and comments without changing the code’s functionality. The goal is to improve the application’s performance by decreasing file sizes.

3. What is Bundling?

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

4. What is Code Splitting?

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.

5. Build Time and Runtime

Build time (or build step) is the name given to a series of steps that prepare your application code for production.

When you build your application, Next.js will transform your code into production-optimized files ready to be deployed to servers and consumed by users. These files include:

• HTML files for statically generated pages
• JavaScript code for rendering pages on the server
• JavaScript code for making pages interactive on the client
• CSS files

Runtime (or request time) refers to the period of time when your application runs in response to a user’s request, after your application has been built and deployed.

6. Client and Server

7. What is Rendering?

There is an unavoidable unit of work to convert the code you write in React into the HTML representation of your UI. This process is called rendering.

With Next.js, three types of rendering methods are available: Server-Side Rendering, Static Site Generation, and Client-Side Rendering.

8. Pre-Rendering

Server-Side Rendering and Static Site Generation are also referred to as Pre-Rendering

9. Client-Side Rendering vs. Pre-Rendering

In a standard React application, the browser receives an empty HTML shell from the server along with the JavaScript instructions to construct the UI. This is called client-side rendering because the initial rendering work happens on the user’s device.

10. Server-Side Rendering

With server-side rendering, the HTML of the page is generated on a server for each request. The generated HTML, JSON data, and JavaScript instructions to make the page interactive are then sent to the client.

On the client, the HTML is used to show a fast non-interactive page, while React uses the JSON data and JavaScript instructions to make components interactive (for example, attaching event handlers to a button). This process is called hydration.

In Next.js, you can opt to server-side render pages by using getServerSideProps.

11. Static Site Generation

With Static Site Generation, the HTML is generated on the server, but unlike server-side rendering, there is no server at runtime. Instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request.

In Next.js, you can opt to statically generate pages by using getStaticProps.

Incremental Static Regeneration