- Full-Stack React Tech Stack pour 2025
- Présentation de technologies utiles pour développer un produit SaaS ou un produit minimum viable (MVP)
- Next.js : framework basé sur React qui fournit nativement diverses fonctionnalités comme le routing et le caching, et qui facilite la connexion avec le back-end grâce aux fonctionnalités React les plus récentes, comme les server components et les server functions
- Astro : outil optionnel pour créer la landing page d’un produit, utilisé pour produire rapidement des landing pages et améliorer l’expérience développeur
- Server Components : composants exécutés sur le serveur, permettant notamment l’accès à la base de données, et qui transforment la manière de développer des applications React full-stack
- Server Functions : fonctionnalité qui permet d’exécuter du code côté serveur depuis un composant React via un simple appel de fonction, en générant automatiquement des endpoints d’API
- Server Actions : sous-ensemble des server functions ; il existe des bibliothèques pour en améliorer l’ergonomie, mais une implémentation directe est aussi possible
- Tailwind CSS : outil recommandé pour développer rapidement un produit et assurer la maintenance du CSS sur le long terme ; une fois qu’on s’y habitue, il est difficile de revenir à une approche CSS plus traditionnelle
- Shadcn UI : bibliothèque d’interface qui s’intègre parfaitement à Tailwind CSS, proposant un système sans version et une approche rafraîchissante de la gestion de l’UI
- Lucide React : bibliothèque d’icônes fournie avec Shadcn UI, qu’il y a peu de raisons de remplacer tant qu’aucune meilleure alternative n’émerge
- TypeScript : standard de fait de l’industrie pour les projets JavaScript, contribuant à une meilleure expérience développeur, à la réduction des bugs et à une meilleure maintenabilité du code
- Zod : bibliothèque de validation qui s’accorde bien avec TypeScript, principalement utilisée pour la validation côté serveur ; pour les formulaires côté client, la validation HTML native est privilégiée afin de réduire la complexité
- nuqs : outil pour gérer de façon type-safe l’état dans l’URL (par ex. recherche, tri, pagination) dans Next.js ; dans d’autres frameworks, on peut utiliser des fonctionnalités intégrées ou d’autres bibliothèques
- Zustand : outil optionnel de gestion d’état côté client, dont l’usage diminue avec l’état dans l’URL, le caching de données côté client et l’évolution des applications React pilotées par le serveur
- React Query : outil optionnel utilisé pour des cas complexes de data fetching côté client, comme l’infinite scroll ; si la complexité du projet reste limitée, les server components peuvent suffire à eux seuls
- Prisma (ORM) : choix d’ORM fiable, qui pourrait être remplacé par Drizzle selon les tendances récentes, mais Prisma reste pour l’instant préféré
- Supabase (base de données) : service fournissant une base de données Postgres ; seule la base est utilisée pour plus de flexibilité, avec une connexion via Prisma afin de faciliter un éventuel changement de base de données
- Lucia (authentification) : bien qu’il ne soit plus maintenu, il sert de ressource d’apprentissage pour construire un système d’authentification avec Oslo, Argon2, Arctic, etc., permettant de mettre en place une solution sur mesure sans dépendre d’une solution tierce
- S3 (upload de fichiers) : en utilisant AWS S3, des URL pré-signées et AWS IAM, il est possible de mettre en place une solution de stockage de fichiers flexible et peu coûteuse ; la plupart des services tiers utilisent aussi la même API, ce qui facilite un changement de fournisseur si nécessaire
- Inngest (queue) : outil utilisé pour orchestrer des tâches complexes dans le back-end, adapté aux tâches en arrière-plan non sensibles au temps, et offrant un système de queue facile à configurer et à maintenir
- React Email + Resend : le premier permet de créer des templates d’e-mail avec des composants React, et le second constitue une excellente solution d’envoi d’e-mails ; le passage de Postmark à Resend a donné des résultats satisfaisants
- Vercel (hébergement) : solution d’hébergement pour applications full-stack utilisée depuis des années ; pour l’auto-hébergement, Hetzner/DigitalOcean et Coolify sont recommandés
- CloudFlare (domaine) : après diverses expériences de gestion de domaine, CloudFlare est actuellement utilisé avec satisfaction grâce à la qualité de son UI et à la possibilité d’ajouter des informations supplémentaires aux enregistrements DNS
- Stripe (passerelle de paiement) : passerelle de paiement utilisée depuis des années, offrant une excellente documentation et une bonne API, même si l’élargissement des fonctionnalités et du périmètre de l’API peut la rendre plus complexe
- Tests et outils : la combinaison de React Testing Library et Cypress/Playwright est un bon choix ; ESLint (à l’avenir Biome) et Prettier sont recommandés. Storybook est toujours utilisé pour la documentation UI, et
tsx sert à exécuter TypeScript dans le terminal
1 commentaires
Je découvre nuqs, merci.