Today we'll talk about Next.js a bit deeper. Why you should use it, how and where to start with it.
Next.js is a fast-growing framework that is currently used by 137,305 projects source
Here you can find their showcase a large number of sites that are using Next.js.
In this post, we'll talk about
- What made Next.js successful
- Pros and cons of using it
What made Next.js successful
To answer this question we first need to say few things about React.
React is a really popular framework. As of this writing, Next.js has 9,169,692 weekly installs. It also has a dependency on 4,782,040 GitHub repositories
If we look at All-Time data on npmtrends.com chart for installs, we can see that React has a huge lead.
The popularity of a framework can also be measured in the number of available jobs.
If you type 'React' into Google you will get about 878,000,000 results, and if you type 'React jobs' you will get about 313,000,000 results. Just by seeing this info, we can say that React is pretty popular.
If you open up Linkedin and type 'React' in the search box, you will get about 52,702 jobs available in the US only.
Besides Linkedin, you can open up a few other job boards and the results are pretty similar.
These numbers show that there is a demand to React in the industry.
But numbers are futile if people (developers) are not satisfied with the framework and don't want to use it.
According to StackOverflow 2020 Survey React is ranked high on the list.
By looking at 2019.stateofjs.com graph we can see that React is loved among developers and they would gladly use it again
The numbers show that React is dominant among other Web frameworks, and it will just keep on growing.
Let's say that we have a simple project, a website for Travel Agency. It should have a few pages with text, images, and offers to show to visitors.
We will then use create-react-app to start creating our application. We finish our product, launch it and it had success on Product Hunt. We then want to start working on marketing. But how do we do that?
Problem is that Lighthouse Score is really bad. Google has no idea what our website is about since we are not providing extra content that it can read. If we fix those our SEO will improve and Google will crawl us better and give us more traffic.
Now we have the next goal. Improve SEO and make our website appear on Google.
This is where Next.js comes into play. It dramatically improves the Lighthouse score just with an out-of-the-box configuration.
Next.js can improve SEO and WebSite speed with few strategies that you can choose from.
Before Next.js this logic was implemented in React manually, which was a pain. Next.js simply filled that gap and 'fixed the problem'.
This means that instead of data being processed when the user enters the page, it will be processed during build time.
The problem with this was that all data had to be present during build time, and changing some data meant building the project again.
But Next.js team managed to fix this problem by creating something that's called Incremental Static Regeneration
Incremental Static Regeneration
This method will update website content on runtime. YES! RUNTIME!
This means that if you have headless CMS, updating your content doesn't mean that you have to rebuild your website again to have a static website. Next.js will update existing pages by re-rendering them in the background as traffic comes in.
If re-rendering fails for some reason your page won't go offline, but instead, the user will be served the latest working page.
Load on backend and database is low. Pages are re-computed at most once concurrently. You also have options for how often you want to check if the page was updated.
You can also create new pages with this method and there is no need to rebuild your project.
You can read more about all these methods here
Let's talk about things that make Next.js such a great framework.
Listening to community
Next.js team listens to their community. And not just GitHub, but Twitter too. You will often see links to Twitter posts in Pull Requests, which means they are active on all fronts.
If you have a problem with Next.js you can just Tweet @ them and you will get a detailed reply and steps for troubleshooting.
They already published a few interesting and great RFCs for some of the biggest issues. My favorite one is Image Component for Next.js, which can be found here.
In their GitHub repositories, there are about 250 detailed examples of how to use Next.js. They can be found here
That repository is a place where I always go back when I am not sure how to use something.
A static website means a fast website. This is where all beauty of Next.js comes into play. After they added Incremental Static Regeneration, Next.js become an incredible framework for speed and SEO.
Good developer experience
Next.js saves us time when building a website. It saves us from implementing some things and wasting time on problems like
- Implementing SSR
- Splitting JS bundle
All of these are already implemented in the best way and we don't need to bash our head on how to do it.
Some might say that this is a bad thing but I personally think that is it really great thing, especially for newcomers.
Next.js routing is file-based routing.
It has a project structure that needs to be respected for it to work, and honestly, I do like that structure a lot.
File-based routing is so easy to understand since your project structure is a representation of how your app will work.
create-next-app helps you starting your Next.js project. It adds a simple project structure and you can choose whether to use
It has zero dependencies and creating projects with it is really fast.
create-next-app, without arguments, launches an interactive prompt that guides you through setting up a project
Another great thing is that supports all examples from the official GitHub repository and you can easily create them without needing to clone the repository.
It also detects if you are offline and creates a project using the local package cache.
Next.js has a big community of maintainers and contributors, about 136.860 developers somehow contributed to the Next.js GitHub repository.
Next.js cons are opinionated, and I don't see any big problems with it. It made creating websites a breeze and I don't have to care a lot about Lighthouse score like with React.
Some dislike file-based routing
Not supporting React Router out of the box was really strange in the beginning.
Instead, Next.js has its own Next Router. Since Next.js was created on top of React, some developers thought it would support React Router out of the box.
There are 5 methods in Next.js
While these can be tricky to learn they are really worth learning as they will improve productivity and documentation is awesome :)
Next.js is an excellent framework for React developers to performant and SEO-friendly WebSites. It is pretty easy to transition from React to Next.js. It solves some common and annoying problems in really beautiful and elegant ways.