Tiempo de lectura: 2 minutos Today we’re going to learn how we can validate a form, including a reCAPTCHA to prevent spam attacks by BOTS. The first thing we need to do is register our reCAPTCHA code on Google: https://www.google.com/recaptcha/about/ And click on v3 Admin Console Click on the plus (+) button to create a new one, and in this … Read more
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
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
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
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
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
Tiempo de lectura: 2 minutos Today we are going to learn how we can create a map component compatible with Open Street Maps using the Leaflet library in React. The first thing we need to do is install the necessary library: npm install react react-dom leaflet And then the Leaflet library: npm install react-leaflet And if we need TypeScript (in … Read more
Tiempo de lectura: < 1 minuto Today we are going to fix the common error that may occur when implementing i18n in our React environment with Next.js. This is the error: Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: “” Client: “” See more info here: https://nextjs.org/docs/messages/react-hydration-error A different content appears … Read more
Tiempo de lectura: < 1 minuto Today I’m going to explain and provide an example of middleware in Next.js A middleware in Next.js is a function that runs before a request reaches your Next.js route or API. You can use middleware to handle and manipulate incoming requests. Here are some things you can do with middleware in Next.js: Cookie handling: You … Read more
Tiempo de lectura: < 1 minuto Today I bring you this _app.tsx file by default in case your Next.js project doesn’t create it. This _app.tsx file is the top-level component in Next.js. All page components are rendered through this file, making it useful for global configurations. You should place this file inside pages/_app.tsx import { AppProps } from ‘next/app’ import ‘../styles/globals.css’ … Read more
