Creación de un proyecto Next.js

Creación de su proyecto Next.js

Con nuestro entorno de desarrollo configurado, es hora de estructurar nuestra aplicación Next.js.

1. Elija el directorio de su proyecto

Abra su terminal y diríjase a donde desea almacenar su proyecto:

# Windows
cd C:\Proyectos

# Mac/Linux
cd ~/Proyectos

# O cree una carpeta en VS Code y abra la terminal integrada (Ctrl+`)

2. El comando de inicialización

npx create-next-app@latest headless-wp

npx: Ejecuta el paquete sin necesidad de una instalación global.
create-next-app@latest: La plantilla estable más reciente de Next.js.
headless-wp: El nombre del directorio de su proyecto.

3. Preguntas de configuración

Se le presentarán varias opciones de configuración. Estas son las recomendadas:

Would you like to use TypeScript?

→ Yes (Muy recomendado)

Añade tipado estático a JavaScript, detectando errores durante el desarrollo en lugar de en tiempo de ejecución.

Would you like to use ESLint?

→ Yes

Mantiene su código limpio y consistente al señalar posibles problemas.

Would you like to use Tailwind CSS?

→ Yes

Un framework de CSS basado en utilidades que permite un desarrollo rápido de la interfaz de usuario sin salir de su HTML.

Would you like to use src/ directory?

→ No

Para esta guía, mantendremos nuestros archivos en la raíz por simplicidad, aunque muchas aplicaciones de producción utilizan /src.

Would you like to use App Router?

→ Yes (Obligatorio)

El sistema de enrutamiento moderno introducido en Next.js 13 que permite componentes de servidor y un mejor rendimiento.

Would you like to customize the default import alias?

→ No

Mantendremos el alias estándar `@/*` para importaciones más limpias.

4. Verificación

Una vez finalizada la instalación, verá un mensaje de éxito:

Success! Created headless-wp at /su/ruta/headless-wp

5. Entre en el proyecto

cd headless-wp

6. Abra en VS Code

code .

7. Inicie el servidor de desarrollo

npm run dev

Debería ver la siguiente salida:

▲ Next.js 14.x.x
- Local: http://localhost:3000
- Ready in 2s

8. Visualización en el navegador

Abra http://localhost:3000. Debería ver la página de inicio predeterminada de Next.js. ¡Enhorabuena, su aplicación ya está activa! 🚀