33 artykuły to nie koniec. Ich ilość ciągle rośnie.
TanStack Table v9 dostarcza mechanikę tabeli, ale nie gotowy komponent. To zaleta, jeśli potrzebujesz własnego wyglądu i pełnej kontroli nad zachowaniem. Oznacza też odpowiedzialność za semantykę HTML, dostępność, stan ładowania, integrację z URL i poprawny podział pracy między przeglądarkę a serwer.
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
Ile razy wklejałeś className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 do każdego przycisku w projekcie? Gdy zachodziła potrzeba zmiany odcienia niebieskiego, okazywało się, że musisz aktualizować ten sam łańcuch klas w czterdziestu miejscach. System projektowy kończy z tym problemem, bo definiujesz komponent raz, ustalasz jego warianty oraz tokeny, a następnie używasz go w całej aplikacji.
Maciej Sala
Founder StriveLab