¡Estamos en directo en Twitch!

¡Entra y participa!

Imagen de la etiqueta nextjs

Curso gratis de NextJS, el framework de React

· 3 minutos de lectura · ¿Una errata? Edita el artículo

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

¡Suscríbete! 79K

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

¡Suscríbete! 79K

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.

¡Suscríbete! 79K

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

¡Suscríbete! 79K

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

¡Suscríbete! 79K

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

¡Suscríbete! 79K

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

¡Suscríbete! 79K

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

Contenido del artículo

Comparte el artículo