Finalizando las páginas

Para el acceso a recursos estáticos como las imágenes, es necesario crear una carpeta Public en la raíz del proyecto. Es importante que tenga ese nombre para que Next lo reconozca.

Pueden ver la documentación aquí Static File Serving

Para los que se quejan por el salto tan repentino que tomo el curso
Llevamos como otros 8 cursos de react y un monton mas de html y css como para detenernos en hacer, uno por uno, el layout de cada componente.
En un entorno laboral, por lo general, te van a dar un proyecto con miles de lineas de codigo y un monton de libs ya implementadas. Lo primero que tendras que hacer es quedarte horas y horas leyendo codigo y entendiendo còmo funciona.
Esto no es màs que un acercamiento a la vida real de un dev.

Es idea mia o faltan cursos, por que de no tener casi nada en el video anterior magicamente en este pasa a tener la aplicación completa funcionando, pero donde estan los cursos de ese avance?. No creo que sea tan malo este curso como para no explicar el como logró armar la aplicación, ¿o si?.

Un cuso de semantic-ui-react

Dejen la flojera. Se supone que si están viendo este curso, es porque ya saben bastante de React, de htlm, css y javascript. Esto es una buena práctica para que desarrollen algo por ustedes mismo, ya se les explicó como trabajar con next y se les dio las herramientas para hacer el proyecto. No tengan la costumbre de que para desarrollar algo, tengan que ver a alguien hacerlo paso a paso, ya tienen conocimiento suficiente para hacerlo por ustedes mismo. El que se sienta perdido y no se crea capas de hacerlo, mejor vaya y repesa cursos básicos de React, css, html y javascript. También deberían aprender Typescript.

¿Que paso aquí ? salió con la aplicación ya lista?? se sobre entiende que el curso no se trata de diseño css ni react, pero didácticamente no tiene sentido mostrar la aplicación lista de un video a otro, y ponerse a explicar las librerías!

Además no es cierto que es solo el css, ya que tiene componentes que son necesarios para continuar,

Para poder avanzar será descargar el proyecto tal como lo tiene

Mi aporte al proyecto: repositorio, a continuación mencionare algunas consideraciones y recomendaciones que comprendí al hacer el proyecto:

1. Trata de hacer el proyecto por tu cuenta, de esa manera te encontraras con problemas que al tratar de resolver hará que tu aprendizaje sea aun mayor.
2. Luego de tratar de hacer al menos la pagina home del proyecto, también observa y estudia lo que hizo el profesor, su técnica al programar y el uso de algunas herramientas son de gran beneficio.
3. Para mi typescript es completamente nuevo, así que te pasa igual que a mi, te recomiendo el curso de typescript para que tu aprendizaje sea aun mayor.
4. En mi aporte, implemente el uso del preprocesador sass, su configuración es super sencilla (es decir casi nula, lo único que tienes que hacer es instalarlo), y lo implemente con css module, si quieres ver como lo hice puedes verlo en mi repositorio o también en la siguiente fuente
5. Por ultimo, si te pasas por el repo no olvides darme una estrella y por supuesto Nunca Pares De Aprender!

Creo que arreglar esto tambien forma parte del reto.

A darle! 😉

¿Que tal les parece Axios? y cual utilizarian ustedes ¿ fetch | axios ?

Ya es engorroso saltar de un video a otro con cambios bruscos que no siguen un paso a paso. Desmotiva un poco esto.

El salto que hizo el profe no me parece lo correcto, la ideal es hacer los cambios linea por linea de código de verdad que este salto esta muy mal de verdad no conviene ver cursos así

Si alguien quiere hacer un commit en git de la nueva rama y no puede, el siguiente comando sirve para guardar los cambios.

git commit -m "message" --no-verify

La url del repo, si alguien lo estaba haciendo aparte como yo.
https://github.com/jonalvarezz/platzi-nextjs

EN LA UNIVERSIDAD TIENEN LA DECENCIA DE EXPLICAR MÁS

Recuerden que en react18 link se importa capitalizado

import Link from 'next/Link'

Les dejo la documentacion a las librerias

Semantic-ui documentation
Confirm from semantic ui
Card from semantic ui
isomorphic-unfetch documentation

¿Por qué hacer los llamados a la api desde el useEffect y no desde métodos como getServersideProps?

Tengo una pregunta, si quiero tener mis urls limpias algo como /nombredelproyecto pero quiero seguir usando la api como puedo hacer? osea creo que usar el parametro del nombre no es algo bueno seria mejor por el ID pero esto implica que en mi ruta se verá el ID en vez del nombre, como puedo hacer que se vea el nombre del proyecto pero a la vez pueda obtener ese id? Si fuera un componente normal pasaria las props y ahi vendria el id y con eso haria el fetch pero en este caso es una page entonces no tengo ni idea de como pasar info desde la parent page hacia la [singlar].js page

Comencé con todas las ganas de segui el “paso a paso”, definitivamente conozco las bases de Node y React, pero el poner el TS creo que primero debemos tomar ese curso antes de seguir las indicaciones… desmotiva 😞 y es engorroso 😒

FETCH es polyfill para navegadores que no tienen la función de búsqueda . Agregará la función de búsqueda al objeto de la ventana de su navegador.

Mientras que isomorphic-fetch es una implementación de fetch tanto para node.js como para el navegador, se basa en fetch polyfill.

Para quienes estén escribiendo en Javascript, puede darse algunos problemas de visualización de los archivos .svg, ya que Next.js no reconoce algunos de estos directamente.

Pueden usar el portal

https://react-svgr.com/playground/

para recortar el svg y convertirlo en un componente de React, sin nesecidad de realizar instalaciones iniciales.