¬°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