Have you ever wondered why a React app takes so long to load for the first time? It is mainly because the React app is rendered through the browser.
What is NextJS?
NextJS is a React frontend Web Developement framework created by Vercel(former Zeit) that enables functionality such as Server side rendering and static site generation. Next is not itself comparable to a Frontend framework like React, Vue or angular but built on top of React to provide extra features helpful especially in production. Unlike a traditional React app where the entire site is rendered in the client side, NextJS allows the first page load to be rendered by the server which is great for Search Engine Optimization and performance. This allows a more interactive kind of interface when compared to an older PhP or something like a Template engine. In those cases, everytime a user wants to navigate to a new route or update something in the user interface, the user has to make a new request and reload the page. Even though an application made with a Client side framework(React for example) solves this problem, they can have many problems and one of them is SEOs.
There can be multiple ways to solve this problem but NextJS does it out of the box as the first page load is done on the server side rather than the client side. Not only does this increase the performance but the content is delivered directly. So if we check the source code, we can directly see the content. So we get the best of the both worlds. We get the great server side SEO optimization and on the other hand we get the quick dynamic client side routing.
Other advantages of NextJS:
- Easy page routing.
- API routes.
- Out of the box Typescript and Sass
- Static site generation(next export)
- Easy deployement
For routing, we dont need to use a third party routing like react-router-dom. In the folder structure, there is a pages folder inside which each component is a react component. Suppose a component is created in that pages file named hello.js, on hitting ‘/hello’, we will be able to access that particular component inside the browser. Since it is rendered on the server side, we can also create api routes. We could also work with dynamic routes. Also, there is a package known as next/router which is really useful in getting the parameters.
Another thing to notice are the CSS files. CSS files are a bit differently named in a Next app. The general syntax is “filename.module.css”. Also, we cant directly import the stylesheet like we did in react.
Creating a NextJS app:
The command to create a NextJS app is very similar to a react js app. In the command prompt in a particular location, we type the command:
npx create-next-app my-app
This particular import statement is used if we want to have a custom meta tag, header, descriptions etc. We put the head, meta tags etc inside a parent div, much like how JSX works in ReactJS.
Data fetching and useswr
One common point where all Frontend developers meet would be data fetching and working with number of APIs. In React, we generally deal with such asynchronous requests inside the lifecycle methods. There is a third party library created by Vercel itself named swr, which handles everything mentioned above under the hood. So we can understand how much code and effort can be saved.
This was all about the basics of NextJS. One thing I must mention that we can do almost everything in NextJS that we can do in React including using hooks(useState, useEffect), use third party state management libraries such as Redux or Flux, use the Context-API and much more.
And also, NextJS is not ideal, it also has its own disadvantages. NextJS is not actually a backend, we actually need a proper backend for larger apps. If we are preparing smaller apps, NextJS is powerful but it can also overkill sometimes and in such cases, it is wiser to switch back to ReactJS.
Brad Traversy NextJS crash course on youtube
NextJS documentation: https://nextjs.org/