Core 3 features of NEXT.JS

Disclaimer: I wrote down some main point while I studying NextJS framework. Then I edit as an article to publish on medium for the fellas like me who are willing to move on some front-end framework. In this article, there not coding section and only describe the theories.

What is Next JS?

To build a complete web application with React from scratch, there are many important details you need to consider:

• Code has to be bundled using a blunder like web pack and transformed using a compiler like Babel.
• You need to do production optimizations such as code splitting.
• You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
• You might have to write some server-side code to connect your React app to your data store.

A framework can solve these problems. But such a framework must have the right level of abstraction — otherwise it won’t be very useful. It also needs to have great “Developer Experience”, ensuring you and your team have an amazing experience while writing code.

Key Features and Benefits

1) Server-side rendering:

Server-side rendering is all about preparing the content of a page on the server instead of on the client. In ReactJS, we can see empty page if you inspect the web page which developed by ReactJS.

Mostly our idea of ReactJS to use is just give skeleton HTML code with some DOM ID root to browser. Then, if browser finished load up the HTML, then JS file will be execute to show the content or design or whatever which developer would like to show to user on web page later.

The distanvatage of this idea is search engine like Google cannot crawl the web content to provide SEO service.

Server-side rendering solved the above problem. By pre-render content on server-side and if that data fetching somehow could be done on the server, when the request hits to the server. Then finished page would be served to the user and to the search engine crawlers, then user don’t have to wait for flickering loading state to get the data from backend or whatever.

It can be done to pre-render react pages, react components on server. react.js have default features that allow us to add server-side rendering but it can be tricky to get that right. And it require extra setup from your side.

With next.js it can be done easily because NextJS has build-in server-side rendering. It’s kinds of blending client-side and server-side. Fetch data on the server and render finished pages on client browser.

2) File-Based Routing

In ReactJS, we used routing technique to route the page when user click (interact) on something on page. Routing means that ReactJS give illusion to the user of having multiple pages. When we navigated around and router load different pages and it’s the job of a router.

Basically router watch the URL and when it changes, it prevent the sending request to the server instead of rendering different page content with React. Replace one component to another different component. Because it’s single page application which typically build with React. It’s depending the version of the router you are using.

As a disadvantages, you have to handle your route in code. Just imagination it, there are a lot of components in your app. You have to manage those route and path in your code in hand with different physical file.

With NextJS, you have to define pages and routes with files and folders. In NextJS, there is a folder called pages which used to define your routes and path. With this idea, NextJS rid of the extra code and it’s highly understandable concept. Also, NextJS supports the features like nested routes or dynamic routes with dynamic parameters and so on.

3) Full Stack Capabilities

Another cools features of NextJS is allow you to implement the backend code. It’s easily add backend(server-side) code to your Next/ React Apps. Like storing data, getting data, authentication etc. We can implement all of those logic in one project.

Ref:

• https://nextjs.org/learn/foundations/about-nextjs
• https://academind.com/ (I enrolled NextJS course)