El Cuestionario de Instalación (Lección 3)

Continuamos inmediatamente donde nos quedamos. Tras ejecutar el comando maestro, la terminal no actúa sola; necesita que tú definas la arquitectura del proyecto. En este punto, muchos desarrolladores novatos presionan «Enter» a todo por defecto. Nosotros no.

Vamos a configurar una arquitectura escalable, segura y moderna. Sigue estas respuestas con precisión quirúrgica para evitar reestructuraciones dolorosas en el futuro.

1. La Interacción en Terminal

En esta parte debes tener mucho cuidado en tus respuestas, Responde exactamente como se indica abajo usando las flechas del teclado y la tecla ENTER:

# Terminal 
Configuración Interactiva ✔ Would you like to use the recommended Next.js defaults? … No ✔ Would you like to use TypeScript? … Yes ✔ Which linter would you like to use? … ESLint ✔ Would you like to use React Compiler? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like your code inside a src/ directory? … Yes ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to use Turbopack for next dev? … Yes ✔ Would you like to customize the import alias (@/* by default)? … No

2. Análisis de Decisiones Clave

¿Por qué hemos elegido estas opciones? Entender el «porqué» te separa de ser un simple copiador de código:

• Defaults (No): Rechazamos la configuración predeterminada para tener control total sobre herramientas como el compilador y la estructura de carpetas.
• TypeScript (Yes): Obligatorio para desarrollo profesional. Nos evitará errores de tipo antes de que ocurran.
• React Compiler (Yes): Una de las joyas de Next.js 16. Optimiza automáticamente el renderizado de React, eliminando la necesidad de hooks manuales como useMemo en muchos casos.
• Src Directory (Yes): Mantiene la raíz del proyecto limpia. Todo tu código vivirá en src/, separándolo de los archivos de configuración (package.json, .env).
• Turbopack (Yes): El sucesor de Webpack, escrito en Rust. Hará que tus tiempos de carga en desarrollo sean instantáneos.
• Import Alias (No): Al decir «No», Next.js configura automáticamente el alias @/ para apuntar a la raíz de src. Esto nos permite importar componentes así: import Button from "@/components/ui/button" en lugar de ../../components/button".

Una vez completado el cuestionario, verás cómo npx comienza a instalar las dependencias. Espera a que termine y aparezca el mensaje de Success.

En la siguiente lección, entraremos al código para hacer una «limpieza profunda» y dejar el proyecto listo para construir.