Tener un entorno de desarrollo listo para trabajar con Next.js es el primer paso para construir aplicaciones modernas con este framework. A continuación se explica paso a paso cómo verificar los requisitos, instalar el CLI y levantar tu primer proyecto funcional.
¿Qué necesitas antes de instalar Next.js?
El único requisito previo es contar con Node.js en una versión estable. Puedes comprobarlo rápidamente abriendo tu terminal y ejecutando:
bash
node --version
Si obtienes un número de versión (por ejemplo, v14.x), significa que Node está correctamente instalado [0:18]. En caso contrario, descarga la versión LTS desde el sitio oficial de Node.
¿Cómo se instala el CLI de Next.js?
El CLI (Command Line Interface) es el cliente de comandos que permite crear y gestionar proyectos Next.js. Para instalarlo de forma global en tu máquina, ejecuta [0:28]:
bash
npm install -g @nextjs/cli
- La bandera
-g indica que el paquete se instala de manera global, disponible desde cualquier directorio.
- Si trabajas en un sistema Unix (Mac, Linux o Windows con WSL), es probable que necesites anteponer
sudo para obtener permisos de administrador [2:12].
bash
sudo npm install -g @nextjs/cli
Una vez completada la instalación, verifica que todo quedó bien con:
bash
next --version
También puedes explorar los comandos disponibles con next --help [2:50].
¿Por qué usar Windows Subsystem for Linux?
Durante la demostración se utiliza una terminal basada en Unix gracias a Windows Subsystem for Linux (WSL) [1:28]. Esta herramienta permite ejecutar comandos de Linux dentro de Windows, lo que garantiza una experiencia homogénea sin importar el sistema operativo. Si usas Windows, se recomienda configurar WSL siguiendo un curso de prework antes de continuar.
¿Qué extensiones de VSCode complementan a Next.js?
Como framework, Next.js promueve buenas prácticas de código. Para aprovecharlas al máximo, se recomienda instalar tres extensiones en Visual Studio Code [0:55]:
- ESLint: analiza el código en busca de errores y patrones problemáticos.
- Prettier: formatea automáticamente el código para mantener un estilo consistente.
- EditorConfig: permite compartir una configuración de formato entre distintos editores, asegurando un estándar uniforme en el equipo.
Estas herramientas trabajan juntas para que el código sea más mantenible y siga convenciones claras.
¿Cómo crear y ejecutar tu primer proyecto Next.js?
Con el CLI instalado, crear un nuevo proyecto es tan sencillo como escribir [3:12]:
bash
next new PlatziStore
En este caso el proyecto se llama PlatziStore, una tienda virtual (o su API) que se irá construyendo a lo largo del curso. Durante la creación, Next.js preguntará cuál package manager prefieres utilizar [3:30]:
- npm: el gestor de paquetes más común.
- yarn: una alternativa popular.
Cualquiera de los dos funciona correctamente. Tras elegir, el CLI descarga e instala todas las dependencias necesarias.
¿Cómo arrancar el servidor de desarrollo?
Una vez creado el proyecto, entra a la carpeta generada y levanta la aplicación [3:55]:
bash
cd platzistore
npm run start
La consola mostrará mensajes confirmando que todo inició correctamente. Abre tu navegador y visita:
http://localhost:3000
Verás un Hello World confirmando que la aplicación está corriendo [4:22]. El puerto 3000 es el puerto por defecto que Next.js asigna al servidor de desarrollo.
Con estos pasos ya tienes un proyecto funcional listo para explorar. En la siguiente sesión se revisará la estructura de archivos y carpetas que Next.js generó automáticamente. Si tuviste algún inconveniente durante la instalación, comparte tu experiencia en los comentarios para resolverlo juntos.