Inne Rekomendacje
Zdajemy sobie sprawę z tego, że biblioteki które zawiera Create T3 App nie są lekarstwem na wszystko. Polecamy zaczynać projekty z rzeczami, które są już dołączone - przyjdzie jednak czas, kiedy będziesz musiał dodać swoje paczki. Tylko ty wiesz, czego twój projekt potrzebuje. Polecamy przejrzeć jednak poniższą listę naszych rekomendacji.
Są to rekomendacje pojedynczych kontrybutorów i nie powinny być postrzegane jako “oficjalne” sposoby na rowiązywanie danych problemów od zespołu Create T3 App czy też T3-OSS. Zrób swój research, szczególnie zanim skorzystasz z płatnych usług.
State Management
Informacja: Biblioteki do state managementu mogą być niezłe, jednak często nie są one potrzebne. Hooki od tRPC (a dokładniej od React Query) powinny być w stanie zarządzać statem od strony serwera. W przypadku state’a klienta, zacznij od hooka useState oferowanego przez Reacta i skorzystaj z poniższych opcji jeśli będziesz potrzebować czegoś więcej.
Zustand
Aby nigdy więcej nie używać Reduxa
“Nowoczesny, prosty Redux”, o którym nie wiedziałeś, że go potrzebujesz. Poimandresowi↗ zawsze można zaufać. Zbudować możesz wszystko, począwszy od aplikacji do rozmów wideo a skończywszy na grach czy też serwerach.
Jotai
Aby nigdy więcej nie używać kontekstu
Przy bardziej “niepodzielnym” podejściu, ciężko jest pobić Jotai. Także wykonana przez Poimandres↗, Jotai pozwala ci definiować singletony które sprawiają wrażenie, jakby były globalnym hookiem useState. Świetna opcja do zachowań wymagających zachowania ze statem i takich, które jeszcze nie potrzebują maszyny state’a.
Biblioteki Komponentów
Wiele aplikacji wymaga tej samej garści komponentów - przełączników, dropdownów czy też modali. Biblioteki te zaopatrzą cię w znakomite i przystępne komponenty, z których możesz korzystać, i które możesz dostosowywać jak tylko chcesz.
Biblioteki Komponentów Bez Narzuconych Stylów
Znane także jako biblioteki “headless”, zapoatrzą cię w znakomite, przystępne komponenty bez narzuconych stylów, które będziesz mógł dostosować jak tylko chcesz. Tu znajdziesz kilka rekomendacji.
-
Radix UI↗ zaopatrzy cię w olbrzymi zestaw praktycznych i przystępnych prymitywów, które będziesz mógł dostosować do swoich potrzeb z czystym CSSem lub Tailwind CSS.
-
Headless UI↗ wykonane przez zespół stojący za Tailwind CSS, przekazuje ci przystępne komponenty bez narzuconych stylów, które bezproblemowo integrują się z Tailwind CSS.
-
React Aria↗ zaopatrzy cię w przystępne prymitywy do UI dla twojego design systemu.
Biblioteki Komponentów Z Gotowymi Stylami
W przypadku, kiedy chcesz żeby twoja aplikacja wyglądała OK
Czasem budując projekt, chcesz aby Ui wyglądało po prostu przyzwoicie. Do projektów takich jak panele administratora i podobnych, każda z tych bibliotek da sobie doskonale radę.
Class Variance Authority
Gdy budujesz własną bibliotekę UI
Zbuduj bibliotekę UI z różnymi kolorami, rozmiarami, wariantami itp. Gdy twój projekt osiągnie skalę na tyle dużą, że będziesz musiał skorzystać z ustandaryzowanego zestawu komponentów z wieloma wariantami (korzystając przy tym z Tailwind CSS), CVA stanie się doskonałym narzędziem.
Animacje
Rekomendacje na sytuacje, kiedy w aplikacji potrzebować będziesz animacji :)
AutoAnimate
Aby animacje były pojedynczą linią kodu
Wiele bibliotek od animacji stara się rozwiązać każdy możliwy problem, stając się przy tym uciężałe i niezbyt praktyczne. AutoAnimate to narzędzie niewymagające konfiguracji, które pozwoli ci uzyskać znaczącą poprawę w UX twojej aplikacji bez dodatkowego wysiłku.
Framer Motion
Złożone animacje z deklaratywnym kodem
Framer Motion pozwala Ci w prosty sposób i z deklaratywną składnią napisać mało kodu, a w zamian zaopatrzy twoją aplikację w złożone animacje, czy nawet reakcje na gesty.
Wdrażanie, Infrastruktura, Bazy Danych i CI
Vercel
Aby zhostować swoją aplikację
Vercel zamienił prawdziwe piekło deploymentu aplikacji w łatwą integrację z GitHubem. Przeskalowaliśmy się do setek tysięcy użytkowników bez problemu. Napędzany przez AWS, o wiele lepszy interfejs :)
PlanetScale
Bazy danych bez obaw
PlanetScale to najlepsza platforma “serverless” do baz danych, z której kiedykolwiek korzystaliśmy. Znakomicie się skaluje, dostarcza świetny DX, zawiera doskonałe ceny. Jeżeli korzystasz z SQLa (i miejmy nadzieję z Prismy), ciężko jest tą usługę pobić.
Railway
Aby hostować swoją infrastrukturę
“Nowoczesne Heroku”. Najłatwiejszy sposób aby uzyskać prawdziwy działający serwer. Jeżeli Vercel i PlanetScale nie są dla Ciebie wystarczające, prawdopodobnie Railway będzie. Połącz go z repozytorium GitHuba i gotowe.
Upstash
Redis dla aplikacji “serverless”
Kochamy Prismę i PlanetScale, ale niektóre projekty wymagają bardziej wydajnego rozwiązania. Upstash pozwala na prędkość bliską tej przy bezpośrednim odczycie z pamięci w twoim projekcie “serverless”, przy tym nie obciążając Cię zarządzaniem infrastruktury i skalowania.
Pusher
WebSockety “serverless”
Jeżeli WebSockety stanowią główną część projektu, możesz chcieć rozważyć bardziej tradycyjny backend taki jak Fastify↗ (który również działa z tRPC!↗). Jesli jednak chcesz szybko dodać WebSockety do aplikacji T3, Pusher to doskonały wybór.
Soketi
Soketi to prosta w użyciu alternatywa do Pushera, którą hostuje się samemu. Jest w pełni kompatybilna z SDK Pushera, z którego możesz korzystać, aby połączyć się z serwerem. Wersja “serverless” Soketi jest w becie.
Statystyki Stron (Analytics)
Budując aplikację, dane użytkowników są bardzo cenne. Znajdziesz tu parę serwisów do ich zbierania, które polecamy.
Plausible
Potrzebujesz zbierać statystyki? Plausible to jedna z najszybszych opcji aby to zrobić. Bardzo minimalna. Posiada nawet prosty plugin dla Next.js↗.
Umami
Umami to prosta w użyciu, open-source, szybka i skupiająca się na prywatności alternatywa dla Google Analytics, którą hostuje się samemu. Możesz go zdeploy’ować dzięki serwisom, takim jak Vercel, Railway itp., korzystając przy tym z PlanetScale jako bazy danych.
Inne
Next Bundle Analyzer
Określenie co znajdzie się w finalnym buildzie aplikacji może czasem stanowić problem. Next Bundle Analyzer to łatwy sposób na wizualizację i analizę kodu JavaScript, który zostaje wygenerowany.