As React became the most widely adopted web framework, encompassing over 40% of developers in 2021 according to Statista, Next.js adoption has also grown dramatically. Vercel, the company that maintains Next.js, cites over 6 million downloads since its launch and 50% usage growth in the top ten-thousand websites for the period of October 2020 to June 2021 alone.
1. Routing Pages
In Next.js, all the page files in the Pages folder will also be the routing of the actual page on the website. It means that you don’t need to set up a different routing file for each page. It will shorten the time for writing our code, so our work will be done efficiently.
2. Built-in CSS Support
In Next.js, you can import CSS from the JavaScript file because Next.js has powerful built-in CSS support. By default, Next.js uses <style.jsx> tag so the CSS script inside the tag can be separated from a specific page so you don’t need to re-write the CSS Script for the page.
3. Layout Component
Next.js will allow us to refactor the page constructor into a group component, so we can reuse our component on the other page easily. For example, we can re-use the same header component on all of the website pages without re-writing the header script on every page.
4. Image Optimization
Next.js provides us with the next/image component, which is the enchanted version of the HTML <img> component. This component will resize the image based on the browser configuration so the image will be responsive in every device.
5. Font Optimization
By default, Next.js will set up inline font CSS automatically on the build stage so it will accelerate the process of declarationSpl font. Which will make the font load process done efficiently on a page.
Example: You have three scripts to analyze content, advertise management, and social media widgets. You can set the analyzed content to be prioritized by placing it at the top line of the script. This will accelerate the website loading and prevent an un-displayed content on a page
6. Static File Serving
Next.js will provide us with a static file on the Public folder. It will help us to call and use the static files for a specific page.
Example: For the image file, you can call and adjust the image size on every page that we want. So we don’t need to save the same image in different sizes for our project.
7. Fast Refresh
Fast Refresh is the Next.js feature that will refresh the page directly right after the script is updated. It will help us as developers, so we didn’t need to refresh the page manually after updating the script.
Next.js Advantages
With all the features that it had, Next.js has a lot of advantages that can’t be underrated such as:
1. SEO Friendly
On Next.js, HTML is already generated when the browser is loading the website page. This will help Google to crawl the website content in HTML format. This will help the indexing process of a search engine and result in a good website rank in the search engine. If it is easier to be found in the search engine, it will increase the traffic potential of the website. That’s the reason why Next.js is an SEO-friendly framework.
2. Easy to Setup a Project
Setting up a project in next.js is very easy even for the beginner. We just need to install the Node.js environment and run some script, we don’t need to prepare for another plugin or library. It can be done on every platform such as MAC, Windows, and Linux.
3. Good Performance
Next.js has a good performance thanks to its code splitting and client-side navigation. With Code Splitting, Next.js can do the JavaScript rendering specifically on the page that will load on the browser, not load it all at once. It will make the page load time become more efficient. With Client-Side-Navigation, we can use the Link component to navigate between pages like Single-Page Application. It means that it has a very short time to navigate between pages.
4. Deploy Projects Easily
The deployment process of the Next.js project becomes very easy thanks to the integration with Vercel, a cloud-based framework with first-class support for Next.js.