Retour • 16/12/2024

Tech Stack React 2025 : Ma stack complète pour créer des applications web modernes

Écris par Melvyn Malherbe le 16/12/2024

Après des années à tester différentes technologies, j"ai enfin trouvé LA stack parfaite pour développer des applications web modernes. Je vais te partager tous les outils que j"utilise au quotidien et surtout pourquoi je les ai choisis.

Le Framework : Next.js

Next.js est devenu incontournable. C"est mon choix numéro 1 pour plusieurs raisons :

• Server Components natifs
• Server Actions intégrées
• Routing simple et efficace
• Optimisations automatiques
• Support TypeScript natif

Le Style : TailwindCSS + Shadcn/UI

TailwindCSS

TailwindCSS a révolutionné la façon dont on style nos applications. Plus besoin de:

• Gérer des fichiers CSS
• Inventer des noms de classes
• Se soucier des conflits de style

// Avant Tailwind 😢
<div className="container">
  <button className="primary-button">
    Click me
  </button>
</div>

// Avec Tailwind 😎
<div className="max-w-7xl mx-auto px-4">
  <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Click me
  </button>
</div>

Shadcn/UI

Shadcn/UI est LA révélation de 2024. Ce n"est pas vraiment une librairie de composants, mais plutôt une collection de composants que tu peux copier/coller dans ton projet.

La Gestion des Données

Server Components & Server Actions

Les Server Components sont devenus mon go-to pour afficher des données :

export default async function ProductList() {
  const products = await prisma.product.findMany();
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Tanstack Query

Pour les parties client, Tanstack Query est indispensable :

const { data, isLoading } = useQuery({
  queryKey: ["products"],
  queryFn: () => fetch("/api/products").then(res => res.json())
});

Zustand pour le State Client

J"ai déjà expliqué pourquoi Redux est mort, Zustand est maintenant mon choix numéro 1 pour le state management côté client :

const useStore = create((set) => ({
  isOpen: false,
  toggle: () => set((state) => ({ isOpen: !state.isOpen }))
}));

Base de Données & ORM

Neon.tech + Postgres

Neon.tech offre la meilleure expérience PostgreSQL :

• Scaling automatique
• Branches de base de données
• Prix imbattables
• Interface simple

Prisma ORM

Prisma reste le meilleur ORM malgré quelques débats :

// Définition du schéma
model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

// Utilisation
const user = await prisma.user.create({
  data: {
    email: "hello@example.com",
    name: "John"
  }
});

Les Services Essentiels

Authentification : Auth.js

Auth.js (anciennement NextAuth) est devenu un standard :

• Support de multiples providers
• Sécurité robuste
• API simple

Emails : React-email + Resend

La combinaison parfaite pour les emails :

import { Button } from "@react-email/button";

export default function WelcomeEmail() {
  return (
    <Button href="https://example.com">
      Welcome!
    </Button>
  );
}

Paiements : Stripe

Stripe reste imbattable pour :

• La documentation
• La fiabilité
• Les outils de test
• Le support

Déploiement & Monitoring

Vercel

20 projets pour 20$/mois ? C"est imbattable. Avec en plus :

• Déploiements automatiques
• Analytics
• Logs en temps réel
• Support exceptionnel

PostHog

Pour l"analytics, PostHog offre :

• Plan gratuit généreux
• A/B testing
• Feature flags
• Session recording

Conclusion

Cette stack technique me permet de créer des applications web modernes rapidement et efficacement. Elle combine :

• Performance
• Developer Experience
• Scalabilité
• Maintenance facile

Si tu veux approfondir certains sujets, je te conseille :

• Pourquoi Redux est mort
• Le guide complet du JSX
• Comment bien fetcher des données