Next.js is a framework build over react.js which, as they claim, is laden up with all the features needed for production. If you are familiar with React.js then switching to Next.js will be easy.
It comes up with some nice features which include Server Side Rendering, page-based routing, built-in CSS, fast refresh in development mode, Automatic code splitting, and much more.
Server-side Rendering vs Client-Side Rendering: Server-Side rendering means preparing the content of the page at the server. This is not the case in react. In react, all the content is rendered on the client-side. In the images below, you can see the page source of a page rendered on the server v/s that rendered on the client.
This may not be a very big issue and depend on your website as server-side rendering is very good for SEOs and if you are building a landing page or writing a blog, you want it.
Next.js allows us to use both. Yes, it gives you an option to use both in your website with some pages being prepared on the server and some on the client.
Note: React also provides Server-Side Rendering but it might be complex to set it up.
File-based Routing: In React, we use React-Router to navigate, we serve different components on different routes and give users an illusion of a multi-page app. But IN Next.js, we define pages and routes through files and folders. To explain this, let us take an example.
In Next.js you have a folder named "Page" (cannot be changed). Here, we have different files and these filenames are used as the routes. Let me show you this.
We have a file sell.js with some basic JSX. Now If you go to the browser and visit "/sell",
So this is how the routing is done in Next.js. One benefit of using this method of routing is you don't have to write the code for setting up React-Router, which generally looks like this:
File-base Routing also helps in code-splitting. When a user visits any page, only the JS and CSS of that particular page are loaded which makes the pages load faster.
What makes Next.js a better alternative?## There are many features that Next.js provides out of the box but I won't be going over each one of them. I have listed three features, which I feel are the most prominent.
Image Optimization: Image optimization is one of the main features of Next.js. It has a dedicated component for Images , which is built over HTML'S tag. Automatic Image Optimization and lazy-loading make UX nicer and also improves the build time. Lazy loading means that only the images which are on the viewport (which the user can see) are only loaded. Also in their release i.e. Next-11, they have added a "blur" placeholder, which shows the unloaded photo as blurred rather than a completely blank screen.
Built-in CSS support: Next.js allows you to import CSS files from JS files. What does this mean? Suppose you want to add a global stylesheet to your project, then you can import the stylesheet in pages/_app.js and this styling will be applied to all the pages.
ESLint and Typescript: Next.js provides us with both ESLint and Typescript experience out of the box. Also, fast refresh support at the development phase saves a lot of time.
So, I hope I have provided you with enough information on Next.js and by now you must be clear on whether you want to include Next.js in your first project or not!