Lección 02. Creación de proyecto Next.js.

Para la creación de un proyecto nuevo de Next.js, basta con ejecutar el comando siguiente:

npx create-next-app@latest

Nota: No olvides que para la creación de este, es necesario tener instalado Node.js y npm.

Creación de proyecto de Next.js._

Una vez ejecutado el comando principal, comenzará la configuración de nuestro proyecto a crear.

Nota: Si es nuestra primera vez utilizando Next.js, nos pedirá instalar las dependencias correspondientes.

Configuración de proyecto de Next.js._

Una vez finalizado podremos configurar nuestro proyecto:

? What is your project named? »

Nos preguntará que nombre deseamos colocarle a nuestro proyecto. Podemos colocarle un nombre a gusto.

? Would you like to use TypeScript? » No / Yes

Nos preguntará si deseamos instalar TypeScript para su uso. Se recomienda que si, ya que Next.js utiliza TypeScript de manera default.

? Would you like to use ESLint? » No / Yes

Nos preguntará si deseamos instalar EsLint. Se recomienda que Si.

? Would you like to use Tailwind CSS? » No / Yes

Nos preguntará si deseamos instalar Tailwind CSS. Esto es opcional, si quieres realizar una estilización de elementos de manera más rápida utilizando el framework, a diferencia de un CSS manual.

? Would you like to use App Router? (recommended) » No / Yes

Nos preguntará si deseamos instalar App Router en nuestro proyecto. Utilizado para el enrutado de paginas y directorios en nuestro proyecto. Se recomienda que Si.

? Would you like to use Turbopack for `next dev`? » No / Yes

Nos preguntará si deseamos instalar Turbopack. para el empaquetador de nuestro proyecto. Dependiendo del empaquetador que usemos, pero si no es necesario, se recomienda que No.

? Would you like to customize the import alias (`@/*` by default)? » No / Yes

Nos preguntará si deseamos configurar alias en nuestro proyecto, para el manejo de las rutas. Esto es opcional, si deseamos podemos colocar si, pero si no lo necesitamos, podemos colocar No.

Instalación de dependencias, librerias y frameworks configurados._

Después de la configuración de nuestro proyecto, Next.js creara nuestro proyecto, instalando en él las dependencias configuradas.

Deberías visualizar algo similar a:

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

Nota: Esto puede tomar tiempo.

Ingresar a proyecto creado._

Una vez instaladas las dependencias, podemos ingresar a nuestro proyecto utilizando el comando:

cd nombre-proyecto

Esto permitirá ingresar al directorio interior de nuestro proyecto.

Nota: Si utiliza VSC como editor de código, puedes abrir el proyecto al ejecutar el comando:

code .