Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Inicializando nuestro proyecto con Next.js

2/31
Recursos

Aportes 16

Preguntas 5

Ordenar por:

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

o inicia sesi贸n.

Comparto la documentaci贸n de create-next-app, https://nextjs.org/docs/api-reference/create-next-app.
.
Aqu铆 encontrar谩s las opciones que nos brinda Next, una de esas es iniciar el proyecto con TypeScript 馃檶; algunas razones de porqu茅 usar create-next-app y enlaces acerca del soporte de CSS, pages y m谩s. 馃く

creo que este curso deber铆a de estar antes en la ruta de javascript, el curso pr谩ctico es una migraci贸n de React a Next, en cambio este nos ense帽a desde 0 y m谩s completo

Clase #2: Inicializando nuestro proyecto con Next.js 2/31 鉁忥笍

  1. Vamos a crear una carpeta para el proyecto, abrir la consola con Ctrl + T y posicionarse en la carpeta donde estar谩 el proyecto, para ver donde estamos: pwd
  2. Para crear e inicializar el proyecto con next y la 煤ltima versi贸n (en mi caso y para la fecha 7/72022 la versi贸n de next es 12.2.1) se coloca: npx create-next-app my-app
    en 茅sta clase nuestra app se llama react-shop-admin, entonces el comando ser铆a npx create-next-app react-shop-admin
    Fuente: aqu铆
  3. Con 茅sto instala paquetes de react, de next, herramientas como eslint. Entre los comandos que podemos usar:
    npm run dev 鈫 ejecuta el proyecto en modo de desarrollo.
    npm run build 鈫 para compilar nuestro proyecto.
    npm start 鈫 para ver la compilaci贸n en modo desarrollo o en modo de producci贸n.
  4. Una vez instalado, entrar a la carpeta del proyecto con cd react-shop-admin
    Autom谩ticamente ya hay un proyecto inicializado y no es necesario realizar los pasos de git init y de npm init
  5. El paso siguiente es ejecutar npm run dev para que nos habilite el modo de desarrollo local y obtener la url de modo local y poder visualizar los cambios. En mi caso la url local que sale: http: //localhost:3000
  6. Para parar el proceso (matar como dice el profesor) se presionan las teclas Ctrl + C
  7. Vamos a trabajar con el c贸digo, para ello tecleamos code . Para abrir el editor Visual Studio Code (VSC).
  8. En el panel izquierdo de VSC aparecen las carpetas generadas para el proyecto:
  • La carpeta .next se crea de forma local y no se sube al repositorio (no se env铆a a producci贸n).
  • La carpeta node_modules nos va a permitir tener todas las dependencias que estamos instalando.
  • En la carpeta pages estar谩 todo el c贸digo fundamental para el proyecto (api, index.html), basado en next y el enrutamiento de archivos.
  • En la carpeta public estar谩n varios elementos necesarios para el proyecto como los iconos.
  • La carpeta de styles estar谩n los estilos.
  • Y estar谩n los archivos restantes que vienen por defecto para el despliegue, visualizaci贸n a las im谩genes, la configuraci贸n de los scripts y de las dependencias del proyecto.

como ya lleva un rato la versi贸n 13, instalen la 12 con:

npx create-next-app@12

Buenas, Creo que estan desordenados los capitulos. Aca estamos recien inicializando el proyecto cuando en los capitulos anteriores ya lo estabamos configurando.

comandos utilizados

npx create-next-app react-shop-admin 

decarguen la version que usa para no perder el tiempo:
npx create-next-app@12 react-shop-admin

Por si alguien va a trabajar el proyecto con Typescript, puede ejecutar el comando con el flag --ts:

npx create-next-app@latest --ts

Adjunto tambi茅n la documentaci贸n de create-next-app con TS.

Si alguien quiere inicializar Next.js manual que a mi gusto es la mejor pr谩ctica mientras se aprende:

  1. Inician NPM con npm init para que les generen el package.json

  2. Luego instalan las dependencias de next, react y react dom

npm install next react react-dom

  1. Despu茅s, en el package.json en la secci贸n de scripts ponen estos comandos que vamos a necesitar para ejecutar en modo de desarrollo, producci贸n, debugging con eslint, etc.
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
  1. Crean las carpetas pages y public, en la carpeta pages crean la entrada principal como index.js, ah铆 pueden hacer una simple function component donde no falte el export default como en todas las p谩ginas que estar谩n dentro de la carpeta pages que se ocupa de las rutas.
function Home() {
  return <div>Hola mundo</div>
}

export default Home

Eso es todo, ya al avanzar las clases vamos configurando los otros archivos que no tenemos de configuraci贸n como next.config, el de eslint, etc. Recuerden leer la documentaci贸n mientras avanzamos en el curso

https://nextjs.org/docs/getting-started

create-next-app

El comando 鈥create-next-app鈥 es una herramienta que se utiliza para iniciar un nuevo proyecto de Next.js. Next.js es un marco de JavaScript para desarrollar aplicaciones web en el lado del servidor. Con este comando, puede crear una nueva aplicaci贸n Next.js en un directorio espec铆fico y empezar a desarrollar su aplicaci贸n de inmediato. Adem谩s, el comando incluye opciones para personalizar la configuraci贸n de su aplicaci贸n, como el nombre del directorio y el template inicial que desea utilizar

Extra帽o al profe Freddy Vega

鈿狅笍 Si les aparece el siguiente error despu茅s de ejecutar: npm run dev

warn  - Attempted to load @next/swc-linux-x64-gnu, but an error occurred: libssl.so.1.1: cannot open shared object file: No such file or directory
warn  - Attempted to load @next/swc-linux-x64-gnux32, but it was not installed
warn  - Attempted to load @next/swc-linux-x64-musl, but an error occurred: libc.musl-x86_64.so.1: cannot open shared object file: No such file or directory

Instalar libssl1.1:

sudo apt install libssl1.1

Vuelve a ejecutar npm run dev y ya no hay advertencias.

Comandos utilizados en la clase:

npx create-next-app react-shop-admin

cd react-shop-admin

Next.JS ya va por la version 14, que cambia varias cosas en su configuracion, estaria bueno que actualizaran el curso para esa version

Muy buen curso!

npx create-next-app react-shop-admin