Stack webowy dla startupów w erze agentów AI: Next.js, MUI i Firebase
Webowa platforma dla startupów w erze agentów programistycznych: Next.js, MUI, Firebase, Vercel i PostHog, wraz z minimalnym ustawieniem agenta i uzasadnieniem każdego wyboru.
Źródła: The Teach Stack for Building Full-Stack Apps in the AI-Agentic Era (2026 Edition)
Wybór technologii, gdy kod jest częściowo napisany ręcznie
Agenty do programowania, takie jak Claude Code i Codex, zmieniły sposób tworzenia oprogramowania. Iteracje odbywają się znacznie szybciej, co jest korzystne tylko wtedy, gdy kod pozostaje wystarczająco łatwy w utrzymaniu i skalowalny, aby projekt mógł się dalej rozwijać.
Startupy we wczesnej fazie rozwoju polegają na szybkości iteracji. Wymagania zmieniają się szybko, nowe funkcje pojawiają się codziennie, a kod jest ciągle przepisywany. W takich warunkach wybrane technologie muszą umożliwiać szybkie zmiany bez pogorszenia doświadczenia użytkownika.
Technologie przedstawione poniżej pochodzą z około czterech lat eksperymentowania z nowoczesnymi narzędziami na rzeczywistej platformie edukacyjnej. Obejmują one autoryzację, interfejs użytkownika, warstwę backendową, hostowanie, testowanie i wiele innych elementów; celem jest szybkie budowanie aplikacji na bazie kodu, który nadal może być utrzymywany przez ludzi, przy jednoczesnym posiadaniu infrastruktury zdolnej do skalowania.
Utrzymywanie prostoty agentów i kodu
Agenty ułatwiają szybkie ulepszenia: poprawki błędów, nowe funkcje oraz optymalizacje wydajności pojawiają się błyskawicznie. Ułatwiają również nadmierną skomplikowanie architektury, ponieważ dodanie tysięcy linijek kodu jest błahostką. Należy zachować dyscyplinę, unikając rozwiązywania problemów, które jeszcze nie istnieją, oraz utrzymywać prostotę kodu, infrastruktury i doświadczenia użytkownika.
Niewielka, prosta konfiguracja jest przydatna nawet w obecnej erze rozwoju opartego na agentach. Agenty lepiej się koordynują, funkcje trafiają na rynek szybciej, błędy są łatwiejsze do naprawienia, a ludzie mogą nadal utrzymywać to, co już istnieje.
Podejście do agentów w kodzie produkcyjnym jest zrównoważone, a konfiguracja jest skromna:
- Trzymaj pliki
AGENTS.mdlubCLAUDE.mdtak krótkie, jak to możliwe. Umieść w nich tylko to, co powtarza się we wszystkich rozmowach, wraz z szczegółami specyficznymi dla projektu, które agenci ciągle błędnie interpretują. - Zbyt duże pliki z instrukcjami mogą pogorszyć wydajność modelu i uczynić go mniej przydatnym.
Na serwerach MCP serwer PostHog umożliwia łatwy dostęp do śladów błędów i logów, co przyspiesza debugowanie. Context7 dostarcza aktualną dokumentację bibliotek modelowi, dzięki czemu agenci mogą korzystać z najnowszych informacji na temat bibliotek i frameworków. Przez większość czasu agenci potrafią rozwiązać problemy bez pomocy serwera MCP, więc ich włączanie jest rzadko konieczne.
Zasada ogólna brzmi tak, że każde dodatkowe narzędzie, umiejętność lub serwer konkuje o uwagę modelu. Wszystko, co nie zasłużyło na miejsce w bieżącym zadaniu, lepiej pominąć, a konfigurację można ponownie przeanalizować wtedy, gdy pojawi się powtarzający się błąd, który dałoby się naprawić jedną instrukcją.
Frontend: React i Next.js
React jest najczęściej wybieranym narzędziem do tworzenia rdzenia wielu projektów full-stack. Vue i Svelte również są opcjami, ale duży ekosystem bibliotek React ułatwia dodawanie funkcji i zmianę kierunku rozwoju, dlatego deweloperzy preferują go.
Słabym punktem są wyszukiwarki. Google i Bing używają botów, które czytają HTML strony, a strona z React zazwyczaj otrzymuje od serwera puste ciało strony. Aby strona pojawiła się w wynikach wyszukiwania, pierwsza odpowiedź od serwera musi zawierać HTML wypełnione odpowiednimi informacjami o stronie.
Next.js zajmuje się tym. Jest to framework React oferujący renderowanie po stronie serwera oraz generowanie statyczne, dzięki czemu strony są najpierw renderowane na serwerze, a następnie HTML jest wysyłany do przeglądarki – to oznacza, że początkowa treść zawiera wszystko, czego potrzebują boty. Później na klienta trafia tylko niezbędny JavaScript, co sprawia, że plik jest niewielki. Poprawia się zarówno doświadczenie użytkownika, jak i zrozumienie przez roboty przeglądarek.
Obecnym standardem w projektach Next.js jest app router, który ułatwia korzystanie z funkcji takich jak stopniowe regenerowanie treści statycznych i częściowe renderowanie z góry, co sprawia, że aplikacja działa szybciej. Nowe projekty powinny rozpoczynać się od niego.
React zmierza w kierunku obsługi po stronie serwera, stając się nieco bardziej podobny do PHP pod względem filozofii, a app router oferuje dobre doświadczenie programisty przy pracy z komponentami renderowanymi najpierw na serwerze. Cache, Turbopack oraz udogodnienia dla agentów przyspieszają proces tworzenia i modyfikacji aplikacji.
UI: biblioteka komponentów zamiast projektu dostosowanego pod potrzeby
Tradycyjne rozwijanie stron internetowych obejmuje planowanie, projektowanie interfejsu użytkownika i doświadczenia użytkownika, implementację oraz liczne rundy konsultacji pomiędzy projektantami a programistami. Startupy nie mogą sobie pozwolić na długi cykl pracy.
Najskuteczniejszym podejściem jest wybór solidnego frameworka UI, w tym przypadku MUI, oraz stosowanie szablonu projektowego. Alternatywą jest zlecenie projektantowi narysowania wszystkiego w Figma, a następnie przepisanie tego przez programistów w React. Zachowanie jednego źródła prawdy w bazie kodu zaoszczędziło miesiące pracy.
MUI oferuje bogatą kolekcję komponentów dostosowalnych, które odpowiadają na najczęstsze potrzeby. Wszystko można zmienić, ale ustawienia domyślne są na tyle dobre, że większość komponentów jest używana z ich standardowym zachowaniem i wyglądem. Ponadto dostarcza dużą kolekcję ikon, które można wykorzystać jako komponenty React, więc ich dodanie jest proste.
Istnieją również inne alternatywy:
- shadcn/ui jest nowoczesny i popularny, chociaż kopiowanie kodu biblioteki do własnego kodu za pomocą CLI jest przez niektórych uważane za wątpliwą praktykę.
- Ant Design to solidna opcja.
- Chakra UI również funkcjonuje jako framework interfejsu użytkownika.
- HeroUI, wcześniej znany jako NextUI, też jest dobrym wyborem.
Część osób woli styled-components lub Tailwind CSS. W obu przypadkach nadal trzeba pisać dużo kodu CSS, co w porównaniu z frameworkiem interfejsu użytkownika pogarsza doświadczenie programisty, szczególnie gdy celem jest uniknięcie projektowania każdej strony od zera.
Aby znaleźć inspirację, przydatne są sklepy z szablonami. Własny sklep MUI oferuje wiele atrakcyjnych szablonów interfejsu, a Dribbble zawiera również szablony dla React. Inną drogą jest poproszenie agenta o stworzenie kilku prototypów i wybranie najlepszego, a posiadanie umiejętności w zakresie UI/UX poprawia jakość powstałych rozwiązań.
Formularze
Formularze stanowią dużą część pracy w podejściu full-stack. Zod i React Hook Form dobrze do siebie pasują i obejmują praktycznie wszystko. Zod zajmuje się walidacją schematu, w tym typami, granicami, długością oraz wartościami z listy, natomiast React Hook Form oferuje elastyczną API do interakcji z formularzem. Razem umożliwiają one komponenty nawarstwione, które dzielą się jednym formularzem, złożoną walidację oraz aktualizacje danych w czasie rzeczywistym. Formularze zaczynają wydawać się niemal zbyt proste.
Ponieważ schemat walidacji to zwykły obiekt przyjazny dla TypeScript, te same zasady mogą opisywać, co formularz przyjmuje, a co oczekuje funkcja backendu. To eliminuje całą klasę niezgodności pomiędzy tym, co pozwala interfejs użytkownika, a tym, co odrzuca serwer, a agenty mogą odczytywać schemat znacznie bardziej niezawodnie niż logikę walidacji rozproszoną w różnych obsługach.
Backend, autoryzacja i baza danych
Firebase i Supabase oferują usługę backendu, która może obsłużyć miliony użytkowników, bez konieczności utrzymywania własnej infrastruktury. W tym rozwiązaniu używa się Firebase do autoryzacji, przechowywania danych, bazy danych Firestore oraz funkcji serverless, które realizują specyficzną logikę backendu.
Autoryzacja
Clerk to solidne narzędzie do autoryzacji, ale domyślny system Firebase również sprawdza się doskonale. Firebase dostarcza również pakiet o nazwie firebaseui-web, który umożliwia konfigurację autoryzacji bez pisania żadnego kodu interfejsu użytkownika. Aby wszystko działało płynnie, aplikacja Next.js jest również rozpakowywana na dedykowanym poddomenie do celów autoryzacji, dzięki czemu Firebase może bez problemów obsługiwać proces logowania.
Baza danych
W tradycyjnym podejściu, z oddzielnym interfejsem użytkownika i serwerem bazodanowym, interfejs wywołuje wiele żądań API, które zmieniają dane w bazie. W wielu projektach około 80% tych żądań to proste operacje CRUD, a pozostałe 20% to operacje bardziej złożone, takie jak aktualizacja kilku wpisów lub agregacja danych z kilku źródeł. Firebase optymalizuje się pod kątem tych 80%, co ułatwia manipulację danymi z interfejsu bez konieczności używania zbędnych punktów końcowych.
Dwa komponenty umożliwiają to działanie.
- Zasady Firestore. Kontrola dostępu i uprawnienia znajdują się w jednym pliku,
firestore.rules. Punkty końcowe API nie muszą sprawdzać uprawnień w każdej funkcji, ponieważ Firebase automatycznie weryfikuje, czy użytkownik może odczytać dane lub je utworzyć, zaktualizować lub usunąć. Ta separacja eliminuje dużo zbędnego kodu. - Firestore client SDK. Tworzenie, odczytywanie, aktualizowanie i usuwanie danych odbywa się za pośrednictwem Firebase SDK, które obsługuje również słuchacze w czasie rzeczywistym, zwiększanie liczników oraz aktualizacje pakietowe, przy czym wszystko to jest automatycznie sprawdzane pod kątem
firestore.rules.
Istnieje jednak jedna uwaga dotycząca modelu mentalnego związanego z przechowywaniem danych. Firestore jest zoptymalizowany pod kątem odczytów, które zazwyczaj stanowią większość operacji, dlatego promuje dane denormalizowane. Dla osób przyzwyczajonych do SQL może to wydawać się nienaturalne, więc warto obejrzeć dobry wykład na temat modelowania danych w Firestore.
Ogólnie rzecz biorąc, Firestore zapewnia doskonałe doświadczenie użytkownika, szczególnie dzięki słuchaczom zmian w czasie rzeczywistym, a także dobre doświadczenie programisty, umożliwiając aplikacji szybką adaptację do zmieniających się potrzeb.
Najlepiej rozpoczynać nowe projekty w edycji Enterprise Firestore w trybie Native. Dostarcza ona funkcji brakujących w starszym poziomie standardowym, takich jak zapytania typu pipeline oraz wbudowana wyszukiwarka pełnego tekstu, oferując elastyczność typową dla bazy danych podobnej do MongoDB w połączeniu z łatwością użycia Firestore.
Funkcje serverless
Kod klienta pozostaje celowo prosty, a złożone elementy są izolowane w kodzie backendowym znajdującym się w funkcjach serverless. Takie rozwiązanie, polegające na prostocie frontendu i zaawansowaniu backendu, sprawdziło się doskonale. Firebase Functions mogą zawierać dowolny kod backendowy i mogą być uruchamiane na żądanie prostego zapytania HTTP, po utworzeniu lub aktualizacji wpisu w Firestore, lub według harmonogramu jako zadań cron za pośrednictwem Pub/Sub. Wszystkie funkcje serwerowe mogą więc znajdować się w oddzielnych, samodzielnych funkcjach.
Narzędzia typu BaaS, takie jak Firebase, oszczędzają mnóstwo czasu i przede wszystkim działają skutecznie. Naprawianie problemów spowodowanych nieprawidłowościami w bazie danych lub nieudanymi migracjami jest rzadkością.
Funkcje AI
Sztuczna inteligencja stanowi istotną część nowoczesnych aplikacji internetowych, a wiele produktów integruje w sobie chatboty i agenty. SDK AI Vercel umożliwia integrację z różnymi dostawcami modeli oraz tworzenie dostosowanych agentów. Jego zaletą jest łatwość podłączania różnych modeli i przepinania się między nimi, co zapewnia lepsze doświadczenie programisty niż jakikolwiek SDK specyficzne dla konkretnego modelu.
Testy
Testowanie jest prawdopodobnie najbardziej kontrowersyjnym tematem, szczególnie w przypadku startupów o ciągle zmieniających się wymaganiach. Na początku nie istniały żadne testy. W miarę rozwoju produktu zmiana istniejącego kodu z pewnością, że system nadal będzie działał, stała się niemal niemożliwa, dlatego wprowadzono testy dla warstwy backendowej, a konkretnie warstwy usług Firebase Functions. Frontend nie jest testowany, ponieważ pozostawia się go prostym, natomiast zaawansowana warstwa backendowa jest testowana pod kątem skrajnych przypadków.
Testy backendu wykorzystują narzędzie Jest w połączeniu z faker.js do generowania fałszywych danych w trakcie testów. Przeprowadzane są one w oddzielnym projekcie Firebase, dzięki czemu produkcja pozostaje nietknięta, co umożliwia szybkie iteracje bez obaw o wpływ na użytkowników. Gdy testy się udają, nowa wersja Functions trafia do produkcji.
Uzasadnieniem testowania wyłącznie warstwy backend jest koszt. Frontend, który jedynie wyświetla dane i wywołuje funkcje, ma niewiele logiki wymagającej weryfikacji, a testy interfejsu użytkownika często przestają działać przy zmianach w projekcie, co w młodym produkcie zdarza się ciągle. To właśnie w logice backendu cicha regresja może spowodować uszkodzenie danych lub błędne obciążenie użytkownika, dlatego tam skupia się wysiłek.
Refaktoryzacja
W miarę rozwoju projektu funkcje się zmieniają, wymagania ewoluują, a elementy starzeją się, więc refaktoryzacja staje się nieunikniona. Dwie rzeczy w największym stopniu przyczyniają się do pewnego modyfikowania kodu: TypeScript oraz solidne testy integracyjne. TypeScript zapewnia bezpieczeństwo typów po wprowadzonych zmianach, a testy integracyjne potwierdzają, że logika nadal funkcjonuje poprawnie.
Refaktoryzacja występuje częściej, niż się spodziewa. Nie było okresu sześciu miesięcy bez jakiejś dużej refaktoryzacji, ponieważ platforma ciągle się zmienia, a przyjmowanie nowych technologii pociąga za sobą znaczne zmiany w kodzie. Dwie najważniejsze etapy to przejście z zwykłego React na Next.js, a następnie z routera pages w Next.js na routera app.
Hosting
Ponieważ warstwa backendowa znajduje się w całości w Firebase (Google Cloud), warstwa frontendowa jest rozpakowywana na Vercel, który oferuje najwygodniejszą infrastrukturę do uruchamiania aplikacji Next.js. Jego integracja z GitHub działa dobrze z gałęziami i nie wymaga ręcznej konfiguracji:
- Wprowadzenie zmian do
mainjest automatycznie rozpakowywane do środowiska produkcyjnego. - Wprowadzenie zmian do dowolnej innej gałęzi uruchamia wersję wstępną z własnym linkiem, dzięki czemu każdą gałąź można przeglądać w czasie rzeczywistym, co ułatwia szybką iterację.
Przeglądanie zmian oznacza wtedy otwarcie linku, a nie pobieranie gałęzi i jej uruchamianie lokalnie, co nadaje się dla małego zespołu, w którym projektanci, specjaliści od produktu i inżynierowie chcą widzieć prace w toku bez konieczności konfiguracji na własnych maszynach.
Analityka i monitorowanie
Wiedza o tym, kim są użytkownicy i jak korzystają z produktu, jest cenna. Może zaoszczędzić tygodnie lub miesiące pracy nad rozwojem, pokazując, co należy priorytetyzować, a dobre monitorowanie poprawia doświadczenie użytkowników poprzez wykrywanie częstych błędów.
PostHog obejmuje tu ogólną analitykę i monitorowanie produktu, w tym odtwarzanie sesji, przechwytywanie wyjątków, logi oraz mapy źródeł z środowiska produkcyjnego. Google Analytics for Firebase to bezpłatna alternatywa, która wymaga więcej konfiguracji, natomiast Sentry jest nieco droższy. Wszystkie one pomagają w poznaniu użytkowników, ale nic nie zastąpi bezpośredniej rozmowy z nimi.
E-mail pozostaje jednym z najbardziej niezawodnych sposobów na utrzymywanie kontaktu z użytkownikami, wysyłanie aktualizacji i angażowanie ich. Ostatnio przeszliśmy z Sendgrid na react-email wraz z Resend.
react-email umożliwia tworzenie wysoce dostosowywalnych wiadomości e-mail, przekształcając każdą z nich w komponent React. Resend dobrze z nim integruje się i ma atrakcyjne ceny. Ponieważ wiadomości e-mail są komponentami React, są traktowane tak samo jak reszta kodu w ramach kontroli wersji, dzięki czemu każda zmiana jest śledzona w jednym miejscu.
Przeglądanie i testowanie szablonów jest równie proste, ponieważ ten sam komponent jest renderowany w przeglądarce podczas rozwoju i generuje HTML, który trafia do skrzynek odbiorców.
Literatura pokrewna
- Agent do obsługi QuickBooks działający na lokalnym modelu LLM przy użyciu Ollamy i LangChain — Agent typu ReAct na bazie modelu Qwen 3.5 9B oraz karty graficznej RTX 4070 odczytuje dane z QuickBooks w czasie rzeczywistym bez żadnych kosztów związanych z chmurą. Zobacz kod, wyniki działania oraz znane ograniczenia.
- Projektowanie narzędzia do znajdowania pracy dla wielu agentów: pipeline, HyDE i możliwości obserwacji — Pipeline składający się z dziewięciu kroków w ramach LangGraph, który dopasowuje CV do ofert pracy, z ośmioma opcjami projektowymi dotyczącymi HyDE, routingu modeli, ograniczeń szybkości i śledzenia procesów.