Primeros pasos en Next.js

Ejecutar create-next-app <nombre-de-tu-app> instala algunas dependencias como react,react-dom, next y eslint.
Además que por defecto crea un directorio con el nombre de tu app y dentro de él también crea lo siguiente:
|_ 📂 node_modules
|_ 📂 pages
|_ 📂 public
|_ 📂 styles
📜 .eslintrc.json
📜 .gitignore
📜 next.config.js
📜 package-lock.json
📜 package.json
📜 README

Dentro del package.json se crean los siguientes scripts que incluyen algunos comandos de Next CLI

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Al igual que instalábamos react con el comando npx create-react-app podemos instalar next con el comando** npx create-next-app **seguido del nombre del proyecto. Con esto estaremos listos para empezar a trabajar.

En este vídeo vamos a ver las carpetas y archivos que por defecto nos crea este comando para nuestro proyecto:

Con el comando** npm run dev** podremos abrir nuestro proyecto en local una vez hayamos accedido a la carpeta de nuestro proyecto.

Para no comenzar el curso con problemas de** instalacion de dependencias **(como me pasó a mi) les recomiendo que cuando ejecuten pongan npx [email protected] nombreApp , de esta manera van a trabajar con la misma versión que el profesor.

Yo instalé la ultima version y los archivos se generaron para trabajar con TypeScript, así que borré toda la carpeta (nextjs) y volví a empezar con la version que usa el profesor.

Algunos flags de create-next-app
–ts para indicar que usaremos TypeScript
–use-npm para indicar que use npm en lugar de yarn para crear el proyecto

Oscar te felicito y agradezco por tu pedagogía! Clases magistrales.

Primeros pasos con next.js

Preparando el proyecto

• Creamos una nueva carpeta donde estará nuestro proyecto

• Corremos el comando npx create-next-app appName para crear componer nuestra aplicacion con next, es parecido al comando npx create-react-app appName

• Una vez listo todo nos presenta la siguiente estructura de archivos

  

  • pages: donde estarán los elementos claves de nuestra aplicacion
    • index: expondrá el sitio
    • _app: archivos de configuracion
    • api: en el caso de trabajar con una api
  • public: donde estarán los archivos públicos imagenes o archivos claves para el proyecto
  • styles: donde colocaremos los estilos de la aplicacion
  • y los demás archivos de configuración

Next.js

• Es una gran solucion a grandes proyectos.
• Un pro de utilizar Next.js es que viene con server-side-rendering:
• esto quiere decir que pre-renderiza desde el servidor el html para un mejor performance.

• Fact: Next.js utiliza dos modos de pre-redering

• Static Generation (Recommendado): Consiste que HTML es generado en el momento de compilacion y se reutilizara en cada request.
• Server-side Rendering: El HTML es generado en cada request.

Fuente: https://nextjs.org/docs/basic-features/pages

No me creó la carpeta styles ni pages!!!

El comando completo para utilizar React-17 y que después no vaya a dar problemas (porque si recuerdan el proyecto estaba con React-17) es el siguiente, y también le incluí typescript:
npx create-next-app --ts --use-npm yard-sale --template react-17

Si les sale algún error (network o timeout), sólo agreguen el siguiente flag:

npx create-next-app <app_name> --use-npm 

Un tip a la hora de crear sus proyectos con este comando:

Al nombre del proyecto no le pueden incluir letras capitales o mayusculas ya que es una restriccion de nombrado con npm

Could not create a project called "TuProyecto" because of npm naming restrictions:
    * name can no longer contain capital letters

Tenia la version 10 de nodeJs y al intentar ejecutar ‘‘npm run dev’’ recibia un error en la terminal.

Pude solucionarlo actualizando la version de node a la 16.14.0

Si estas usando ubuntu, dejo un tutorial para actualizar la version de node

https://platzi.com/comunidad/como-instalar-nodejs-en-linux/?gclid=Cj0KCQiA3-yQBhD3ARIsAHuHT66feW99y8IZTwlR5w3kgQfLpSSpArb4xw6PAaAUrL1yV_KkqluZqagaAvRDEALw_wcB&gclsrc=aw.ds

Para recordar que la versión de node instalada debe ser mayor a la 16. Sinó no anda el framework!

Chistosito este Next, al darle click al local host de la consola cuando se ejecuta npm run dev me abrió el navegador, pero en el puerto incorrecto. No sé a santo de qué, pero me asusté al principio, pensé “Ya iniciamos bien”.

npx create-next-app nombrecarpeta

npx [email protected]

No pude crear el proyecto con el comando create-next-app Eslint no era compatible con mi versión de Node 14, lo que hice fué instalar la versión LTS con NVM https://github.com/nvm-sh/nvm

Usar el comando take seria una mezcla entre el comando mkdir y cd, ya que lo crea y te lleva al directorio

Con el siguiente comando: npx [email protected] --ts
Va a crear un proyecto de next ya con toda la configuración para usar typescript, simplemente almomento de ejecutar les va a pedir que le coloquen el nombre al proyecto.