nextjs firebase startup-stack react ai-agents vercel

Eine Start-up-Web-Stack für das Zeitalter der KI-Agenten: Next.js, MUI und Firebase

Eine Start-up-Web-Stack-Lösung für das Zeitalter der Coding-Agenten: Next.js, MUI, Firebase, Vercel und PostHog, inklusive einer minimalen Agent-Einrichtung sowie der Begründung für jede Wahl.

Verlag: REACTAPP.TOPAuf dieser Website hinzugefügt 28. Okt. 202611 Min. Lesezeit2423 Wörter

Quellen: The Teach Stack for Building Full-Stack Apps in the AI-Agentic Era (2026 Edition)

Die Wahl der Technologien, wenn der Code teilweise maschinell erstellt wird

Programmier-Assistenten wie Claude Code und Codex haben die Art und Weise verändert, wie Software entwickelt wird. Die Iterationsgeschwindigkeit ist deutlich höher, was nur dann von Vorteil ist, wenn der Code weiterhin wartbar und skalierbar genug bleibt, damit das Projekt weiterentwickelt werden kann.

Startups in der Anfangsphase sind von der Geschwindigkeit der Iteration abhängig. Anforderungen ändern sich schnell, neue Funktionen werden täglich hinzugefügt und der Code wird ständig umgeschrieben. In solchen Umgebungen müssen die gewählten Technologien schnelle Änderungen ermöglichen, ohne die Benutzererfahrung zu verschlechtern.

Der unten aufgeführte Technologien-Stack basiert auf etwa vier Jahren des Ausprobierens moderner Tools auf einer echten Lernplattform. Er umfasst Authentifizierung, Benutzeroberfläche, Backend, Hosting, Testing und mehr. Das Ziel ist stets eine schnelle Entwicklung auf einer Codebasis, die von Menschen weiterhin gewartet werden kann, zusammen mit einer skalierbaren Infrastruktur.

Assistenten und Code einfach halten

Agenten machen schnelle Verbesserungen einfach: Fehlerbehebungen, neue Funktionen sowie Leistungsoptimierungen werden alle schnell bereitgestellt. Sie erleichtern außerdem das Über-Engineering, da das Hinzufügen von Tausenden von Zeilen trivial ist. Die Disziplin besteht darin, sich davor zu halten, Probleme zu lösen, die noch nicht existieren, und den Code, die Infrastruktur sowie die Benutzererfahrung einfach zu halten.

Auch in dieser Ära der agentbasierten Entwicklung hilft eine kleine, einfache Einrichtung. Agenten koordinieren sich besser, Funktionen werden schneller veröffentlicht, Fehler sind leichter zu beheben, und die Menschen können weiterhin das Bestehende warten.

Der Ansatz bei Agenten im Produktionscode ist ausgewogen und die Einrichtung ist bescheiden:

Halten Sie AGENTS.md oder CLAUDE.md so kurz wie möglich. Fügen Sie nur das hinein, was in jeder Konversation wiederholt wird, sowie projektbezogene Details, bei denen die Agenten ständig Fehler machen.
Überdimensionale Anweisungsdateien können die Leistung eines Modells beeinträchtigen und es weniger nützlich machen.

Installieren Sie nur die Fähigkeiten, die für ein Gespräch benötigt werden, und deinstallieren Sie sie, wenn es beendet ist.

Weniger Fähigkeiten sowie ein kleineres Anleitungspaket funktionieren in der Regel besser als mehr davon.

Einige Fähigkeiten sind nützlich, sollten aber nicht dauerhaft installiert bleiben, da ihre Anwesenheit das Kontextfenster belastet. Nützliche Bereiche sind UI/UX-Design, React und Next.js, Firebase sowie PostHog.

Auf MCP-Servern bietet PostHog einfachen Zugang zu Fehlerrückverfolgungen und Protokollen, was das Debuggen beschleunigt. Context7 stellt dem Modell aktuelle Bibliotheksdokumentationen zur Verfügung, sodass Agenten die neuesten Dokumente zu Bibliotheken und Frameworks einsehen können. Meistens schaffen es Agenten ohne Hilfe eines MCP- Servers, Probleme zu lösen, weshalb deren Aktivierung nur selten notwendig ist.

Die Faustregel lautet, dass jedes zusätzliche Tool, jede zusätzliche Fähigkeit oder jeder zusätzliche Server um die Aufmerksamkeit des Modells konkurriert. Alles, was in der aktuellen Aufgabe keinen Platz findet, sollte besser weggelassen werden, und die Konfiguration kann immer wieder überprüft werden, sobald ein wiederkehrender Fehler auftritt, den eine einzeilige Anweisung beheben könnte.

Frontend: React und Next.js

React ist die bevorzugte Wahl für den Kern vieler Full-Stack-Projekte. Vue und Svelte sind ebenfalls Optionen, doch Reacts umfangreiches Bibliotheksökosystem macht das Hinzufügen von Funktionen sowie Richtungswechsel einfacher – deshalb bevorzugen Entwickler es.

Der Schwachpunkt sind Suchmaschinen. Google und Bing verwenden Bots, die die HTML-Struktur einer Seite lesen, und eine React-Seite beginnt in der Regel mit einem leeren Body vom Server. Damit eine Website in den Suchergebnissen erscheint, muss die erste Antwort vom Server HTML enthalten, das mit den richtigen Seiteninformationen gefüllt ist.

Next.js kümmert sich darum. Es handelt sich um ein React-Framework, das Server-Seitenausgabe sowie statische Generierung bietet, sodass die Seiten zunächst auf dem Server gerendert werden und das HTML anschließend an den Browser gesendet wird. Dadurch enthält der anfängliche Inhalt bereits alles, was Boten benötigen. Danach wird nur das notwendige JavaScript an den Client gesendet, wodurch das Bundle klein bleibt. Sowohl die Benutzererfahrung als auch die Verständlichkeit durch Crawler verbessern sich dadurch.

Der aktuelle Standard in Next.js-Projekten ist der App Router, der Funktionen wie inkrementelle statische Regeneration und teilweise vorherige Renderung einfach nutzbar macht und dadurch ein schnelleres Erlebnis bietet. Neue Projekte sollten mit ihm beginnen.

React bewegt sich in Richtung Serverseite und nähert sich in gewissem Maße in seiner Philosophie PHP an. Der App Router bietet eine gute Entwicklererfahrung für componentbasierte Ansätze, bei denen der Server im Vordergrund steht. Caching, Turbopack sowie eine agentfreundliche Einrichtung ermöglichen ein schnelles Erstellen und Anpassen von Anwendungen.

UI: Eine Komponentenbibliothek statt individuellen Designs

Bei der traditionellen Webentwicklung folgt man einem Prozess aus Planung, UI/UX-Design, Implementierung sowie zahlreichen Rück- und Vorwärtswechseln zwischen Designern und Entwicklern. Startups können sich keinen langen Entwicklungszyklus leisten.

Der effizienteste Ansatz besteht darin, ein solides UI-Framework – in diesem Fall MUI – zu wählen und ein Designvorlage zu verwenden. Eine Alternative ist, dass ein Designer alles in Figma entwirft und anschließend die Entwickler es in React umsetzen. Durch die Beibehaltung einer einzigen Quelle der Wahrheit im Codebasis wurden Monate eingespart.

MUI bietet eine umfangreiche Sammlung an anpassbaren Komponenten, die gängige Anforderungen abdecken. Alles kann geändert werden, doch die Standardeinstellungen sind so gut, dass die meisten Komponenten mit ihrem ursprünglichen Verhalten und Aussehen verwendet werden. Zudem enthält MUI eine große Sammlung an Icons, die als React-Komponenten genutzt werden können, sodass deren Einbindung unkompliziert ist.

Es gibt auch Alternativen:

shadcn/ui ist modern und beliebt, obwohl das Kopieren von Bibliothekskod in die eigene Codebasis über eine CLI von einigen als fragwürdige Praxis angesehen wird.
Ant Design ist eine ausgezeichnete Alternative.
Chakra UI fungiert ebenfalls als UI-Framework.
HeroUI, früher NextUI, ist ebenfalls gut geeignet.

Manche bevorzugen styled-components oder Tailwind CSS. Bei beiden muss dennoch viel CSS geschrieben werden, was im Vergleich zu einem UI-Framework die Entwicklererfahrung beeinträchtigt – insbesondere wenn das Ziel darin besteht, nicht jede Seite von Grund auf zu entwerfen.

Zur Inspiration helfen Template-Store. Der eigene Store von MUI bietet viele attraktive UI-Template, und auf Dribbble finden sich ebenfalls React-Template. Eine weitere Möglichkeit besteht darin, einen Designer zu beauftragen, mehrere Prototypen zu erstellen, den besten auszuwählen; zudem verbessert das Beherrschen von UI/UX-Fähigkeiten die Ergebnisse.

Formulare

Formulare machen einen großen Teil der Full-Stack-Arbeit aus. Zod und React Hook Form ergänzen sich hervorragend und decken fast alles ab. Zod kümmert sich um die Schema-Validierung, einschließlich von Typen, Grenzwerten, Längen und Enums, während React Hook Form eine flexible API zur Interaktion mit dem Formular bietet. Gemeinsam ermöglichen sie verschachtelte Komponenten, die ein gemeinsames Formular teilen, komplexe Validierungen sowie Echtzeit-Updates der Daten. Formulare erscheinen dadurch fast zu einfach.

Da das Validierungsschema ein einfaches, für TypeScript geeignetes Objekt ist, können dieselben Regeln beschreiben, was ein Formular akzeptiert und was eine Backend-Funktion erwartet. Dadurch entfallen viele Unstimmigkeiten zwischen dem, was die Benutzeroberfläche zulässt, und dem, was der Server ablehnt, und Agenten können ein Schema weitaus zuverlässiger lesen als Validierungslogik, die über verschiedene Handler verteilt ist.

Backend, Authentifizierung und Datenbank

Firebase und Supabase bieten Backend-as-a-Service an, der sich auf Millionen von Nutzern skalieren lässt, ohne dass man eigene Infrastruktur warten muss. In diesem Stack wird Firebase für die Authentifizierung, das Speichern, die Firestore-Datenbank sowie serverlose Funktionen verwendet, die benutzerdefinierte Backend-Logik enthalten.

Authentifizierung

Clerk ist ein solides Produkt für die Authentifizierung, doch das Standardsystem von Firebase funktioniert hier ebenfalls gut genug. Firebase stellt außerdem ein Paket namens firebaseui-web bereit, mit dem die Authentifizierung ohne das Schreiben von UI-Code eingerichtet werden kann. Damit alles reibungslos funktioniert, wird die Next.js-Anwendung außerdem auf einer dedizierten Auth-Subdomain bereitgestellt, damit Firebase das Anmelden problemlos handhaben kann.

Datenbank

In einer traditionellen Architektur mit getrenntem Frontend und Backend, das über eine Datenbank verfügt, löst das Frontend viele API-Aufrufe aus, die Datenbankeinträge ändern. In vielen Projekten entfallen etwa 80 % dieser Aufrufe auf einfache CRUD-Operationen, während die restlichen 20 % komplexer sind, beispielsweise durch das Aktualisieren mehrerer Einträge oder die Aggregation von Daten aus verschiedenen Quellen. Firebase ist auf diese 80 % ausgerichtet, wodurch es einfach ist, Daten vom Frontend aus zu manipulieren, ohne überflüssige Endpunkte.

Zwei Komponenten sorgen dafür, dass dies funktioniert.

Firestore-Regeln. Zugriffskontrolle und Berechtigungen befinden sich in einer Datei, firestore.rules. Die API-Endpunkte müssen in jeder Funktion keine Berechtigungen überprüfen, da Firebase automatisch prüft, ob ein Benutzer Daten lesen oder sie erstellen, aktualisieren oder löschen darf. Diese Trennung beseitigt viel Overhead.
Firestore-Client-SDK. Das Erstellen, Lesen, Aktualisieren und Löschen von Daten erfolgt über das Firebase-SDK, das außerdem Echtzeit-Listener, Zählererhöhungen und gebündelte Aktualisierungen unterstützt – all das wird automatisch gegenüber firestore.rules überprüft.

Es gibt einen wichtigen Aspekt: das Konzept zur Datenspeicherung. Firestore ist auf Lesevorgänge optimiert, die in der Regel überwiegen, weshalb es eine denormalisierte Datenstruktur fördert. Für Personen mit SQL-Erfahrung kann das ungewöhnlich erscheinen; ein guter Vortrag über das Datenmodellierung in Firestore lohnt sich daher, anzuschauen.

Insgesamt bietet Firestore eine hervorragende Benutzererfahrung, insbesondere dank der Echtzeit-Änderungslistener, sowie eine gute Entwicklererfahrung, die es der Anwendung ermöglicht, sich schnell an wechselnde Anforderungen anzupassen.

Neue Projekte sollten am besten in der Enterprise-Edition von Firestore im Native-Modus gestartet werden. Sie bietet Funktionen, die in der älteren Standard-Ebene fehlen, wie Pipeline-Abfragen und eine integrierte Volltextsuche, wodurch die Flexibilität einer MongoDB-ähnlichen Datenbank zusammen mit der Benutzerfreundlichkeit von Firestore entsteht.

Serverless-Funktionen

Der Client-Code bleibt absichtlich einfach, wobei die relevanten Teile im Backend-Code innerhalb der Serverless-Funktionen isoliert sind. Die Trennung in einen einfachen Frontend- und einen intelligenten Backend-Teil hat sich gut bewährt. Firebase Functions können jeden Backend-Code enthalten und durch eine einfache HTTP-Anfrage, durch die Erstellung oder Aktualisierung einer Firestore-Einträge oder als Cron-Job über Pub/Sub ausgelöst werden. Alle serverseitigen Funktionalitäten können somit in separaten, eigenständigen Funktionen untergebracht werden.

Tools wie Firebase für BaaS sparen viel Zeit und funktionieren im Allgemeinen problemlos. Das Beheben von Problemen durch Unregelmäßigkeiten in der Datenbank oder fehlgeschlagene Migrationsvorgänge kommt nur selten vor.

KI-Funktionen

KI ist ein wesentlicher Bestandteil moderner Webanwendungen, und viele Produkte integrieren Chatbots sowie KI-Agenten. Vercels KI SDK kümmert sich um die Integration mit verschiedenen Modellanbietern sowie um die Erstellung eigener Agenten. Seine Stärke liegt darin, wie einfach es ist, verschiedene Modelle anzuschließen und zwischen ihnen zu wechseln – mit einer verbesserten Entwicklererfahrung im Vergleich zu jedem modellspezifischen SDK.

Tests

Testing ist vermutlich das umstrittenste Thema, insbesondere für Startups mit ständig wechselnden Anforderungen. In den Anfängen gab es keine Tests. Als das Produkt wuchs, wurde es fast unmöglich, den vorhandenen Code zu ändern, ohne sicher zu sein, dass die Produktion weiterhin funktioniert, weshalb Tests für den Backend-Bereich eingeführt wurden – genauer gesagt für die Service-Schicht von Firebase Functions. Der Frontend-Bereich bleibt ungetestet, weil er einfach gehalten wird, während der komplexe Backend-Bereich gegen Randfälle getestet wird.

Backend-Tests verwenden Jest, wobei faker.js dazu dient, innerhalb der Tests falsche Daten zu erzeugen. Sie laufen in einem separaten Firebase-Projekt, sodass die Produktion unberührt bleibt und schnelle Iterationen ohne Sorge um Auswirkungen auf Nutzer möglich sind. Sobald die Tests bestehen, wird die neue Version von Functions in die Produktion geschickt.

Der Grund für das Testen nur des Backends liegt im Kostenaspekt. Ein Frontend, das lediglich Daten anzeigt und Funktionen aufruft, weist nur wenig Logik auf, die überprüft werden müsste, und UI-Tests brechen in der Regel immer dann zusammen, wenn sich das Design ändert – was bei einem jungen Produkt ständig der Fall ist. Die Logik im Backend ist der Bereich, in dem eine stillschweigende Regression Daten verfälschen oder einen Benutzer falsch belasten kann, weshalb sich die Anstrengungen dort konzentrieren.

Refactoring

Wenn ein Projekt wächst, sich Funktionen ändern, Anforderungen verschieben und Dinge altert, wird Refactoring unvermeidlich. Zwei Faktoren tragen am meisten dazu bei, Code mit Sicherheit zu modifizieren: TypeScript und solide Integrationstests. TypeScript bewahrt die Typen auch nach Änderungen, und die Integrationstests bestätigen, dass die Logik weiterhin funktioniert.

Refactoring kommt häufiger vor, als man erwarten würde. Es gab noch nie einen Zeitraum von sechs Monaten ohne eine größere Refaktorierung, denn die Plattform ändert sich ständig und die Einführung neuer Technologien erfordert umfangreiche Codeänderungen. Die beiden wichtigsten Meilensteine waren der Umstieg von reinem React auf Next.js und anschließend vom Next.js Pages Router auf den App Router.

Hosting

Da der Backend-Teil vollständig auf Firebase (Google Cloud) basiert, wird der Frontend-Teil auf Vercel bereitgestellt, das die bequemste Infrastruktur für die Veröffentlichung von Next.js bietet. Die Integration mit GitHub funktioniert gut mit Branches und erfordert keine manuelle Einrichtung:

Ein Push in die main-Branch wird automatisch in die Produktion bereitgestellt.
Ein Push in eine andere Branch triggert eine Preview-Bereitstellung mit eigener URL, sodass jede Branch live angezeigt werden kann – was das schnelle und einfache Iterieren ermöglicht.

Die Überprüfung einer Änderung bedeutet also, einen Link zu öffnen, anstatt einen Branch herunterzuladen und ihn lokal auszuführen – was sich für ein kleines Team eignet, in dem Designer, Produktentwickler und Ingenieure alle die Arbeit in Bearbeitung sehen möchten, ohne auf ihren eigenen Maschinen etwas einrichten zu müssen.

Analysen und Überwachung

Es ist wertvoll zu wissen, wer die Nutzer sind und wie sie das Produkt nutzen. Dadurch können Wochen oder Monate an Entwicklungszeit eingespart werden, indem gezeigt wird, was priorisiert werden sollte, und eine gute Überwachung verbessert das Erlebnis, indem häufige Fehler aufgedeckt werden.

PostHog bietet hier allgemeine Analysen und Produktüberwachung, einschließlich Sitzungswiedergabe, Ausnahmenerfassung, Protokollen und Produkt-Source-Maps. Google Analytics for Firebase ist eine kostenlose Alternative, die jedoch mehr Einrichtung erfordert, während Sentry etwas teurer ist. Alle helfen dabei, die Nutzer besser kennenzulernen, doch nichts ersetzt ein direktes Gespräch mit ihnen.

E-Mail

E-Mails bleiben eine der zuverlässigsten Methoden, um mit Nutzern in Kontakt zu bleiben, Updates zu senden und ihre Engagement zu gewährleisten. Der Technologiestack wurde kürzlich von Sendgrid auf react-email zusammen mit Resend umgestellt.

react-email ermöglicht hochgradig anpassbare E-Mails, indem jede E-Mail in einen React-Komponenten umgewandelt wird. Resend integriert sich gut damit und bietet günstige Preise. Da es sich bei E-Mails um React-Komponenten handelt, werden sie zusammen mit dem Rest des Codes unter Versionskontrolle gehalten, sodass jede Änderung an einem Ort nachverfolgt werden kann.

Das Vorschauen und Testen von Vorlagen ist genauso einfach, da derselbe Komponente während der Entwicklung im Browser dargestellt wird und das HTML erzeugt, das schließlich in die Postfächer gelangt.