Hey, folks, I've been making my web apps with React Js, and it's amazing. But not enough. I was recently shifting from React to Next and I found some cool features of it and I like to share them with you guys.
And the best part is Next is built on React as a framework and React is built on JavaScrip as a Library so you just need to let JavaScript get started.
Server Side Rendering (SSR)
React offers client-side rendering whereas NextJs offers server-side rendering.
Don't fall for the naming convention it's super easy to understand.
When you use Next.js, it automatically generates the first version of your web page on the server, and then sends it to the user's web browser. This can be faster and better for search engine optimization than generating the web page only in the user's browser with React.
So if you want your web page to be faster and easier for search engines to find, Next.js might be a good choice for you.
Routing
Next.js includes a built-in routing system that allows for easy navigation between pages. And this is my favorite feature of NextJs. React, however, does not have a built-in routing system and requires the use of third-party libraries such as React Router.
This is how routing in React looks like
This is how it looks in NextJs:
Data Fetching
Next.js provides an API for data fetching that enables you to fetch data on both the client and server. This can be useful for improving performance, as well as for optimizing search engines. React, on the other hand, does not have built-in data fetching capabilities. And if you have done a little bit of backend you know how painful it is to write fetch API requests.
TypeScript
Next.js provides built-in support for TypeScript, which can be useful for larger projects where type-checking can help catch errors early on. While React can also be used with TypeScript, it requires additional configuration and setup.
Deployment
Next.js provides a simple and straightforward deployment process, with built-in support for serverless deployments to platforms such as Vercel. React, on the other hand, requires more configuration and setup for deployment, and may require additional tools and services.