Master In Next.js

Introduction

React is a trendy JavaScript library to create the UI. React is straightforward to learn and create reusable web components. But similar to other JavaScript library/framework it has one major drawback that is doesn’t provide the server-side rendering. Actually, React uses the Virtual DOM ideology that is a wrapper to Real DOM. It is very necessary because it makes rendering very fast and prevent the extra and not required DOM operation and make application fast. But as we know that in this world nothing is 100% perfect each new thing comes with some side effects or loopholes. Or we can say that every great thing comes with some price.

The same is with the Virtual DOM concept, it reduces the DOM operations and makes the application faster but it doesn’t provide the server-side rendering. What is mean by server-side rendering?

When we create any React application and display some content in application it only displays on the browser and data is lost from the server.

Does it matter for us?

If you are thinking that you can create React app and make them live then why server-side rendering matter so much. Let’s take an example. I create a simple React application with some controls like below.

In this application, I create a label, textbox, and a button. Let’s check the page source of this application. The page source of the above screen will be following,

You go through this screen you don’t find anything related to screen that we are displaying on the browser. That is because React doesn’t create any Real DOM it only creates the virtual DOMS. So whenever Search Engine Crawlers search for this page they don’t find anything on this page. Because Crawler never considers what terminology or ideology you are using to create the application. Crawler only looks for the content of the page. No content is available on the site the indexing of the site will never be created by the Crawler.

There are other use cases where React fails to complete the requirement. If an application is created using the React and we try to share the application on any Media platform like Twitter or Facebook, then you don’t find the exact result you want because all media platforms only render the data from the server.

If you are going to create a long page then it can take a long time to display the data because React first load all the JavaScript code then make it display to the user. There is not any concept like early loading.

In the React world, there is the superhero that name is Next.js. Our superhero Next.js can save us from this trouble. Let’s take an intro about Next.js.

Next.js

Next.js is a popular React.js Framework that enables the server-side rendering and also provides some other useful features for React application. In other words, using the Next.js we can create a Universal app that can render both on client and server-side.

Features of Next.js

Hot Code Reloading - Next.js re-render the page whenever it detects any pages into the page.
Zero configuration and Single command setup - Don’t need bulk line of code to set up, we can setup a project with the single-line command.
Single File Components - Next.js use the styled-jsx that provide the provide scoped and component-friendly CSS support for JSX (rendered on the server or the client).
Server-Side Rendering - We can render the React component on a server before sending it to the client.
Automatic Routing - We don’t need to perform routing manually, all components in the Pages folder are automatically attached to the URL.
Ecosystem Compatibility - Next.js is easy to configure and work with the rest of JavaScript, React, and Node.js ecosystem.
Automatic Code splitting - Next.js only rendered the required modules and libraries, not all at a time.
Prefetching - Next.js support prefetching that prefetch the page resources in the background.
Dynamic Component - We can import the React component and modules dynamically also.
Static Exports - Next provide a “next export” command using that we can export a static site for our application.

Installation

As we say that Next.js setup is just one line command. Create a directory and name it whatever you want. Here I named my folder “NextJsApp”, after creating the folder not move this folder and open the command prompt and run below command.

First, run the “npm init –yes” in the terminal, this command will create a package.json file. Now run the below command.

npm install --save next react react-dom

Above command install the basic required dependency. After installing the required modules now add below line of code in packages.json scripts sections.

"start": "next"

Now run the below command in terminal

“npm run start”.

As you run the above command you will get some errors related the “pages” directory.

The reason is that Next.js required a “pages” directory into the root of the application. In this directory, we will create all the URI components. Let’s create a “pages” directory and run the command again.

This time Next.js start the server successfully at 3000 port’ let’s access this URL and check what happens. If we try to access the “localhost:3000” URL we will get the following output.

Till now we don’t create any component into pages folder and Next.js required an “index.js” file to initiate the application. Let’s create an “index.js” file and try to access this URL again. The most important point is that Next.js handle the error very well like 404 and 500 error.

Create an “index.js” file and write the below code of lines into this file.

export default () => (
<div>
<p>Hello Next.js!</p>
</div>
)

If we visit the URL again and refresh the browser now the following will be the output in our browser.

If you are getting the same output in your browser then congrats you configured the Next.sj server successfully. Let’s create another file and named this file as “aboutus.js” and paste the following lines of code into this file.

export default () => (
<div>
<h2>This is about us page</h2>
</div>
)

After creating the above file, now access the “localhost:3000/aboutus” URL. If you hit this URL you will get the following output.

Now one question is arises that till now we don’t write any routing-related code then how Next.js loading the pages on the behalf of URL. Actually, Next.js uses the structure of a declarative page, which is based on the file system structure. It means that Next.js take the URL and try to access the same file name into the pages directory and display that into the browser. This is the default behavior of Next.js but we can handle that and learn about routing into upcoming articles.

Check for the server-side rendering

As per documentation, Next.js perform the server-side rendering let’s check this statement. Let’s check the page source for the http://localhost:3000/aboutus URL. If you check the page source you will get some output similar to below.

We can see that HTML code is present into the above image that means HTML code is not generated at the client-side instead of this is generated on the server-side and send to the client. Actually Next.js team work on the same concept as PHP but in a different way. If ever work on PHP you will find that in PHP we write the files into a directory and then we can access those files directly using URL. Next.js also work on a similar concept.

Let’s try to change the content of “about us” page and check what happens.

export default () => (
<div>
<h2>This is about us page ahs been changed</h2>
</div>
)

As you make and save the changes these changes will automatically reflect in the browser, we don’t need to refresh the page because Next.js provide the hot reloading.

What is the .next folder in the project?

If you check, you will find that a folder “.next” has been created automatically in our project. Why this folder exists and who creates this. Actually, this folder is responsible for the working of Next.js. Whenever we run the Next.js server it creates this folder automatically and performs all its functionality through this folder.

If you expand this folder you will find a “bundles” subdirectory in this directory Next.js create a JavaScript and a map file for each page that we created and also for the default pages like error pages. Whenever we load the URL for any specific page then Next.js render that page from here. Next.js perform the automatic code-splitting by creating different files for each page.

Cons and Pros of Next.js

Till now have understood that what is Next.js and why should we use it. But before starting the work with any new technology we should have the knowledge about the cons and pros of that particular technology that help us to make the better decision we should use that or not. Let’s focus on the cons and pros area of Next.js implementation.

Cons of Next.js

Perform the server-side rendering that makes help us to index the website in the search engine crawler.
Make it possible to share the website on a social media platform like Facebook, twitter.
Easy to set up and don’t need to configure web pack, babel manually all of these provided by Next.js automatically.

Pros of Next.js

SSR is performed on the server-side, so it can increase the page size and loading time. So heavy pages may take a long time to load and decrease the performance of the app.
It can increase the complexity of the application.
False use of SSR can decrease application performance.

Conclusion

Next.js solve a big issue of SEO and sharing the website on the social media platform. But before starting the work on Next.js you should have confidence that does you really need this. You should have considered the effect of implementing this on the rest of your application. Because wrong or exceed implementation can decrease the performance of the application.

In this article, we learn what is Next.js and cover some basics of Next.js in the next article we will learn more about Next.js. If you have a query or doubt then please write into the comment section. Thanks for reading the article.