Decode JWT Token in React

Decode JWT Token in React

Tiempo de lectura: < 1 minuto Today we are going to learn a small function to decode JWT tokens using React. The first thing we will do is to install the necessary libraries: JsonWebToken npm i jsonwebtoken –save auth0.js npm install auth0-js –save And the types if we are using TypeScript: npm i –save-dev @types/auth0-js Once installed, let’s create this function … Read more

Implementing Google Sign-In in React

Implementing Google Sign-In in React

Tiempo de lectura: 3 minutos Today we are going to learn how to implement Google Sign-in with React, also compatible with Next.js. The first thing we need to do is install the React Oauth2 Google library: npm install @react-oauth/google@latest Once installed, we need to create our credentials: Go to Google Cloud Platform (https://cloud.google.com/) and click on Console. Now select your … Read more

Crear una Progressive Web App (PWA) usando React y Next.js

Crear una Progressive Web App (PWA) usando React y Next.js

Tiempo de lectura: 2 minutos Today we are going to learn how we can create a Progressive Web App (PWA) using React and Next.js. We install the dependency we are going to use next-pwa npm install next-pwa –save-dev @types/next-pwa –save-dev Now we create a manifest.json file inside public. { “short_name”: “My PWA”, “name”: “My PWA”, “icons”: [ { “src”: “/icon.png”, … Read more

Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

Tiempo de lectura: < 1 minuto If we want to load paths in Next.js with or without parameters and avoid redirection to a 404 page, we need to do the following: First, we create our folder structure as needed. In this example: /path/ [id].tsx Inside our [id].tsx file is where we handle that ID and perform the desired operations. This works … Read more

Disable JavaScript in Firefox to Check SEO Links

Disable JavaScript in Firefox to Check SEO Links

Tiempo de lectura: < 1 minuto Today we’re going to see how to apply a strategy to check SEO links. Disable JavaScript loading using our Firefox browser. This will allow us to load exactly what a crawling robot loads when analyzing the website. The first thing we need to do is open Firefox and enter this in the URL address: about:config … Read more

Generate a dynamic sitemap.xml with Next.js

Generate a dynamic sitemap.xml with Next.js

Tiempo de lectura: 2 minutos Today we are going to learn how we can generate a sitemap.xml dynamically with Next.js. This is very useful if we have separate links for each of our articles and want to generate their sitemap.xml. With this technique, we will greatly improve the SEO of our website and help search engines properly index our site. … Read more

Using mp3 files in React with Next.js

Using mp3 files in React with Next.js

Tiempo de lectura: < 1 minuto Today we’re going to learn how to import and use our .mp3 files with Next and React. When we try to import a .mp3 file, we get this error: ./src/assets/sounds/ .mp3 Module parse failed: Unexpected character ” (1:3) You may need an appropriate loader to handle this file type, currently no loaders are configured to … Read more

Implementing Stripe in React

Implementing Stripe in React

Tiempo de lectura: 3 minutos Today we are going to learn how to implement the Stripe payment platform in React. Stripe is a secure payment platform for online transactions or micro-transactions. It will save us from having to store credit card data and help comply with GDPR. Another advantage is the low commission it charges on each transaction. The first … Read more

Playing Sound with React

Playing Sound with React

Tiempo de lectura: < 1 minuto Today we are going to implement a function that will allow us to play sound using React. The first thing we need to do is to create this function that will allow us to load the sound: export function loadSound(source: string) { const sound = document.createElement(“audio”); sound.src = source; sound.setAttribute(“preload”, “auto”); sound.setAttribute(“controls”, “none”); sound.style.display = … Read more

SDK Location Not Found Error in React Native

SDK Location Not Found Error in React Native

Tiempo de lectura: < 1 minuto If we encounter this error while trying to generate an apk of a React Native application SDK location not found Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project’s local properties file, we need to do the following to fix it. Now we will create … Read more