Configuración del Entorno

En esta lección empezamos a desarrollar una plataforma de cursos online LMS, desde lo mas básico, el cual ira avanzando en forma progresiva poco a poco, esperamos que aprendas este maravilloso framework Next.js 16 y las otras herramientas que lo veremos en este curso.

Bienvenido a tu primer día como desarrollador Full Stack. Antes de escribir una sola línea de código para nuestra plataforma LMS (Euflo Academy), necesitamos preparar nuestro «taller».

Imagina que quieres construir una casa. No puedes empezar a colocar ladrillos si no tienes martillo, nivel y cemento. En el desarrollo web ocurre lo mismo: necesitamos instalar el software que nos permitirá dar vida a Next.js 16, a continuación las indicamos.

1.1. El Motor: Node.js (Versión LTS)

¿Qué es?
Node.js es el entorno que permite ejecutar JavaScript fuera del navegador. Es el motor que impulsará todo nuestro proyecto. Sin él, Next.js 16 no funciona.

Instrucciones:

1. Ve al sitio oficial: nodejs.org.
2. Descarga la versión LTS (Long Term Support). Es la versión estable y recomendada para producción.
3. Instálalo con las opciones por defecto (Next, Next, Install), es fácil de instalar, si tienes dudas consulta, nosotros te guiamos.

Verificación (CRÍTICO):
Una vez instalado, abriremos nuestra primera terminal (Símbolo del sistema o PowerShell en Windows, Terminal en Mac) y comprobaremos la versión. Next.js 16 requiere una versión moderna.

# Abre tu terminal y escribe:
node -v

# Deberías ver una respuesta similar a esta (debe ser v20 o superior):
v22.21.1

1.2. La Máquina del Tiempo: Git y GitHub

¿Qué son?

• Git: Es un sistema de control de versiones. Nos permite guardar «puntos de control» (commits) de nuestro código. Si cometemos un error fatal, podemos volver atrás en el tiempo.
• GitHub: Es la nube donde guardaremos esos puntos de control. Es tu portafolio profesional ante el mundo.

Paso A: Instalación
Descarga e instala Git desde git-scm.com. Durante la instalación, puedes dejar todas las opciones por defecto.

Paso B: Configuración de Identidad
Git necesita saber quién eres para firmar tu trabajo. Ejecuta estos comandos en tu terminal (reemplaza los datos con los tuyos reales), si te pide a veces las omite o ya los tienes registrado, de todas maneras abajo tienes como hacerlas.

# Configura tu nombre de usuario
git config --global user.name "Tu Nombre Completo"

# Configura tu correo electrónico (el mismo que usarás en GitHub)
git config --global user.email "tu_email@ejemplo.com"

Paso C: Cuenta en GitHub
Si aún no la tienes, crea una cuenta gratuita en github.com. Recuerda tu contraseña, la necesitaremos pronto.

1.3. El Editor: VS Code

¿Qué es?
Visual Studio Code (VS Code) es el editor de código más popular del mundo. Es ligero, potente y es donde pasaremos el 90% de nuestro tiempo, es gratuito, facil de usar y si quieres lo puedes tener en español.

Descárgalo e instálalo desde: code.visualstudio.com.

Las Extensiones Obligatorias

VS Code por sí solo es bueno, pero con extensiones es invencible. Vamos a instalar las herramientas específicas para nuestro stack (Next.js 16 + Tailwind 4). Abre VS Code, ve al ícono de «cuadraditos» en la barra lateral izquierda (Extensions) y busca e instala estas 5 extensiones, es fácil de hacerlo, necesariamente debes instalar por su importancia.

• 1. ES7+ React/Redux/React-Native snippets
  Nos permite escribir código repetitivo de React con atajos rápidos.
• 2. Tailwind CSS IntelliSense
  ¡Vital! Nos da autocompletado de las clases de diseño. Sin esto, trabajar con Tailwind es adivinar a ciegas.
• 3. Prettier – Code formatter
  Ordena tu código automáticamente cada vez que guardas. Mantiene todo limpio y legible.
• 4. Prisma
  Nos ayudará a visualizar y colorear la sintaxis de nuestra base de datos más adelante.
• 5. Material Icon Theme
  Cambia los íconos de los archivos para que sean más fáciles de identificar visualmente.

🎉 ¡Hito completado!
Ya tienes el entorno configurado. En la siguiente lección, usaremos la terminal para crear nuestro proyecto «Euflo Academy» desde cero utilizando el comando exacto para Next.js 16.

Su comentario nos ayuda: Le insinuamos comentar acerca de la lección 1, si entendiste o ha sido muy técnico y difícil de entender, con tu ayuda la siguiente lección la mejoramos.

Continuamos con la siguiente lección Numero 2