Curso gratis de NextJS, el framework de React

Estoy emitiendo todos los viernes un live coding en mi canal de Youtube donde vamos a ir construyendo paso a paso y desde cero un clon de Twitter usando NextJS, el framework de React de Vercel.

Introducción a NextJS

En esta primera clase aprendemos qué es NextJS, por qué creo que deberíamos usarlo, respondemos algunas preguntas frecuentes al respecto de este framework de React y, además, aprendemos a crear nuestras primeras rutas. También vemos qué es styled jsx y aprendemos a crear navegaciones SPA gracias a next/link.

Usando Styled JSX y login en GitHub con Firebase

Para avanzar en nuestro clon de Twitter vamos a empezar a crear los primeros componentes con Styled JSX y afinar el diseño de nuestra aplicación con un diseño mobile-only.

Y avanzaremos también en el login, para que el usuario tenga que iniciar sesión con GitHub usando Firebase. Veremos cómo lo manejamos en nuestra app de NextJS.

Configurando Eslint y Prettier. Avanzando en la página Home.

Vamos a configurar Eslint y Prettier en nuestro proyecto basándonos en las reglas de Standard. Explicaremos cómo hacerlo paso a paso e integrarlo en nuestro editor gracias a las extensiones de Visual Studio Code.

Seguiremos avanzando el proyecto creando nuestra página home creando algunos componentes. ¡También cambiamos el logo gracias a vuestras colaboraciones! Y nuestra aplicación va tomando forma.

Usando Firestore de Firebase para crear y leer tweets

Para hacer un clon de Twitter debemos ser capaces de crear y leer tweets. En esta clase vamos a conseguirlo usando Firestore de Firebase.

Además, mejoraremos el layout de nuestra aplicación para evitar problemas con el scroll y que el header y el navbar se vean correctamente.

Subiendo imágenes a Firebase Cloud Storage y un timeAgo desde cero

En la anterior clase ya listábamos los tweets pero no se mostraba bien la fecha. En esta clase empezamos haciendo un Timeago desde cero, sin dependencias.

Y una vez tengamos eso, mejoramos un poco el layout de nuestra app y permitimos que los usuarios puedan subir una imagen con cada tweet. Veremos cómo podemos guardarlos en la Firebase Cloud Storage.

Rutas dinámicas y data fetching con NextJS

En esta clase vamos a querer tener una página para nuestro tweet. Para ello la ruta tendrá que indicarnos qué id debemos mostrar. A esto se le llama “ruta dinámica” ya que hay un segmento que cambiará para darnos información.

Una vez tengamos claro ese concepto, será el momento de pasar a recuperar la información de ese tweet en específico. Para ello conoceremos las diferentes opciones de Data Fetching que tenemos en NextJS como getServerSideProps, getStaticProps y getInitialProps.

Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore

Añadir la posibilidad de usar variables de entorno con archivos .env, gracias al soporte nativo que tiene Next.JS y también añadiremos actualizaciones de nuestros resultados en tiempo real con Firestore de Firebase.

Suscríbete a mi canal de Youtube para no perderte el siguiente 👇 ¡Suscríbete! 79K