Home

Why Next.js

Today we'll talk about Next.js a bit deeper. Why you should use it, how and where to start with it.

cover image

Intro

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

  1. What made Next.js successful
  2. 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

Basic Info

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.

image

Jobs

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.

image

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

image

The numbers show that React is dominant among other Web frameworks, and it will just keep on growing.

Task

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.

Next.js

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.

SSR

With SSR (Server Side Rendering) all JavaScript code will be processed on the server when the user opens the page, and the user will get HTML/CSS.

This means that there is no complex JavaScript code executing directly in the browser. It is instead executed on the server and content is served directly to the user. This improves load times greatly as it reduces the amount of code that is executed in the user's browser.

Before Next.js this logic was implemented in React manually, which was a pain. Next.js simply filled that gap and 'fixed the problem'.

SSG

With SSG (Static Site Generation) JavaScript code is processed on build time and static HTML pages are created.

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

Next.js Pros

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.

Examples

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.

Performance

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

  1. Implementing SSR
  2. Routing
  3. 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.

Routing

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

create-next-app helps you starting your Next.js project. It adds a simple project structure and you can choose whether to use npm or yarn. It has zero dependencies and creating projects with it is really fast.

By running 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.

Continuous improvement

Next.js has a big community of maintainers and contributors, about 136.860 developers somehow contributed to the Next.js GitHub repository.

Cons

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.

Methods

There are 5 methods in Next.js

  • getInitialProps
  • getServerSideProps
  • getStaticPaths
  • getStaticProps
  • reportWebVitals

While these can be tricky to learn they are really worth learning as they will improve productivity and documentation is awesome :)

Conclusion

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.