Tiempo de lectura: 3 minutos En este tutorial, aprenderás cómo crear un contexto de tema que abarque toda tu aplicación Next.js utilizando React. Este contexto de tema te permitirá cambiar dinámicamente entre diferentes temas en tu aplicación, como temas claro y oscuro. Paso 1: Configuración inicial Asegúrate de tener instalado Node.js en tu sistema. Luego, puedes crear un nuevo proyecto … Leer más
Tiempo de lectura: 2 minutos Hoy os voy a compartir una estructura de carpetas que podéis utilizar para organizar vuestro proyecto React con Next.js. Cuando trabajas con React y Next.js, es común organizar tu proyecto en varias carpetas para mantener una estructura limpia y fácil de entender. Aquí hay una estructura de carpetas típica que se puede utilizar: Estas son … Leer más
Tiempo de lectura: < 1 minuto Hoy os voy a compartir una configuración Docker Compose muy necesaria y que os permitirá en pocos minutos desplegar una web completamente funcional usando Nginx y React con Next.js Lo primero que tenéis que hacer es crear el archivo docker-compose.yml Ahora vamos a crear un Dockerfile: Ahora creamos las carpetas config/nginx y añadimos el fichero … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos crear un build (con la carpeta) con React Next.js. Lo primero que tenemos que hacer es ir al archivo next.config.mjs que tiene por defecto: Lo cambiaremos por: Y ahora cuando invoquemos el comando de generar build: Nos generará la carpeta /build con el contenido de la web. isMa Ingeniero … Leer más
Tiempo de lectura: 2 minutos Para desplegar la web que hemos creado con React y Next.js vamos a seguir estos pasos: Asegúrate de reemplazar tu-domino.com con tu dominio real y /ruta/a/tu/aplicacion/build con la ruta real de la carpeta build de tu aplicación Next.js. Es importante tener en cuenta que Nginx solo se encargará de servir los archivos estáticos generados por … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo crear un proyecto React con Next.js y ejecutarlo. Lo primero que vamos a hacer es crear un nuevo proyecto con este comando: Ahora preguntará sobre la configuración. Yo he elegido y recomiendo esta: Usar TypeScript ya que nos va a permitir utilizar tipado en JavaScript, nos solucionará y agilizará el … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el error Unknown compiler option ‘allowImportingTsExtensions’ que aparece cuando intentamos analizar un proyecto TypeScript con SonarQube y React. El error se encuentra en tsconfig.json del proyecto de React, se soluciona eliminando la siguiente línea: isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo solucionar el error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; cuando intentamos analizar un proyecto React con TypeScript usando Sonarqube. Este error se localiza en el archivo tsconfig.json, ya que se incluye: Para solucionarlo pondremos: isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear un tema para WordPress usando React, TypeScript y Frontity. Además, vamos a añadir Vite por debajo que nos permitirá desplegar más rápido nuestra APP. Frontity es el framework que te permite conectar tu aplicación de React con WordPress, aprovechando su API REST o GraphQL para obtener y mostrar … Leer más
Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos añadir un vídeo de YouTube en React. Lo primero que tenemos que hacer es añadir esta dependencia: Una vez instalada vamos a crear el componente que se va a encargar de abrir el vídeo de YouTube. La llamamos YoutubePlayer.tsx Puedes personalizar las opciones añadiendo playerVars: referencia. Y este es … Leer más
