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:

1

¿Cómo quieres nombrar tu proyecto?

Escribe el nombre de tu proyecto (por ejemplo: mi-proyecto)

2

¿Quieres usar TypeScript?

Recomendamos seleccionar Yes para mejor experiencia de desarrollo

3

¿Quieres usar ESLint?

Selecciona Yes para mantener código limpio y consistente

4

¿Quieres usar Tailwind CSS?

Selecciona Yes si planeas usar Tailwind para estilos

5

¿Quieres usar el directorio src/?

Opcional. Selecciona No para una estructura más simple

6

¿Quieres usar App Router?

Selecciona Yes para usar las últimas features de NextJS 15

7

¿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ágenes
  • next.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:

  1. Estructura del proyecto - Entiende cómo está organizado todo
  2. Routing - Aprende a crear páginas y rutas
  3. 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.