Despliega tu primera app en Vercel gratis con Next.js e IA

Actúa como un experto desarrollador fullstack. Necesito que hagas todo lo siguiente por mí paso a paso y me vayas contando qué haces:

1. Verifica si tengo Node.js 18+ instalado (node --version). Si no lo tengo o es versión antigua, instálalo automáticamente según mi sistema operativo (macOS/Linux con brew/apt, Windows con winget/chocolatey).

2. Crea un nuevo proyecto Next.js 14 con App Router usando el comando oficial: npx create-next-app@latest mi-tienda-vercel --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*" --use-npm

3. Una vez creado, genera dentro de este proyecto el código completo para una tienda virtual básica con:
   - Página principal (/) con grid de 4 productos de ejemplo (usa imágenes de placeholder de placeholder.com o unsplash)
   - Carrito de compras funcional usando React Context o Zustand (agregar productos, eliminar, ver total)
   - Página de login (/login) con formulario visual simulado (sin backend real, solo validación frontend)
   - Navbar responsive con links a Home, Carrito (mostrando contador de items) y Login
   - Diseño moderno usando Tailwind CSS

4. Instala las dependencias necesarias (zustand o react para el estado, lucide-react para iconos si no viene incluido).

5. Inicializa un repositorio git en la carpeta, haz un commit inicial con mensaje "Initial commit: Tienda virtual Next.js".

6. Verifica que el proyecto compile sin errores ejecutando npm run build. Si hay errores, corrígelos tú.

7. Instala Vercel CLI globalmente (npm i -g vercel) y guíame para hacer login en Vercel desde la terminal.

8. Finalmente, ejecuta el despliegue a producción con vercel --prod y dame la URL final.

Ve contándome cada paso que completas. Si necesitas que instale algo manualmente, dame el comando exacto.

node --version

brew install node

winget install OpenJS.NodeJS

sudo apt update && sudo apt install nodejs npm

# macOS
brew install git

# Windows
descarga desde git-scm.com/download/win

# Linux (Ubuntu)
sudo apt install git

Eres un desarrollador experto en Next.js 14. Crea el código completo para una tienda virtual con estas especificaciones exactas:

REQUISITOS TÉCNICOS:
- Usa Next.js 14 con App Router (estructura app/)
- Usa TypeScript
- Usa Tailwind CSS para todos los estilos
- Usa React Server Components por defecto y 'use client' solo donde necesites interactividad

FUNCIONALIDADES:
1. Página principal (app/page.tsx): Grid de 4 productos de ejemplo (nombre, precio, imagen de placeholder.com/400x300, botón "Agregar al carrito")
2. Sistema de carrito usando Zustand (instala zustand):
   - Store global para items
   - Funciones: addItem, removeItem, clearCart
   - Cálculo de total
3. Componente Navbar (app/components/Navbar.tsx): 
   - Logo "MiTienda" 
   - Links: Inicio, Carrito (con badge mostrando cantidad de items)
   - Link a /login
   - Responsive con menú móvil
4. Página Login (app/login/page.tsx):
   - Formulario con email y password (solo visual, sin lógica de autenticación real)
   - Botón "Entrar" que muestre un alert("Login simulado")
5. Layout global (app/layout.tsx) con Navbar incluido

ENTREGA:
Proporciona el código completo archivo por archivo, indicando la ruta exacta de cada uno (ej: app/page.tsx). Usa iconos de lucide-react (instálalo si es necesario).

npx create-next-app@latest mi-tienda-vercel --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*" --use-npm

cd mi-tienda-vercel
npm install zustand lucide-react

# Dentro de la carpeta mi-tienda-vercel
git init
git add .
git commit -m "Initial commit: Tienda Next.js lista para Vercel"

# Crea un repo nuevo en github.com (botón verde '+ New repository')
# NO inicialices con README (ya lo tienes)
# Copia la URL que te da GitHub (ej: https://github.com/tuusuario/mi-tienda-vercel.git)

git branch -M main
git remote add origin https://github.com/TU-USUARIO/mi-tienda-vercel.git
git push -u origin main

# Instala globalmente
npm install -g vercel

# En la carpeta de tu proyecto (mi-tienda-vercel)
vercel

# Te pedirá login (abre navegador), luego pregunta:
# ? Set up and deploy? [Y/n] → Y
# ? Which scope? [Tu nombre] → Enter
# ? Link to existing project? [y/N] → N (es nuevo)
# ? What's your project name? [mi-tienda-vercel] → Enter

# Para producción final:
vercel --prod