Con este proyecto aprendí a usar Next.js y quedé enganchado con sus bondades. En esta app, uso una API de los amigos de TheCocktailDB. Hago uso de herramientas de extracción de datos propias de Next.js como getServerSideProps, getStaticProps y getStaticPaths. Escribí un artículo sobre cómo usarlas y abajo les dejaré el enlace por si tienen curiosidad.

Para aumentar la eficiencia de la carga de la página web, usé Plaiceholder para convertir de manera dinámica las imágenes recibidas de las APIs en una versión de baja resolución, codificada como un string del tipo Base64. Esto crea un efecto blur mientras se descargan las imágenes.

Este proyecto tiene:

• Paginación dinámica cuando se buscan cocteles por su nombre o ingrediente
• Autocompletado en las dos barras de búsqueda
• Manejo de errores cuando se intenta buscar un coctel cuyo nombre no existe en la base de datos

Sitio webActualmente este despliegue no se encuentra disponible, pero podemos revisar el código en una entrevista presencial o virtual, y si gustan puedo hacer el despliegue de nuevo a manera de prueba.

DespliegueEl último despliegue fue en Linode con Nginx

ArtículoUsando getServerSideProps, getStaticProps y getStaticPaths en Next.js con TypeScript

Código

Front-endNext.js, TypeScript, plaiceholder, NProgress, AntDesign, TailwindCSS, FontAwesome, getStaticProps y getStaticPaths para el SSG (static-site generation)

Back-endgetServerSideProps y API de TheCocktailDB