Proyectos desarrollados con Nextjs

Clonar el Shorts de YouTube con NextJS

Implementación de un clon de YouTube Shorts utilizando Next.js y la librería react-intersection-observer. La aplicación permite la reproducción automática de videos al desplazarse por la lista, replicando la experiencia de usuario de los Shorts de YouTube.

Código

Como usar Server Actions en NextJS

El server Actions no evitar estar creando una Api Rest, ademas el server Actions puede funcional tanto lado servidor como cliente. Utilizar un servidor de acciones tiene varias ventajas.

Código

Conectar MySQL con NextJS

Aprende a conectar MySQL a Next.js de manera sencilla y eficiente, para probar la base de datos de forma local.

Código

Consumir una API con NextJS

Aprende a consumir una Api en NextJs desde cero usando el método fetch de JavaScript, una tarea muy cotidiana en la vida de los desarrolladores.

Código

E-commerce con NextJS 15

plicación desarrollada con Next.js 15 que muestra cómo consumir una API, construir el frontend de un e-commerce y utilizar un buscador con filtrado de productos, entre otras funcionalidades.

Código

Guía Completa para Integrar Bootstrap 5 en NextJS

Aprende a integrar Bootstrap 5 en Next.js de manera sencilla y eficiente, para mejorar la experiencia del usuario.

Código

Implementación de Syntax Highlighting en NextJS para Resaltar Código

Aplicación construida conNext.JS que muestra cómo resaltar bloques de código utilizando el paquete react-syntax-highlighter. Incluye un botón para copiar el código al portapapeles y un indicador visual de que el código ha sido copiado.

Código

Implementar paquete npm Nextjs Toast Notify

Nextjs Toast Notify es un paquete npm imprescindible para agregar notificaciones emergentes (toasts) a tus aplicaciones web con Next.js. Ideal para proporcionar retroalimentación visual clara y efectiva sin interrumpir la experiencia del usuario.

Código

Sala de Chat con NextJS

Un proyecto de chat en tiempo real construido con Next.js y Socket.io, que permite a los usuarios interactuar en una sala de chat dinámica. Utiliza socket.io-client en el frontend para gestionar la comunicación en tiempo real con el servidor. Implementa actualizaciones instantáneas de mensajes y soporte para múltiples usuarios. Perfecto para aplicaciones de chat colaborativo o interacción en vivo.

Código

Sistema de Likes y Dislikes con NextJS

Sistema de Likes y Dislikes con Next.JS es una aplicación web interactiva que permite a los usuarios expresar sus preferencias mediante votos positivos y negativos, Permite a los usuarios interactuar con el contenido y visualizar la popularidad relativa de cada elemento.

Código

Subir Imágenes con NextJS

Aprende a cargar imágenes en Next.js de manera sencilla y eficiente, además de listar todas las imágenes cargadas. Para mejorar la experiencia del usuario, incorporaremos react-toastify para generar alertas y react-top-loading-bar para mostrar una barra de progreso durante las operaciones.

Código