React-Tech-Stack 2025

• Full-Stack React Tech Stack für 2025
  • Vorstellung nützlicher Technologien für die Entwicklung eines SaaS-Produkts oder eines Minimum Viable Product (MVP)
• Next.js: Ein React-basiertes Framework, das Funktionen wie Routing und Caching standardmäßig bereitstellt und über moderne React-Funktionen wie Server Components und Server Functions die Anbindung an das Backend unterstützt
• Astro: Ein optionales Tool zum Erstellen von Landingpages für Produkte, das für schnelle Landingpage-Entwicklung und eine bessere Developer Experience eingesetzt wird
• Server Components: Komponenten, die auf dem Server ausgeführt werden und dadurch z. B. Datenbankzugriffe ermöglichen; sie revolutionieren die Art, wie Full-Stack-React-Anwendungen entwickelt werden
• Server Functions: Eine Funktion, mit der serverseitiger Code aus React-Komponenten allein über Funktionsaufrufe ausgeführt werden kann; API-Endpunkte werden dabei automatisch erzeugt
• Server Actions: Eine Teilmenge der Server Functions; es gibt Bibliotheken zur Verbesserung der Nutzbarkeit, aber eine direkte Implementierung ist ebenfalls möglich
• Tailwind CSS: Ein empfohlenes Tool für schnelle Produktentwicklung und langfristige Wartbarkeit von CSS; hat man sich einmal daran gewöhnt, fällt die Rückkehr zu traditionellem CSS schwer
• Shadcn UI: Eine UI-Bibliothek, die sich nahtlos in Tailwind CSS integriert und mit ihrem versionslosen System einen frischen Ansatz für UI-Management bietet
• Lucide React: Eine zusammen mit Shadcn UI verwendete Icon-Bibliothek, die voraussichtlich nicht ersetzt werden muss, solange keine bessere Alternative auftaucht
• TypeScript: Der Industriestandard für JavaScript-Projekte, der die Developer Experience verbessert, Bugs reduziert und die Wartbarkeit des Codes erhöht
• Zod: Eine Validierungsbibliothek, die gut zu TypeScript passt und hauptsächlich für serverseitige Validierung verwendet wird; clientseitige Formulare nutzen native HTML-Validierung, um die Komplexität zu reduzieren
• nuqs: Ein Tool zur typsicheren Verwaltung von URL-State in Next.js, etwa für Suche, Sortierung oder Paginierung; in anderen Frameworks können eingebaute Funktionen oder andere Bibliotheken genutzt werden
• Zustand: Ein optionales Tool für clientseitiges State-Management, dessen Nutzung durch URL-State, clientseitiges Daten-Caching und die Weiterentwicklung servergetriebener React-Anwendungen zurückgeht
• React Query: Ein optionales Tool für komplexes clientseitiges Data Fetching wie Infinite Scroll; bei geringer Projektkomplexität reichen Server Components allein oft aus
• Prisma (ORM): Eine stabile Wahl als ORM; entsprechend aktueller Trends könnte es durch Drizzle ersetzt werden, derzeit wird jedoch Prisma bevorzugt
• Supabase (Datenbank): Ein Dienst, der eine Postgres-Datenbank bereitstellt; um flexibel zu bleiben, wird nur die Datenbank genutzt und über Prisma angebunden, was einen späteren Wechsel zu einer anderen Datenbank erleichtert
• Lucia (Authentifizierung): Wird nicht mehr gepflegt, dient aber als Lernmaterial für den Aufbau eines Authentifizierungssystems mit Oslo, Argon2, Arctic usw., sodass ein maßgeschneidertes System ohne Abhängigkeit von Drittanbieterlösungen umgesetzt werden kann
• S3 (Datei-Upload): Mit AWS S3, Presigned URLs und AWS IAM lässt sich eine flexible und kostengünstige Dateispeicherlösung aufbauen; da die meisten Drittanbieterdienste dieselbe API nutzen, ist ein Anbieterwechsel bei Bedarf unkompliziert
• Inngest (Queue): Ein Tool zur Orchestrierung komplexer Aufgaben im Backend, geeignet für zeitunkritische Hintergrundjobs, das ein leicht einzurichtendes und wartbares Queue-System bietet
• React Email + Resend: Ersteres ermöglicht das Erstellen von E-Mail-Templates mit React-Komponenten, Letzteres ist eine hervorragende Lösung für den E-Mail-Versand; der Wechsel vom zuvor genutzten Postmark zu Resend war erfolgreich
• Vercel (Hosting): Eine Hosting-Lösung für Full-Stack-Anwendungen, die seit Jahren verwendet wird; für Self-Hosting werden alternativ Hetzner/DigitalOcean und Coolify empfohlen
• CloudFlare (Domain): Nach verschiedenen Erfahrungen mit Domain-Management wird CloudFlare derzeit wegen der guten UI und der Möglichkeit, DNS-Records mit zusätzlichen Informationen zu versehen, zufriedenstellend genutzt
• Stripe (Payment Gateway): Ein seit Jahren genutztes Payment Gateway mit hervorragender Dokumentation und API, das jedoch durch seinen wachsenden Funktionsumfang und die größere API-Oberfläche komplexer werden kann
• Testing und Tools: Eine gute Wahl ist die Kombination aus React Testing Library und Cypress/Playwright; empfohlen werden außerdem ESLint (zukünftig Biome) und Prettier. Für UI-Dokumentation wird weiterhin Storybook verwendet, und zum Ausführen von TypeScript im Terminal kommt tsx zum Einsatz

[moon5g]

Ich lerne nuqs kennen, danke.