Como Crear Un Proyecto Con Next JS

Documentación Oficial

Introduction | Next.js (nextjs.org)

¿Como iniciar un proyecto de Next.JS?

1. Creación de Ambiente de trabajo
   1. Crear carpeta donde se va a desarrollar la app
2. En la terminal correr el comando

npx create-next-app [nombre del proyecto]

1. Pasos para configurar el proyectó
   1. Usar TypeScrip (Yes)
   2. ESLint (Yes)
   3. Tailwind CSS (Yes)
   4. src/directory (No)
   5. App Router (Yes)
   6. Import Alias (No)
2. Se realizará la instalación.
3. Correr la App

cd [nombre del proyecto]
npm run dev

💡

3.d

En el punto 3.d se configura (No) solo cuando el proyecto no es muy grande

Si el proyecto es grande se recomienda utilizar (Yes) para esta configuracion

Modificaciones y Turbo Pack

El archivo inicial es el que se encuentra en la carpeta de app/page.tsx

Si queremos ver algunos cambios debemos borrar los datos que tenemos ahí tsx y escribir lo que queremos ver.

export default function Home() {
    return (
    <main className="flex flex-col items-center justify-between p-24">
        <span className="text-5xl">Hola Mundo</span>
    </main>
    )
}

Estos cambios se van refrescando automáticamente

Configurar TURBOPACK

Esto nos permite hacer un refresh de los cambios más rápido, para activarlo debemos dirigirnos al package.json

Y en los scripts agregar --turbo en dev

"scripts": {
    "dev": "next dev --turbo"
}

Ahora en la terminal al correr el npm run dev se ejecutará el modo turbo.