Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos validar un formulario, incluyendo un reCAPTCHA para evitar ataques de spam por BOTS. Lo primero que tenemos que hacer es registrar nuestro código de reCAPTCHA en Google: https://www.google.com/recaptcha/about/ Y pulsamos en v3 Admin Console Le damos a crear una nueva en el botón del más (+) y en este … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender una pequeña función para decodificar tokens JWT usando React. Lo primero que haremos es instalar las librerías necesarias: JsonWebToken auth0.js Y los tipos si usamos TypeScript: Una vez instalado, vamos a crear esta función en un archivo de utils.tsx Nos decodificará los tokens que pasemos como parámetro y los devolverá en … Leer más
Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos implementar inicio de sesión con Google Sign y React, además compatible con Next.js. Lo primero que tenemos que hacer es instalar la librería React Oauth2 Google Una vez instalado tenemos que crear nuestras credenciales para ello: Vamos a Google Cloud Platform (https://cloud.google.com/) y pulsamos en Consola Ahora seleccionamos nuestro … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear una web progresiva PWA utilizando React y Next.js. Instalamos la dependencia que vamos a utilizar next-pwa Ahora creamos un archivo manifest.json dentro de public. Pondremos el nombre y los datos de nuestra app y enlazaremos el icono. Podemos elegir la orientación indicando: «orientation»: «portrait» Creamos un archivo … Leer más
Tiempo de lectura: < 1 minuto Si queremos cargar paths en Next.js con o sin paramétros y que no nos redireccione a 404 tenemos que hacer lo siguiente: Primero creamos nuestra ruta de carpetas como necesitemos en este ejemplo es: Dentro de nuestro archivo [id].tsx es dónde trataremos ese id y realizaremos las operaciones que queramos. Esto funcionaría para las rutas: … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a ver cómo aplicar una estrategia para comprobar enlaces SEO. Desactivar la carga de JavaScript utilizando nuestro navegador Firefox. Con esto lograremos cargar exactamente lo que un robot crawling carga cuando analiza la web. Lo primero que tenemos que hacer es abrir Firefox y cargar esto en la dirección URL: Una vez dentro … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos generar un sitemap.xml de forma dinámica con Next.js esto es muy útil si tenemos links separados de cada uno de nuestros artículos y queremos generar su sitemap.xml. Con esta técnica mejoraremos mucho el SEO de nuestra web y ayudaremos a los buscadores a indexar correctamente nuestra web. Lo primero … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender a importar y utilizar nuestros archivos .mp3 con Next y React. Cuando intentamos importar un archivo .mp3 nos devuelve este error: Para solucionarlo tenemos que instalar file-loader: Y configurarlo dentro de nuestro module.exports Y para que la importacón de *.mp3 no de problema con TypeScript añadiremos dentro de declarations.d.ts (si no … Leer más
Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo implementar la plataforma de pago Stripe en React. Stripe es una Plataforma de pago segura para realizar transacciones o micro-transacciones online. Nos evitará tener que almacenar datos de tarjetas de crédito y ayudará a cumplir con la GDPR. Otra de sus ventajas es la comisión baja que cobra en cada … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a implementar una función que nos permitirá reproducir sonido utilizando React. Lo primero que tenemos que hacer es crear esta función que nos permitirá cargar el sonido: Y para utilizarlo haremos lo siguiente. Colocamos nuestros sonidos dentro de assets/sounds Los importamos e invocamos a la función creada poniendo .start() al final.
