What I Like About Next.Js
May 15, 2021
3 min read
Next takes all the good parts of React and makes it even easier to get an app running. It does this thanks to multiple built-in configurations—automatic code-splitting, file-system routing, server-side rendering, static files exporting, and styling solutions. It can also be used as a static site generator.
How does the server-side work?
The ‘server-side’ in Next.js applications can be separated into two parts: The server-side rendering — how Next.js generates HTML on the server-side and sends it to the client The backend server — how Next.js supports a backend server and APIs
API routes
API routes provide a solution to build your API with Next.js.
Any file inside the folder pages/api
is mapped to /api/\*
and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.
Image optimization
- New Image component seeks to improve page performance by ratio-based image, layout placeholders, lazy loading, responsiveness, and optimization of image formats.
- Optimizes images on demand as users request them so that the build time won’t increase.
- Automatically changes the quality of images to a lower threshold of 75%, which can be updated for your needs.
- Images are part of any app or website, and if they are not optimized, they could destroy the whole user experience.
- By using the image component, you could easily create an image that is responsive and optimized without doing a lot of work.
Zero Config
Next allows you to focus on the business logic of your Next js app instead of the application logic. And to help you, it provides automatic compilation and bundling. In other words, Next is optimised for production right from the start.
Improve SEO with Next.js
Using Next.js will improve your SEO result a lot React is a Javascript-framework (some call it a library). React gives you a SPA (Single Page Application) which requires Javascript to show the content on the page. The problem is that the Google crawl bot, that scans all the pages on the internet, isn’t as good as understanding a page with javascript compared with a page that consists of regular HTML-code.
So Next.Js came and solved this issue and it:
- Improved SEO because search engine bots see HTML content.
- Improved performance on low-end devices because less JavaScript computation is done on the client (the browser)
- Improved loading times because the app is already pre-rendered when it reaches the browser
Great Choice for Business
Next.js is an increasingly popular solution for creating Jamstack sites using JavaScript and React. In effect, paving the way for looking past the trivial restrictions of templates, plugins, and other such features that usually come into the picture while making use of a conventional E-Commerce Platform or a CMS (e.g. WordPress, Joomla, Strapi).
Does Next.Js always the best choice than Create React App?
It really depends on the project, but Next.Js goes for large projects as it way more better.