What is Next.js and Why You Should Use It

Qué es Next.js y por qué deberías usarlo.

El ecosistema de JavaScript está lleno de frameworks, librerías y herramientas que nos facilitan la vida cuando llegue la hora de empezar un proyecto. Pero también puede ser difícil entender cuál es la mejor opción. En este artículo, te voy a dar mi opinión sobre por qué NextJS puede ser la opción correcta para tu próximo proyecto React.

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 ✨ Easy!

¿Por qué usar NextJS?

Next.js es un framework minimalista para aplicaciones React renderizadas al backend. El framework es bastante nuevo, pero ya ha ganado mucha popularidad por lo fácil que es de configurar y modificar lo que ofrece. Next.js hace que sea increíblemente fácil para que configures tu aplicación React y que esté lista para producción. De hecho, puedes empezar usando el framework escribiendo el siguiente ejemplo en tu terminal: npm create-next-app ✨ ¡Fácil!

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.

¿Cuáles son los beneficios?

Una vez que estás en marcha hay un montón de beneficios de Next.js. El beneficio más obvio es lo bien que agrega mucho más estructura a tu aplicación. Normalmente, cuando se construyen aplicaciones React, se suele tener que lidiar con una enorme cantidad de código JavaScript repartido entre assets y utilidades. Con Next.js, puedes condensar esto en un solo archivo para todo tu proyecto. Al mismo tiempo, tienes un montón de opciones de configuración que te permiten personalizar el comportamiento de tu proyecto.

Next.js está disponible como código abierto y está escrito completamente en ES6. Eso significa que no necesitas ningún truco de transpilación u optimización de JavaScript para utilizar el framework. Cada parte de Next.js es compatible con la especificación ES6, y esto hace que sea extremadamente fácil para que uses el marco ya como viene. Hay muchas más características de ES6 que puedes aprovechar, pero por ahora, Next.js es un lugar perfecto para empezar porque es ligero, consistente y poderoso.

Los componentes son elementos reutilizables y componibles dentro de una jerarquía de componentes de JavaScript. El uso de componentes le permite separar las tareas y organizar tu código en piezas lógicas.

He aquí un gran ejemplo:

Cuando creamos un componente React, podemos establecer sus accesorios en un sitio y pasarlos a los hijos (children). Es común que la gente pase los props a los hijos cuando se crea un componente, pero hay veces que no queremos hacer eso. Algunos props pueden ser importantes para el comportamiento del componente, pero otros props son utilizados por React para determinar cómo renderizar el componente. Por ejemplo, pasaríamos la prop de texto como la cadena DOM string para determinar cómo se debe renderizar nuestro (child) de texto. Next.js viene con un número de componentes incorporados y te proporciona un montón de opciones de configuración para crear componentes especializados.