⚙️ Preparación del entorno y creación del proyecto

⚙️ Preparación del entorno y creación del proyecto

En esta primera lección aprenderás a preparar todo tu entorno de trabajo: instalar las herramientas necesarias, crear tu carpeta de proyecto y dejar todo listo para empezar con Next.js.

---

📌 Índice de esta entrada:

1. 💻 Requisitos previos
2. 🟢 Node.js — Qué es, cómo verificar e instalar
3. 📦 npm y Yarn — Qué son y cómo usarlos
4. 🖥️ Visual Studio Code — Instalación y uso básico
5. 📁 Crear la carpeta del proyecto
6. 🌐 Navegador web para pruebas

---

💻 Requisitos previos

Antes de crear nuestro primer proyecto con Next.js, debemos tener algunas herramientas instaladas en el sistema:

• Node.js (versión 18 o superior recomendada)
• npm o Yarn como gestores de paquetes
• Visual Studio Code (editor de código)
• Navegador moderno (Chrome, Firefox, Edge, etc.)

Vamos a ver una por una, explicando qué son, para qué sirven y cómo instalarlas correctamente.

🟢 Node.js

Node.js es un entorno que permite ejecutar código JavaScript fuera del navegador, es decir, directamente en tu computadora. Next.js se basa en Node.js, por lo que es el primer paso imprescindible.

🔍 Verificar si ya tienes Node.js

Abre el PowerShell (en Windows) o la terminal (en macOS/Linux) y escribe:

PS C:\> node -v
v22.15.0
    

Si aparece un número de versión, ¡ya tienes Node.js instalado! Si el sistema dice que el comando no se reconoce, debes instalarlo.

⬇️ Instalar Node.js

1. Ve al sitio oficial: https://nodejs.org/
2. Descarga la versión LTS (Long Term Support), recomendada para principiantes.
3. Ejecuta el instalador y sigue los pasos predeterminados.
4. En Windows, se instalará normalmente en C:\Program Files\nodejs.
5. Al finalizar, abre una nueva terminal y ejecuta otra vez node -v para confirmar que la instalación fue exitosa.

📦 npm y Yarn

npm (Node Package Manager) es una herramienta que viene junto con Node.js. Sirve para instalar librerías, frameworks y dependencias necesarias en tu proyecto.

Yarn es una alternativa creada por Facebook. Hace lo mismo que npm, pero con algunas diferencias internas. En este curso usaremos npm para mantenerlo simple.

Verificar npm

PS C:\> npm -v
11.6.2
    

Verificar Yarn

PS C:\> yarn -v
yarn : El término 'yarn' no se reconoce...
    

Si aparece un error como el anterior, significa que no tienes Yarn instalado. No es obligatorio, pero si deseas instalarlo, ejecuta:

// Instalar Yarn globalmente con npm
npm install --global yarn

// Verificar la instalación
yarn -v
    

🖥️ Visual Studio Code (VS Code)

Visual Studio Code (VS Code) es un editor de código gratuito, liviano y muy usado por los desarrolladores. Permite escribir código, abrir carpetas, gestionar extensiones y ejecutar comandos directamente desde su terminal integrada.

📥 Instalación

1. Descárgalo desde https://code.visualstudio.com/.
2. Ejecuta el instalador y acepta las opciones por defecto.
3. Una vez instalado, abre VS Code.

💡 Consejos iniciales

• Puedes abrir el terminal integrado desde el menú Ver → Terminal.
• Desde el menú Archivo → Abrir carpeta puedes cargar tu proyecto.

📁 Crear la carpeta del proyecto

Ahora que ya tenemos todo instalado, debemos crear una carpeta para alojar el proyecto. Esta carpeta será el punto de partida donde instalaremos y configuraremos Next.js.

1. Abre el explorador de archivos.
2. Crea una carpeta llamada Proyectos directamente en el disco C:\ (por ejemplo: C:\Proyectos).
3. Dentro de ella, crea otra carpeta llamada mi-blog.
4. Abre VS Code y selecciona Archivo → Abrir carpeta.
5. Busca y abre tu carpeta mi-blog.

🔹 A diferencia de herramientas como XAMPP, aquí no necesitamos una carpeta “htdocs”, ya que Next.js ejecuta su propio servidor interno.

🌐 Navegador web

Por último, asegúrate de tener un navegador moderno instalado (Google Chrome, Firefox o Edge). Lo utilizaremos para visualizar tu aplicación una vez que la pongamos en marcha.

---

💡 Consejo: No avances al siguiente paso hasta confirmar que tienes instalados Node.js, npm, VS Code y creada tu carpeta de proyecto mi-blog. Esto evitará errores más adelante.

← Volver al índice