Sebastian Gomez

Feb 22, 2022

Introducción a Next.js

🌟 Introducción a Next.js: Domina el mundo de React 🌟

🤔 ¿Qué es Next.js?

Antes de hablar de Next.js, hablemos sobre React. React es una librería encargada de la parte de la vista de nuestras aplicaciones, pero no es suficiente para construir rápidamente una aplicación completa 😰. Necesitas un enrutador, un sistema de compilado, estilizar tus componentes y preocuparte por la velocidad y el rendimiento de tu sitio, entre muchas otras cosas.

🚀 Next.js es un framework full-stack creado por el equipo de Vercel, que utiliza React como su librería de vista. Si ya conoces React, aprender Next.js será muy familiar para ti. Next.js ya viene con decisiones tomadas y un conjunto de librerías definidas, lo que lo convierte en un framework "opinionado". En teoría, este es el toque secreto basado en la experiencia del equipo de Vercel al construir aplicaciones en producción con React.

Características de Next.js ✅

Algunas características que vienen listas al usar Next.js:

1. Sistema de desarrollo en el entorno de "producción" y "desarrollo"
2. Prerenderizado con tres estrategias: Server Side Rendering (SSR), Build time y Static
3. Routing
4. Rutas para tu API

🤷‍♀️ ¿Qué pasa entonces con "Create React App"?

"Create React App" (CRA) es la herramienta que muchos desarrolladores usan para crear aplicaciones con React, pero a diferencia de Next.js, le faltan cosas como routing, SSR y facilidad de construcción de tu API.

Y... ¿Gatsby? 🌐

Gatsby es similar a Next.js pero no es un framework full-stack, así que no puedes hacer cosas del lado del backend como crear tu API Rest o server-side rendering. Aunque sí tiene características increíbles como soporte a GraphQL, optimización de imágenes y otras cosas que Next.js no tiene.

🧭 ¿Cuándo usar Next.js?

Aquí tienes una guía general para elegir la herramienta adecuada:

• ¿Necesitas construir una Single Page Application (SPA)? 👉 Usa Create React App (CRA)
• ¿Necesitas construir un sitio web estático como un blog que sea también una SPA? 👉 Usa Next.js o Gatsby
• ¿Necesitas usar SSR, tener una API y una SPA? 👉 Usa Next.js

💡 Conclusiones

1. Next.js es un framework full-stack basado en React, perfecto para construir aplicaciones completas.
2. Viene con características listas como SSR, routing y rutas para tu API.
3. Es ideal para proyectos que requieran SSR, API y SPA.

🏋️‍♂️ Ejercicios para practicar

1. Crea una SPA usando Create React App y compara el proceso con Next.js.
2. Construye un blog estático usando Next.js o Gatsby, y compara sus características.
3. Implementa SSR y crea rutas para una API en un proyecto Next.js.

📚 Resumen en 3 puntos

1. Next.js es un framework full-stack completo basado en React.
2. Viene con decisiones tomadas y librerías definidas, lo que facilita su uso.
3. Es una excelente opción para proyectos que requieranSSR, API y SPA.

Espero que este post te haya sido de utilidad y te ayude a aplicarlo en algún proyecto que tengas en mente o simplemente a entender la naturaleza de Next.js. 🌟

Te dejo el enlace al siguiente post sobre Next.js: Comenzando con Next.js

¡Déjame un comentario si te sirvió o si quieres añadir alguna opinión o si tienes alguna duda! No dudes en dejarme un comentario en la parte de abajo. Recuerda que si te gustó, también puedes compartir usando los links a las redes sociales en la parte de abajo. 🚀