Instalación de NextJS 15
Aprende cómo instalar NextJS 15 y crear tu primer proyecto paso a paso.
Requisitos previos
Antes de comenzar, asegúrate de tener instalado:
Requisitos mínimos
- Node.js 18.17 o superior
- npm, yarn o pnpm como gestor de paquetes
- Un editor de código (recomendamos VS Code)
Verificar tu instalación de Node.js
Puedes verificar tu versión de Node.js ejecutando:
node --version
Si necesitas instalar o actualizar Node.js, descárgalo desde nodejs.org.
Instalación automática
La forma más rápida de crear un nuevo proyecto de NextJS es usando create-next-app
:
npx create-next-app@latest mi-proyecto
¿Qué hace create-next-app?
create-next-app
es la herramienta oficial de NextJS que configura automáticamente todo lo necesario para empezar, incluyendo TypeScript, ESLint, Tailwind CSS y más.
Proceso de instalación interactivo
Durante la instalación, se te harán varias preguntas:
¿Cómo quieres nombrar tu proyecto?
Escribe el nombre de tu proyecto (por ejemplo: mi-proyecto
)
¿Quieres usar TypeScript?
Recomendamos seleccionar Yes para mejor experiencia de desarrollo
¿Quieres usar ESLint?
Selecciona Yes para mantener código limpio y consistente
¿Quieres usar Tailwind CSS?
Selecciona Yes si planeas usar Tailwind para estilos
¿Quieres usar el directorio src/
?
Opcional. Selecciona No para una estructura más simple
¿Quieres usar App Router?
Selecciona Yes para usar las últimas features de NextJS 15
¿Quieres personalizar el import alias?
Selecciona No a menos que necesites un alias específico
¡Instalación completada!
Una vez que termine la instalación, tendrás un proyecto NextJS completamente funcional listo para desarrollar.
Estructura del proyecto
Después de la instalación, tu proyecto tendrá esta estructura:
mi-proyecto/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
├── public/
│ └── (archivos estáticos)
├── next.config.js
├── package.json
├── tsconfig.json
└── tailwind.config.js
Entendiendo la estructura
app/
: Contiene todas tus rutas y páginas (App Router)public/
: Archivos estáticos como imágenesnext.config.js
: Configuración de NextJS
Ejecutar el servidor de desarrollo
Una vez instalado, navega a tu proyecto e inicia el servidor:
cd mi-proyecto
npm run dev
Tu aplicación estará disponible en http://localhost:3000
¡Felicidades! 🎉 Ya tienes NextJS corriendo. Abre tu navegador y verás la página de bienvenida.
Próximos pasos
Ahora que tienes NextJS instalado, es momento de aprender:
- Estructura del proyecto - Entiende cómo está organizado todo
- Routing - Aprende a crear páginas y rutas
- Server Components - Descubre el poder del renderizado del servidor
Problemas comunes
Error: Node.js version not supported
Si ves este error, tu versión de Node.js es muy antigua. Actualiza a Node.js 18.17 o superior.
Puerto 3000 ya está en uso
Si el puerto 3000 ya está ocupado, puedes usar otro puerto:
PORT=3001 npm run dev
Problemas con permisos en Windows
Si tienes problemas de permisos al instalar, ejecuta tu terminal como administrador.