Añadir mapas Open Street Maps con Leaftlet en React y también compatible con Next.js

Añadir mapas Open Street Maps con Leaftlet en React y también compatible con Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear un componente de Mapas compatible con Open Street Maps usando la librería Leaftlet en React. Lo primero que tenemos que hacer es instalar la librería necesaria: Y después la librería Leaflet: Y si necesitamos TypeScript (en mi caso sí) instalamos lo siguiente: Instalamos los iconos: Ahora podemos crear … Leer más

Crear un componente que envuelve a otro (children) con React

Crear un componente que envuelve a otro (children) con React

Tiempo de lectura: < 1 minuto Te explicaré cómo crear un componente de React que envuelva a otro y renderice su contenido dentro de algún marcado adicional, como <Texto>{child}</Texto> Creamos un componente de ejemplo llamado Texto: En este ejemplo, el componente Texto recibe children como una prop y los renderiza dentro de un div con un borde azul y un relleno … Leer más

Crear un HOC (componente de orden superior) usando React

Crear un HOC (componente de orden superior) usando React

Tiempo de lectura: 2 minutos En React, este tipo de componente se conoce como un «componente de orden superior» o «HOC» (Higher Order Component). Un HOC es una función que toma un componente y devuelve otro componente que generalmente proporciona funcionalidad adicional al componente original. Supongamos que queremos crear un HOC llamado WrapperComponent que envuelva a otro componente llamado WrappedComponent … Leer más

Solucionar error «Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: Client:» en Next.js y React utilizando i18n

Solucionar error «Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: Client:» en Next.js y React utilizando i18n

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el error común que puede aparecer cuándo estamos implementando i18n en nuestro entorno React con Next.js. Este es el error: En server aparece un contenido distinto que en client. Esto generalmente se debe a que estamos importando mal la librería i18n (el componente useTranslation). Para ello vamos a comprobar que tenemos … Leer más

Componente botón usando Flutter en lenguaje Dart

Componente botón usando Flutter en lenguaje Dart

Tiempo de lectura: 2 minutos En este post vamos crear un componente de botón personalizable en Flutter utilizando el widget ElevatedButton. Este componente nos permitirá crear botones con texto, icono y personalizar varios aspectos como el color, tamaño del texto y el ancho del botón. Ahora que hemos creado el componente de botón personalizable, podemos utilizarlo fácilmente en cualquier parte … Leer más

Añadir internacionalización por path con i18next en React y Next.js Server Side (SSR)

Añadir internacionalización por path con i18next en React y Next.js Server Side (SSR)

Tiempo de lectura: 4 minutos Hoy vamos a aprender cómo podemos añadir internacionalización Server Side para que directamente nuestro servidor de Next.js nos devuelva las páginas traducidas para beneficiar al SEO. Lo primero que tenemos que hacer es instalar las dependencias necesarias: Después vamos a crear un archivo de configuración next-i18next.config.js en la raíz del proyecto: En mi caso voy … Leer más

Archivo middleware en Next.js

Archivo middleware en Next.js

Tiempo de lectura: < 1 minuto Hoy voy a explicar y proporcionar un ejemplo de middleware en Next.js Un middleware en Next.js es una función que se ejecuta antes de que una solicitud llegue a tu ruta o API de Next.js. Puedes usar middleware para manejar y manipular solicitudes entrantes. Aquí están algunas cosas que puedes hacer con middleware en Next.js: … Leer más

Archivo _app.tsx por defecto para Next.js

Archivo _app.tsx por defecto para Next.js

Tiempo de lectura: < 1 minuto Hoy os traigo este archivo _app.tsx por defecto por si no lo crea vuestro proyecto Next.js Este archivo _app.tsx es el componente de nivel superior en Next.js. Todos los componentes de página se renderizan a través de este archivo, lo que lo hace útil para configuraciones globales. Debes situar este archivo dentro de pages/_app.tsx

Como parar un contenedor Docker Compose y borrar la imagen asociada para luego crear una nueva –build

Como parar un contenedor Docker Compose y borrar la imagen asociada para luego crear una nueva –build

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos borrar la imagen Docker al realizar un Docker Compose down para luego volver a generar una actualización y que no genere basura. El comando que debemos utilizar para detener el contenedor y borrar la imagen asociada es: Esto eliminará las imágenes asociadas de ese docker compose. Para volver a … Leer más