What is Next.js and Why You Should Use It

Why use NextJS?

Next.js is a minimalistic framework for server-rendered React applications. The framework is pretty new, but it has already gained a lot of popularity because of how easy it is to set up. Next.js makes it incredibly easy for you to configure your React application and have it ready for production. In fact you can get started with this one simple command,

npm create-next-app ✨

What are The Benefits?

Once you're up and running there are a lot of benefits to Next.js. The most obvious benefit is how well it adds more structure to your application. Normally, when building React applications, you typically have to deal with a huge amount of JavaScript code spread across assets and utilities. With Next.js, you can compact this up into one file for your entire project. At the same time, you have a ton of configuration options that allow you to customize how your application behaves.

Next.js is published as open source and written entirely in ES6. That means you don’t need any transpiling or JavaScript optimization tricks to use the framework. Every part of Next.js is consistent with the ES6 specification, and it makes it extremely easy for you to use the framework. There are a lot more ES6 features that you can leverage, but for now, Next.js is a perfect place to start because it’s small, consistent, and powerful.

Components are reusable and composable elements within a JavaScript component hierarchy. Using components allows you to separate concerns and organize your code into logical pieces.

Here’s a great example: When we create a React component, we can set its props up in one place and pass them down to the children. It’s common for people to pass along props to children when creating a component, but there are times where we don’t want to do that. Some props can be important to the component’s behavior, but other props are used by React to determine how to render the component. For example, we’d pass down the text prop as the underlying DOM string to determine how our text child should be rendered. Next.js comes with a number of built-in components and provide you with a ton of configuration options to create specialized components.