¿Qué es Next.js? Un Vistazo al Popular Framework de JavaScript

Next.js se ha convertido en el framework de React para usar en producción, y ha quedado claro que con Next.js se pueden crear y desplegar rápidamente aplicaciones a gran escala y listas para usar en producción con Next.js.

Next.js viene con características que garantizan que tu aplicación pase de cero a producción en muy poco tiempo, a la vez que ofrece una curva de aprendizaje fácil, simplicidad y potentes herramientas a tu disposición.

Next.js amplía la biblioteca React original de Facebook y el paquete create-react-app para proporcionar un framework React extensible, fácil de usar y a prueba de producción.

Esta guía te enseñará Next.js, explorando por qué deberías usar Next.js y las diferentes aplicaciones que usan Next.js en producción. Además, discutiremos los elementos de Next.js, incluyendo sus características de Next.js. Por último, aprenderemos a crear nuestra primera aplicación Next.js.

¿Qué Es Next.js?

Next.js es un framework de React que te permite construir sitios web y aplicaciones web estáticas supercargadas, amigables con el SEO y extremadamente orientadas al usuario, utilizando el framework de React. Next.js es conocido por la mejor experiencia de los desarrolladores a la hora de construir aplicaciones listas para usar en producción con todas las características que necesitas.

Dispone de renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, precarga de rutas y mucho más, sin necesidad de configuración adicional.

Por Qué Usar Next.js

Esta sección explorará por qué deberías aprender Next.js. También veremos las diferentes aplicaciones que puedes construir con Next.js.

Optimizaciones de Imagen

Next.js proporciona optimizaciones de imagen automáticas con construcciones instantáneas. La optimización de imágenes es una potente función preintegrada en Next.js porque la gestión y optimización de imágenes requiere muchas configuraciones, y la optimización manual de imágenes puede suponer un peaje en tu tiempo productivo.

Internacionalización

Otra gran característica añadida a Next.js es la internacionalización. La creación de una aplicación empresarial puede ser fácilmente utilizada y traducida a diferentes idiomas en todo el mundo. Esta característica es una gran incorporación a Next.js y hace que Next.js sea reconocido internacionalmente porque se necesita menos configuración para conseguir la internalización.

Análisis de Next.js

Next.js proporciona un panel de control analítico que puede configurarse para mostrar datos precisos de los visitantes y perspectivas de la página desde el primer momento. Con esta función, puedes crear rápidamente un panel de control analítico y obtener información valiosa sobre tus visitantes e información de la página sin necesidad de programación o configuración adicional.

Configuración Cero

Next.js compila y construye automáticamente con la actualización en caliente sin ninguna configuración adicional por tu parte, y escala y optimiza automáticamente tu aplicación de producción.

Conseguir una actualización en caliente o automática en una aplicación frontend tradicional conlleva muchos obstáculos. Requiere elegir e instalar las bibliotecas adecuadas, y llevar a cabo las configuraciones para que cada biblioteca funcione correctamente. Next.js resuelve este problema proporcionando una actualización en caliente directamente desde el principio, sin necesidad de instalar ni configurar nada.

Soporte de SSR, SSG y CSR Preconstruido

Next.js, soporta el renderizado del lado del servidor, la generación estática y el renderizado del lado del cliente en una sola aplicación. Puedes decidir el tipo de aplicación que quieres construir y cómo pretendes compilar tu aplicación para que se adapte mejor a tu caso de uso.

El renderizado del lado del servidor hace que Next.js sea adecuado para aplicaciones a gran escala orientadas a producción, y su configuración es muy sencilla.

Aplicaciones que Utilizan Next.js

A continuación se muestra la lista de aplicaciones desarrolladas con Next.js. Ya que Next.js está respaldado por empresas de la lista Fortune 500, como GitHub, Uber y Netflix.

A continuación están las 5 principales aplicaciones construidas con Next.js.

TikTok

TikTok es una comunidad de vídeo social online en la que los usuarios suben vídeos móviles de corta duración con millones de usuarios diarios.

La página web de TikTok está desarrollada con Next.js para escalar y optimizada para millones de usuarios activos diarios.

Hashnode

Hashnode es una plataforma de blogs online gratuita dirigida a los desarrolladores, y está construida con Next.js. Hashnode registra millones de usuarios, lo que hace que Next.js sea adecuado para alimentar aplicaciones de pequeña a gran escala.

Twitch Mobile

Twitch es una plataforma social online para chatear, interactuar y disfrutar de diferentes tipos de contenido y entretenimiento. Next.js también la impulsa.

Hulu

Hulu es una plataforma de streaming similar a Netflix, que permite a los usuarios ver películas y programas de televisión online creados con Next.js.

Binance

Binance es un popular portal de criptodivisas con noticias, entradas de precios y la posibilidad de comprar y vender, que registra millones de usuarios activos y operaciones de criptografía a diario. Next.js también impulsa a Binance.

Para conocer más empresas y sitios web que utilizan Next.js, puedes visitar la página oficial de presentación de Next.js para obtener más información.

Lo Que Puedes Construir

En Next.js, no hay límite para el tipo de aplicaciones que puedes desarrollar. Puedes desarrollar diferentes tipos de aplicaciones utilizando Next.js. Además, cualquier aplicación que elijas crear con Next.js seguirá teniendo todas las ventajas y características de Next.js sin necesidad de configuraciones adicionales por tu parte.

A continuación se muestra la lista de tipos de aplicaciones que puedes crear con Next.js:

• MVP (Producto Mínimo Viable)
• Sitios web Jamstack
• Portales web
• Páginas web individuales
• Sitios web estáticos
• Productos SaaS
• Sitios web de comercio electrónico y de venta al por menor
• Paneles de control
• Aplicaciones web complejas y exigentes
• Interfaces de usuario interactivas

Características de Next.js

A continuación explicaremos las características de Next.js y lo que puedes ganar utilizando Next.js en tu proyecto.

Enrutamiento

El enrutamiento es una de las características esenciales de Next.js. Next.js utiliza el sistema de enrutamiento basado en archivos de las páginas para estructurar cómo será el enrutamiento de tu aplicación. Cada archivo y carpeta creada dentro de la carpeta pages se convierte automáticamente en ruta en Next.js.

El sistema de enrutamiento de Next.js se divide en 3 tipos diferentes, y a continuación exploraremos cada uno de ellos.

Enrutamiento de Índice

La carpeta pages tiene automáticamente index.js, que se convierte en la ruta de la página de inicio /. También puedes definir una página index.js para todas tus rutas en cualquier carpeta. Por ejemplo, puedes definir pages/profiles/index.js, que se asignará automáticamente a la página /profiles.

Mira este ejemplo, por ejemplo:

- pages
  - index.js
  - profile
    - index.js
    - [user].js

La estructura de páginas anterior mapeará las carpetas y archivos a una estructura de URL. Por ejemplo, / para las pages/index.js, /profile/  para las pages/profile/index.js, y /profile/user para las pages/profile/user.js, respectivamente.

Rutas Anidadas

Las rutas anidadas se crean dentro de una ruta padre. Para crear una ruta anidada, tienes que crear una ruta/carpeta padre dentro de la carpeta pages y añadir carpetas o archivos dentro para crear una ruta anidada.

Echa un vistazo a este ejemplo:

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

En el script anterior, los archivos user.js e index.js están anidados con la ruta padre del panel de control, lo que significa que sólo se puede acceder a las URLs con la ruta del panel de control.

Rutas Dinámicas

Se consigue mediante rutas dinámicas. Las rutas dinámicas son siempre indeterminadas. Pueden generarse mediante llamadas a la API o asignar un ID o slug a la URL.

Para crear una ruta dinámica en Next.js, añade un corchete [id].js alrededor del nombre del archivo o del directorio. Puedes nombrar el archivo o el directorio con cualquier nombre de tu elección, pero debes adjuntar un corchete [] para que sea dinámico.

Echa un vistazo a este ejemplo:

- pages
  - dashboard
    - [user].js
        - profile

El script anterior hace que el [usuario].js sea dinámico, lo que significa que se debe acceder a la página del perfil con /dashboard/2/profile o /dashboard/johndoe/profile.

En la documentación oficial, puedes aprender más y los diferentes trucos para crear un sistema de enrutamiento más avanzado en Next.js.

Servir Archivos Estáticos

En Next.js, el servicio de archivos estáticos o activos como iconos, fuentes autoalojadas o imágenes se realiza a través de la carpeta public, la única fuente de verdad para los activos estáticos.

La carpeta public no debe ser renombrada según los documentos de Next.js. Servir activos estáticos a través de la carpeta public es muy sencillo, según la configuración de Next.js.

Renderización Previa

Una de las enormes características de Next.js es el pre-renderizado, que hace que Next.js funcione muy bien y muy rápido. Next.js pre-renderiza cada página generando de antemano el HTML de cada página junto con el JavaScript mínimo que necesitan para ejecutarse a través de un proceso conocido como Hidratación.

Hay dos formas de pre-renderizado en Next.js:

1. Renderización del lado del servidor (SSR)
2. Generación estática (SG)

La diferencia crucial entre SG y SSR es cómo se obtienen los datos. En el caso de SG, los datos se obtienen en el momento de la construcción y se reutilizan en cada solicitud (lo que hace que sea más rápido porque se puede almacenar en caché), mientras que en SSR, los datos se obtienen en cada solicitud.

Importaciones absolutas

A partir de Next.js 9.4, se introdujeron las importaciones absolutas, lo que significa que ya no tienes que importar componentes con directorios relativamente largos.

Por ejemplo, no necesitas importar componentes como el que aparece a continuación:

import InputField from "../../../../../../components/general/forms/inputfield"

Sin embargo, se utiliza el siguiente estilo para importar componentes:

import InputField from "components/general/forms/inputfield";

Enlazar Páginas

Next.js proporciona el componente next/link para navegar entre páginas. La navegación entre páginas en tus aplicaciones puede hacerse con el componente Link exportado por el next/link.

Suponiendo que tenemos estas estructuras de páginas en tu carpeta pages y quieres enlazar las páginas entre sí, puedes conseguirlo utilizando el siguiente script:

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

Enlaza las páginas utilizando este script que aparece a continuación:

import Link from "next/link";

export default function Users({users) {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/profile">Profile</Link>
      <Link href="/settings">
        <a> Settings </a>
      </Link>
      <Link href="/users">
        <a> Settings </a>
      </Link>
      <Link href="/users/bob">
        <a> Settings </a>
      </Link>
    </div>
  )
}

Estilos

Next.js te permite el lujo de crear y tener muchos estilos según sea necesario en tu proyecto. Por defecto, Next.js viene con tres estilos diferentes desde el primer momento: CSS global, Módulos CSS y style-jsx.

Inconvenientes de Next.js

Como todo lo bueno, Next.js tiene sus desventajas, que debes considerar antes de utilizarlo en tu próximo proyecto. En esta sección, exploraremos los inconvenientes de Next.js.

Coste de Desarrollo y Mantenimiento

Con Next.js, la flexibilidad viene acompañada de altos costes de desarrollo y mantenimiento. Para hacer cambios y mantener la aplicación, necesitarás un desarrollador dedicado a Next.js y un experto en frontend que te costará más.

Falta de Gestor de Estados Integrado

Next.js no admite la gestión de estados de forma inmediata. Si necesitas algún tipo de gestión de estados, tendrás que instalarlo y utilizarlo como harías con React.

Pocos Plugins

Con Next.js, no tendrás acceso a muchos plugins fáciles de adaptar.

Cómo Crear una Aplicación Next.js

Esta sección explorará el uso práctico de Next.js y cómo crear una aplicación Next.js. Sin embargo, vamos a explorar algunos de los conceptos esenciales en el desarrollo de una aplicación Next.js.

Creación de una aplicación Next.js

Crear un nuevo proyecto Next.js es muy fácil y directo. Puedes crear un proyecto Next.js de diferentes maneras, pero la preferida y recomendada es la CLI.

Para crear una nueva aplicación Next.js con CLE, asegúrate de que tienes instalado npx (npx viene por defecto desde npm 5.2.0) o npm v6.1 o yarn.

A continuación, escribe el siguiente comando en la carpeta correcta en la que quieras colocar tu proyecto Next.js:

npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev

Asegúrate de sustituir <project-name> por el nombre real de tu proyecto. A continuación, puedes empezar a crear las diferentes páginas y componentes que requiere tu proyecto.

Elementos de Next.js

Al crear un nuevo proyecto de Next.js, te darás cuenta de que viene con diferentes elementos, páginas y estructuras de carpetas que pueden ser abrumadoras para los principiantes. Sin embargo, a continuación exploraremos algunos de los elementos de Next.js.

Estructura de Carpetas

Después de crear un nuevo proyecto de Next.js desde una CLI, verás una aplicación de Next.js con un árbol de carpetas reducido. Esta estructura de carpetas por defecto es la mínima para ejecutar una aplicación Next.js. Cuando empieces a construir tu proyecto, tendrás más carpetas y archivos que el framework inicialmente.

Las únicas carpetas específicas de Next.js son las carpetas pages, public y styles. Estas no deben ser renombradas a menos que estés preparado para ajustar configuraciones adicionales.

A continuación se muestra la estructura de carpetas por defecto para un nuevo proyecto Next.js:

# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Páginas

Las páginas son una de las carpetas específicas de Next, y a continuación hay algunas cosas que debes saber sobre las páginas de Next.js.

Las páginas son componentes React, y cada archivo de la carpeta pages es una página web, y cada página web es un componente React. Por ejemplo, tenemos un componente React dentro de la carpeta Pages, lo que da lugar a una URL de página web.

// Location: /pages/index.js
//  is just a basic React component
export default Index() {
  return <h1>Welcome to Home</h1>
}

Next.js viene con páginas personalizadas precreadas con guiones bajos, como _app .js y _document.js. Next.js utiliza el componente de página personalizada _app. js para inicializar las páginas. Reside dentro de la carpeta pages, mientras que el componente de página personalizada _document.js aumenta las etiquetas <html> y <body> de tu aplicación.

El framework también utiliza un sistema de enrutamiento basado en archivos de páginas, en el que cada página se convierte automáticamente en una ruta basada en su nombre de archivo. Por ejemplo, una página en pages/user se ubicará en /user, y pages/index.js en /.

Resumen

Deberíamos pensar en Next.js a la hora de crear aplicaciones empresariales y preparadas para la producción con React, ya que está diseñado para simplificar las molestias que conlleva la creación de aplicaciones de producción con sus características, herramientas y configuración.

En esta guía, hemos explorado las diferentes características de este framework y hemos identificado por qué deberías construir tus próximas aplicaciones listas para la empresa utilizando Next.js. Ahora ya sabes que, aunque nunca hayas probado Next.js, hay muchas razones para darle una oportunidad.

Haznos saber en la sección de comentarios qué vas a construir con estos nuevos superpoderes