Next.js

Next.js Trend

You've heard great things about this new web framework called Next.js, but you're still not sure why people are using it.

One way to understand why you should learn Next.js is to understand what problems it solves. This directly translates to why it's become so popular.

Why use a framework?

Let's say you're a new startup trying to launch a website. You might have some requirements like:

  • Splash page with information about the product
  • About page describing the team
  • Frequently asked questions
  • Capture leads through a contact form
  • Subscribe to a newsletter

There's nothing in these requirements which dictate the need for a framework. You could absolutely deliver on these requirements using vanilla HTML, CSS, and JavaScript.

However, if we have some foresight, we might know that future requirements call for a user authentication flow and the beginnings of a SaaS product.

The real value in using a framework is developer productivity, shared knowledge, code reuse, and creating a platform for the future. If we start with React/Next.js, we can satisfy the initial requirements with ease and pave the way for the next iteration of the product.

React

React has become the industry standard for building modern web applications. Of 90,000 developers surveyed by Stack Overflow, React was the most loved and most wanted web framework.

Why? With React, you can build anything from simple marketing splash pages to full-fledged web applications on the scale of Facebook. It's flexible and composable. Developers love this.

React.js Trend

This trend means that more developers than ever are learning React, and thus JavaScript as well. It's become one of the hottest skills recruiters are looking for. JavaScript is the #1 language used according to GitHub.

GitHub Octoberse

For companies, this means you're more likely to find employees who already know React. For developers, this makes a very advantageous skill to add to your skillset.

According to NPM trends, it's outpacing other web frameworks like Angular and Vue by ~5 million installs/day.

NPM Install Trend

This doesn't mean React is perfect. Since you're loading content client-side, you have to wait for the JavaScript bundle to load before you can determine what to show on the page. This can be problematic for users with slower connections.

Plus, search engines still struggle with indexing client-side JavaScript applications. If you're concerned about Search Engine Optimization (SEO) and want your content indexed faster, it's better to send the markup from the server. Enter Next.js.

Next.js

Next.js solves both of those problems using server-rendering or static-site generation. Next's framework allows you to build scalable, performant React code without the configuration hassle. That's why so many companies depend on Next for shipping production applications.

Companies using Next.js

  • 350k+ Next.js devs (30% of all React devs)
  • 60+ Alexa top 10k sites built using Next.js
  • Over 35,000 production sites
  • 300k weekly NPM downloads
  • Used by companies like Nike, Uber, Hulu, Twitch, and GitHub

Zero-Config Approach

To ship a performant React application, there are many things you must do right. You'll want to correctly configure Babel so you can use modern JavaScript features, but still support legacy browsers. You'll also want to bundle up all of your assets (e.g. multiple JavaScript files) to be included in your HTML file (using something like Webpack). The list goes on.

Wouldn't it be nice to not have to worry about this?

This "JavaScript fatigue" prompted the creation of Create React App (CRA), which dramatically improved the developer experience of spinning up a new React app. But can we do better?

  • Next.js supports IE10 and all modern browsers out of the box. Babel is configured for you, with an escape hatch to override if you need to.
  • CRA combines all the JavaScript files into a single bundle, whereas Next.js has support for code splitting out of the box. When I visit /route, we're only loading the JavaScript used on that page. Better performance!
  • Want to handle routing with CRA? That will require react-router (or a similar library). Next.js has file-system based routing out of the box. No extra installation!

Hybrid Approach

Next is unique among front-end and JAMstack frameworks because it seamlessly allows developers to grow from static sites to server-rendered sites as requirements change. No matter what data fetching strategy you need, you can stay within the bounds of the framework.

  • Static Sites – Blazing-fast JAMstack websites.
  • Server Side Rendering – Great for SEO and load performance.
  • Pre-Rendering – Best of both worlds. Blazing-fast website + scale traffic effortlessly.