Tiempo de lectura: 6 minutos Hoy vamos a implementar Bugsink un sistema autoalojado que nos permitirá registrar errores de nuestras aplicaciones y servidores de forma remota y con avisos. Para ello utilizaremos un docker compose. Lo primero es entender qué es Bugsink. BugSink es una herramienta o plataforma diseñada para gestionar errores o bugs en aplicaciones de software de manera … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a aprender a crear una aplicación Flull Stack con Next y Fast API. 1. Configuración del Proyecto 2. Configuración del Backend con FastAPI Instalar FastAPI y Uvicorn: Navega al directorio backend/ y ejecuta: Crea tu servidor FastAPI: En backend/, crea un archivo main.py: Ejecutar el servidor: uvicorn main:app –reload El backend estará disponible … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a crear un aviso de Cookies para React con Next.js Este componente nos servirá para obtener el consentimiento de cookies de los visitantes de nuestra web. Creamos un componente llamado Cookie Banner: Uso: Notas importantes isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y … Leer más
Tiempo de lectura: 2 minutos Ho vamos a crear un .env para utilizar con Next.js en React. Para usar variables de entorno en Next.js y React, necesitas crear un archivo .env.local en la raíz del proyecto y definir tus variables de entorno allí. Luego, en el código, accedes a esas variables usando process.env. Pasos para configurar el .env en tu … Leer más
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: 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 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
