Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

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 20

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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
鈥搕s para indicar que usaremos TypeScript
鈥搖se-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
a diferencia del curso basico de next me siendo mas comodo con este profe :)

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 鈥樷榥pm 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茅 鈥淵a iniciamos bien鈥.

npx create-next-app nombrecarpeta

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.