Why You Should Use Next.js As the Default Framework in React Apps

Discover what Next.js can bring to your web development

Photo by Ahmad Odeh / Unsplash

React is a great JavaScript library. It has a great component system, and it offers you a way to create Single Page Applications easily.

As the React developers mentioned on their official website, React is a library. That means it will offer you part of the features you need to create a web application, but you’ll probably need more tools on top of it. For instance, if you create an application that requires routing, you’ll have to install react-router (or a similar library) and configure it.

If you’re not using a starting template such as create-react-app, for example, you’ll also have to do some heavy configuration using webpack and babel. You’ll then have to set up a development configuration and a production one. This takes time and effort. It’s no fun if you have to do it every single time you start a project!

Next.js solves most of those issues. It is a framework built on top of React. It provides the out-of-the-box features you’ll need in a web application.

We’ll go through it in a moment, but in summary, Next.js includes routing, optimizations for production, server-side rendering, static site generation, and more! Let’s discover those features!

Routing

Next.js offers you a routing system out of the box. That means you won’t have to deal with extra libraries to handle this topic.

Next.js offers a smart way to define your routing system. You won’t have to declare your routes in a JavaScript file as you’d do with react-router, for example. You’ll describe your routes using the file system.

You’ll also have access from the beginning to a client-side routing. Instead of using standard <a> HTML tag to navigate within your application, Next.js provides a component called <Link/>. Not only does it enable client-side navigation, but it also allows the browser to prefetch the data needed on the pages the user might navigate to!

Prefetching

The framework will download all the resources necessary for each link that is within the user’s viewport. For instance…