Trying NextJs for the first time

Working on a JS application powered by React is amazing until you realize that there are a many problems related to rendering all the content on the client side.

First, the page takes longer to become visible to the user, because before the html content loads, all the JavaScript files have to load, and your web application needs to run to find out what you want to show on the screen.

Second, if you are building a large application which will be used by internet users, you have a content SEO issue. Search engines are good at indexing and running JavaScript web apps, but it's better if we somehow can send them content instead of letting them figure it out.

Here are some of the features provided by Next.js

Hot Code Reloading : 

Next.js reloads the web page whenever it detects any change saved to IDE and it takes no time.

Server Rendering : 

Now before sending the html to the client, you can render React components on the server side first.

Automatic Routing :

Any web url is mapped to the filesystem, to files put in the pages folder, and you do not need any config in your app.

Automatic Code Splitting :

Pages are no more provided with just the libraries and JavaScript scripts that they need. Instead of building one single JavaScript file containing all the app code, the nextjs application is broken up instinctive in several different file and resources.

When you want to load a page or any component, it only loads the JavaScript necessary for that individaul page.

Next.js does that by considering the resources imported in the file.

If only one of your files imports the api fetching library, only that particualar page will include the library in its bundle.

Single File Components :

It has styled-jsx, which is completely built by the the nextjs team, it's easy to add styles scoped to the component.