From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

RQ: Next.js in spite of React - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

RQ: Next.js in spite of React

“

So, let us discuss about few questions. The first is what is Next.js? So it's a React based open source web development framework and since it is based on React, it can be called as a JavaScript framework too. It is created by Vercel and is very popular for its out-of-the-box features like server side rendering and much better search engine optimization. The next question is, why would one choose Next.js over React? React is already a good framework, but Next.js offers better features that are beneficial for both user as well as the developer. Let's see some key advantages of Next.js. The first point is SSR that is server side rendering. Next supports server-side rendering in spite of being a front-end framework, and this allows the application to have better SEO and better initial load times. Next.js supports automatic code splitting, which ensures that the JavaScript code is split into small chunks and is loaded as per the need only, resulting in better efficiency. With Next.js, you can have the API routes defined in the same project itself, making it easier and more efficient to deal with APIs. Routing is also made very easy with the incorporation of file-based routing, so you do not need libraries like React Router DOM for routing and single page application. You also have the benefit of built-in image optimizations that make sure that the rendered images are not oversized. And finally, the fact that deployment is easy as the creators of Next.js offers serverless deployment and it easily links to repository, along with default CICD implementation and many more like static site generation, built in CSS support for JSX style and CSS in JS file etc. And we are going to learn each and every point in detail in this tutorial. And above all, if you check the official site of React where it is guiding us to create the project, there also it says that instead of using the core React, you can use any of these frameworks, where Next.js is the framework mentioned on official site of React as well. The next question, what is SSR? Now this is very basic yet important to understand. There are two places where a web interface is rendered, client or server. Frameworks like React follow client-side rendering, where the code is processed and the interface is rendered on the client's device, whereas in server-side rendering, the interface is rendered on the server and the ready pages are delivered to the client. It is called server-side rendering. And Next.js, even though it is based on React, supports server-side rendering, which gives it better initial load time, better SEO, and much more.

Contents