34 artykuły to nie koniec. Ich ilość ciągle rośnie.
W Create React App wszystko działa w przeglądarce — console.log , React DevTools, Chrome DevTools. W Next.js App Router kod wykonuje się w trzech miejscach: na serwerze Server Components, Server Actions , w warstwie proxy i na kliencie Client Components . Dlatego console.log w Server Component pojawia się w terminalu, a nie w przeglądarce — i to dopiero początek różnic, które trzeba mieć w głowie.
Maciej Sala
Founder StriveLab
Tabele HTML z są proste, ale dodanie sortowania, filtrowania, paginacji, selekcji wierszy i responsywności wymaga więcej pracy i setek linii kodu. TanStack Table dawniej React Table to headless biblioteka, która dostarcza logikę tabeli, a po naszej stronie zostawia pełną kontrolę nad renderowaniem.
Maciej Sala
Founder StriveLab
Użytkownik ustawia trzy filtry, znajduje idealny wynik, wysyła link koledze — a tamten widzi pustą wyszukiwarkę. Bo filtry siedziały w useState i zginęły poza jego przeglądarką. URL state rozwiązuje to u źródła: cały stan filtrów żyje w adresie, więc przetrwa odświeżenie, udostępnienie i przycisk „wstecz”, a do tego jest czytelny dla Server Components. Pokazuję, jak zbudować taką wyszukiwarkę — z debounce , skeletonami, walidacją parametrów i SEO.
Maciej Sala
Founder StriveLab
Wchodzisz na formularz, a tam ściana piętnastu pól naraz. Pierwszy odruch? Zamknąć kartę. Ten sam komplet danych rozbity na trzy, cztery kroki po kilka pól działa zupełnie inaczej — użytkownik widzi pasek postępu, wypełnia po kawałku i niepostrzeżenie dochodzi do końca. To nie kosmetyka, to realna różnica w konwersji.
Maciej Sala
Founder StriveLab
Paginacja wydaje się prostym tematem, dopóki nie trzeba pogodzić trzech rzeczy naraz: dobrego UX, wydajności zapytań do bazy i tego, żeby Google poprawnie zaindeksował wszystkie strony. W Next.js App Router wybieramy, czy używamy numerycznej paginacji w URL czy infinite scroll, offset czy cursor po stronie bazy, adres kanoniczny czy notFound dla błędnych adresów. W tym artykule przechodzę przez warianty z kodem i rekomendacjami.
Maciej Sala
Founder StriveLab
Typowy custom hook jest napisany dla konkretnego typu, na przykład useFetchProducts , useFetchUsers , useFetchOrders . Każdy pobiera dane z API, zarządza stanem ładowania i błędu oraz zwraca wynik. Logika jest identyczna, a różni się tylko typ danych. Parametr generyczny usuwa to powtórzenie, ale sam nie sprawdza danych otrzymanych w runtime.
Maciej Sala
Founder StriveLab
React Testing Library renderuje komponenty w środowisku JSDOM, podczas gdy Next.js uruchamia Server Components w warstwie serwerowej. Wynika to z różnic architektonicznych. JSDOM nie obsługuje środowiska serwerowego, na którym opierają się asynchroniczne komponenty korzystające z baz danych, plików cookies, nagłówków czy operacji sieciowych. Zobacz, jak ominąć te ograniczenia i spokojnie testować nowoczesny kod.
Maciej Sala
Founder StriveLab
Vercel AI SDK zdejmuje z Twoich barków większość żmudnej roboty przy dodawaniu AI do aplikacji w Next.js. Zapomnij o ręcznym czytaniu i zarządzaniu strumieniem bajtów z API, parsowaniu chunków czy doklejaniu poprzednich wypowiedzi do historii rozmowy. W tym tutorialu zbudujesz działającego, streamującego chatbota w mniej więcej 30 minut. Potrzebujesz dwóch plików aplikacji, konfiguracji dostawcy i klucza API.
Maciej Sala
Founder StriveLab
Animacje bez wątpienia poprawiają doświadczenia użytkownika, ponieważ dostarczają natychmiastowego feedbacku, kierują wzrok i sprawiają, że interfejs wydaje się bardziej responsywny. Z drugiej strony, nieprawidłowo zaimplementowane animacje potrafią mocno zaszkodzić wskaźnikom Core Web Vitals. Nadmiarowy kod JavaScript obciąża LCP, animowanie właściwości layoutowych takich jak top , left , width czy height wywołuje kosztowne operacje układu powodujące przesunięcia, a skomplikowane kalkulacje wykonywane w każdej klatce drastycznie obniżają płynność i pogarszają INP.
Maciej Sala
Founder StriveLab