🔥 Las 12 mejores bibliotecas para tu proyecto NextJS 🏆
A lo largo de los años, he probado diferentes herramientas para:
- Ser más productivo
- Tener menos errores
- Escribir menos código
He recopilado una lista de bibliotecas para ayudarte a desarrollar excelentes proyectos NextJS que uso diariamente, junto con una explicación de lo que puedes hacer con ellas. Vamos a profundizar.
Con NextJS, siempre necesité ayuda con todo lo relacionado con trabajos en segundo plano.
Puede ser una tarea cron ejecutándose en segundo plano para enviar correos electrónicos o procesar los embudos de nuevos usuarios en el sistema.
Eso me obligaba a ejecutar otro servidor para procesar esos trabajos, ya sea un servidor EC2 externo o una función serverless con un puente de eventos.
Eso me llevaría a pagar por servicios adicionales (administrar más servicios) y gestionar la escalabilidad horizontal por mí mismo (en algún momento).
Trigger.dev cambió eso, ofreciendo trabajos en segundo plano sobre NextJS (y muchos otros).
También saben cómo abordar el límite de tiempo de espera de NextJS serverless para procesar trabajos de larga duración.
2. Prisma
Prisma no es específico de NextJS. Es un ORM para trabajar con tu base de datos.
ORM es un envoltorio unificado para consultas de bases de datos.
Mantiene una buena estructura y te permite cambiar rápidamente entre diferentes proveedores de bases de datos.
Si bien hay muchos ORM que puedes usar, Prisma es único al ofrecer soporte para Typescript en tus consultas, haciendo todo 100 veces más rápido. NextJS adoptó Typescript en su configuración predeterminada, lo que lo convierte en una combinación perfecta.
3. NextAuth.js
Supongamos que quieres implementar la autenticación de cualquier proveedor de servicios, como Facebook / Google / GitHub (oAuth).
En ese caso, debes crear tu implementación para cada proveedor o usar un servicio externo como Auth0 o Clerk.
Si lo vas a hacer tú mismo, NextAuth proporciona una implementación completa para que puedas agregarlos fácilmente solo proporcionando las claves correctas.
También se encargan de la autorización una vez que hayas iniciado sesión.
Next.JS auth puede funcionar con Prisma de forma nativa.
4. Next-Sitemap
Una vez que hayas desplegado NextJS en tu servidor, necesitas ayudar a Google a indexar todas las páginas.
Es mejor si puedes decirle a Google sobre todas las páginas de tu sitio web.
Para eso, puedes crear un archivo sitemap.xml que liste todas tus páginas.
Puedes usar Next-Sitemap fácilmente para eso.
5. Next SEO
SEO es el proceso de hacer que tu sitio web aparezca en el feed de Google para diferentes consultas proporcionando palabras clave, descripciones e imágenes para la vista previa de tu sitio web.
Si usas el nuevo enrutador de aplicaciones de NextJS, puede que no necesites usarlo.
Puedes usar su enfoque export metadata o generateMetadata,
pero si usas el viejo enrutador de aplicaciones, es la mejor manera de agregar SEO a tu sitio web.
6. Zod
Zod es un validador de objetos (tanto del servidor como del cliente).
Puedes poner diferentes reglas en un objeto y validarlo más tarde, como el nombre de usuario y la contraseña, o cosas más complejas como la longitud de un array o condiciones en otras claves. Zod no es específico de NextJS.
A lo largo de los años, he visto muchos validadores de objetos, como Yup y class-validator.
Yup no parece estar tan mantenido como Zod, y class-validator es poderoso cuando se usan cosas como NestJS - así que lo mejor es ir con Zod.
7. React-hook-form
Aunque Zod puede validar objetos, no afectará a tu cliente y backend sin lógica personalizada.
React-hook-form es un excelente proyecto para la validación del cliente (mostrar errores en los campos de entrada, gestionar el estado de las entradas y enviar).
Por supuesto, puedes usar Zod como validador para React-hook-form.
8. tRPC
Debo admitir que nunca he usado tRPC antes, pero parece que está ganando mucha atención hoy en día.
Tiene un concepto similar a Prisma; generan una interfaz para tu solicitud y respuesta, por lo que cuando usas llamadas frontend, obtienes ese autocompletado.
Eso es genial porque reduce la posibilidad de errores - digamos que modificaste una ruta de backend, no podrás compilar el proyecto - el cliente devolverá un error de parámetros no existentes o claves de respuesta.
9. SWR y React
-Query
He usado Axios y fetch como bibliotecas base para enviar solicitudes durante años.
SWR y React-Query mejoran esas bibliotecas y ofrecen hooks, almacenamiento en caché, transformación, etc.
Altamente recomendadas para cada proyecto. Ten en cuenta que esas bibliotecas son para componentes del cliente (use client), no componentes del servidor.
10. lodash
Esta no es una biblioteca específica de NextJS.
Es una biblioteca para mutar datos, y aunque JavaScript ha progresado mucho a lo largo de los años con excelentes funciones nativas como flatMap, todavía hay cosas que faltan, como arrays únicos por clave o dividir un array en partes.
Me encuentro usando lodash para casi cualquier proyecto.
11. dayjs
day.js es una biblioteca para todo lo relacionado con fechas, formateo, zonas horarias, etc.
Podría recibir críticas por eso. He trabajado con moment.js durante años.
Ahora que ya no se mantiene, dayjs es una buena alternativa.
Algunas personas prefieren las nuevas funciones de JS para tratar con fechas, pero todavía siento que existe una brecha significativa entre las opciones de dayjs y las funciones nativas de fechas en JS.
12. jsdom
Este no es imprescindible, pero lo he estado usando últimamente para muchos proyectos como una alternativa a cheerio.
Puedes tomar todo el contenido de una página (<html><body>….</html>) y convertirlo en un objeto que puedes manipular después con las funciones "nativas" del DOM de JavaScript querySelector, innerHTML, etc.
Excelente para proyectos que requieren algún scraping.
Jorge García
Fullstack developer