¿Que es Next.js?

Hoy te voy a hablar de Next.js, porque deberías empezar a usarlo, sus principales ventajas además de como inicializar un proyecto.

¿Qué es Next.js?

Next.js es un framework de React que nos permite crear aplicaciones de React pre-renderizadas. Además de diferentes funciones como:

• Un sistema de enrutamiento intuitivo basado en páginas (con soporte para rutas dinámicas).

• Pre renderizado, tanto para la generación estática (SSG) y como para el renderizado del lado del servidor (SSR).

• División automática de código para cargas de página más rápidas.

• Enrutamiento del lado del cliente con prefetching optimizado.

• Compatibilidad con CSS y Sass incorporada, y compatibilidad con cualquier biblioteca CSS-in-JS

• Entorno de desarrollo con soporte de Fast Refresh

• Rutas de API para enpoints de API con funciones serverless.

Además de que Next.js es usado en decenas de miles de sitios y aplicaciones web en producción, incluidas muchas de las marcas más importantes del mundo. Por ejemplo Tiktok, Uber, Github, Netflix, Coinbase, Twitch.

¿Por qué deberías usar Next.js sobre React.js?

Next.js trabaja renderizando los componentes de tu aplicación en el lado del servidor en cambio React los renderiza en el navegador (lado del cliente).

Usar Next.js te provee de varias funciones como:

• Mejorar el desempeño de nuestra aplicación/sitio web en el lado del cliente. Esto es gracias a que el renderizado a sido hecho en el lado del servidor.

• Mejor Optimización de motores de búsqueda (SEO). Esto es porque una página HTML completamente renderizada llega al buscador, lo cual es más funcional y eficiente para los crawlers de los motores de búsqueda.

• Optimización de imágenes.

• Cero configuración.

• Y mucho más!

React.js por si solo no te provee de todas estas increíbles funciones. Pero esto no significa que no tengas que aprender o dejar de usar React.js es más debes de conocer React.js para poder iniciar de una manera más sencilla Next.js. Además de que Next.js está construido sobre React.js

Vamos a ver como comenzar a usar Next.js

Requisitos:

• Node.js 12.0 o versión posterior.

• MacOS, Windows (incluyendo WSL), y Linux son soportados.

Configuración

En el sitio oficial de Next.js se recomienda crear una nueva aplicación de Next.js usando el comando 'create-next-app', el cual configurara todo por ti automáticamente. Para crear un proyecto corre el siguiente comando en tu terminal:

npx create-next-app
# o
yarn create next-app

Si tienes planeado usar Typescript en tu proyecto debes de correr el siguiente comando:

npx create-next-app --typescript
# o
yarn create next-app --typescript

Y listo has creado rápidamente y fácilmente un proyecto de Next.js

Estructura de un proyecto de Next.js

• _app.js: Aquí es donde Next.js inicializa nuestra aplicación/página web. Es el componente base de nuestra aplicación/página web.

• /public: Aquí es donde debemos poner todos nuestros assets públicos. Por ejemplo imágenes, videos.

• /node_modules: Aquí se encuentran todas las dependencias de nuestro proyecto.

• /styles: Los estilos de nuestro proyecto.

• .gitignore: Se usa para excluir archivos y carpetas de que se envíen a tu repositorio de git remoto.

• README.md: Contiene información acerca de tu proyecto.

• package.json: Ayuda a mantener un seguimiento de las dependencias de tu proyecto.

• package-lock.json: Mantiene el control de las versiones exactas de cada dependencia o paquete de tu proyecto.

Conclusiones

En conclusión Next.js te ofrece la mejor experiencia de desarrollo con todas las funciones que necesitas para llevar una aplicación a producción: renderizado híbrido estático y de servidor, compatibilidad con TypeScript, empaquetado inteligente, pre-fetching en rutas y mucho más. Y sin necesidad de configuración.