⚡ Creación del proyecto Next.js

⚡ Creación del proyecto Next.js

En esta lección aprenderás a crear tu primer proyecto con Next.js paso a paso. Usaremos la herramienta oficial create-next-app para generar toda la estructura inicial del proyecto.

---

📌 Índice de esta entrada:

1. 🚀 Crear el proyecto con npx create-next-app
2. ⚙️ Opciones de configuración
3. 📂 Estructura de carpetas generada
4. ▶️ Ejecutar el proyecto por primera vez
5. 🧭 Acceder desde el navegador

---

🚀 Crear el proyecto con npx create-next-app

Ahora que ya tienes instalado Node.js y configurado tu entorno, podemos crear nuestro primer proyecto Next.js. Para ello utilizaremos create-next-app, una herramienta oficial que genera automáticamente todos los archivos necesarios.

📍 Paso 1: Abrir la terminal en la carpeta del proyecto

Abre Visual Studio Code y asegúrate de que tienes abierta la carpeta mi-blog que creamos anteriormente. Luego abre la terminal integrada desde el menú:

Ver → Terminal

Deberías ver algo así:

PS C:\Proyectos\mi-blog>
    

📍 Paso 2: Ejecutar el comando

Escribe el siguiente comando en la terminal y presiona Enter:

npx create-next-app@latest .
    

El punto . al final indica que queremos crear el proyecto en la carpeta actual. Si prefieres crear una carpeta nueva automáticamente, puedes usar:

npx create-next-app@latest mi-blog
    

En este caso, se generará una nueva carpeta llamada mi-blog.

⚙️ Opciones de configuración

Durante la instalación, aparecerá un asistente interactivo en la terminal. Te preguntará si deseas usar las configuraciones recomendadas:

? Would you like to use the recommended Next.js defaults? 
> Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
  No, customize settings
    

Selecciona Yes, use recommended defaults y presiona Enter. Esto configurará automáticamente:

• TypeScript — añade tipado al proyecto (opcional, pero recomendable).
• ESLint — herramienta para mantener un código limpio.
• Tailwind CSS — sistema de estilos moderno y flexible.
• App Router — la estructura más reciente de enrutamiento en Next.js.
• Turbopack — un nuevo empaquetador rápido que reemplaza a Webpack en muchos casos.

Una vez completado el proceso, verás algo como esto:

Success! Created mi-blog at C:\Proyectos\mi-blog

To run your project:
  cd mi-blog
  npm run dev
    

📂 Estructura de carpetas generada

Next.js crea automáticamente una estructura básica para que empieces a trabajar. Dentro de la carpeta del proyecto encontrarás algo como esto:

mi-blog/
│
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   └── globals.css
│
├── public/
│   └── favicon.ico
│
├── package.json
├── tsconfig.json
├── next.config.mjs
└── README.md
    

🔹 app/: contiene las páginas y la estructura principal del sitio.
🔹 public/: guarda archivos públicos como imágenes o íconos.
🔹 package.json: lista las dependencias del proyecto.
🔹 tsconfig.json: configuración de TypeScript.
🔹 next.config.mjs: ajustes globales del framework.

▶️ Ejecutar el proyecto por primera vez

Una vez creada la aplicación, abre la carpeta en VS Code (si aún no lo has hecho) y ejecuta el siguiente comando para arrancar el servidor de desarrollo:

npm run dev
    

Esto iniciará el servidor local en el puerto 3000 por defecto.

Local: http://localhost:3000
    

🧭 Acceder desde el navegador

Abre tu navegador y escribe la siguiente dirección:

http://localhost:3000
    

Si todo está correcto, verás la pantalla de bienvenida de Next.js. ¡Felicidades! 🎉 Has creado y ejecutado tu primer proyecto Next.js.

---

💡 Consejo: Mantén la terminal abierta mientras trabajas. Si la cierras, el servidor se detendrá. Puedes volver a iniciarlo con npm run dev.

← Volver al índice