Curso Práctico de Next.js

Curso Práctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Primeros pasos en Next.js

3/22
Recursos

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

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"
}

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

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

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

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!

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.

a diferencia del curso basico de next me siendo mas comodo con este profe :)