Inicializando nuestro proyecto con Next.js

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

Muy buen curso!

npx create-next-app react-shop-admin