Przejdź do treści
StriveLab

96 artykułów o tematyce Next.jsStrona 7

Wróć do bloga
Rate limiting na Edge w Next.js z Upstash

Jeden bot, jedna pętla z błędem albo jeden zdeterminowany atakujący — i Twoje API dostaje tysiące żądań na minutę. Serwer się dławi, rachunek za infrastrukturę rośnie, a normalni użytkownicy widzą błędy. Rate limiting ogranicza liczbę żądań z jednego źródła w oknie czasu. Pokazuję, jak wdrożyć go w Next.js z Upstash Redis — w Proxy, Route Handlerach i Server Actions, z trzema algorytmami i limitami per endpoint. W Next.js 16 proxy.ts działa jednak w Node.js, więc „na Edge” dotyczy Route Handlera z Edge Runtime albo infrastruktury dostawcy, nie samej konwencji Proxy.

Maciej Sala

Maciej Sala

Founder StriveLab

RBAC w Next.js: jak bezpiecznie wdrożyć role i uprawnienia?

Wyobraź sobie, że dla każdego użytkownika z osobna sprawdzasz, czy wolno mu edytować artykuł. Przy dziesięciu osobach jeszcze ujdzie, przy tysiącu to droga przez mękę. RBAC odwraca pytanie: uprawnienia wiążesz z rolami admin, editor, user , role z ludźmi, a w kodzie pytasz tylko, czy rola ma uprawnienie posts:edit . Jedna reguła zamiast tysiąca wyjątków.

Maciej Sala

Maciej Sala

Founder StriveLab

Wydajne animacje Framer Motion w Next.js

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

Maciej Sala

Founder StriveLab

Integracja Supabase z Next.js App Router

Supabase to otwartoźródłowa platforma backendowa zbudowana wokół PostgreSQL . W jednym projekcie dostajesz bazę danych, Auth, Storage, Realtime, Edge Functions i automatycznie generowane API. Dla aplikacji w Next.js to często najkrótsza droga do sensownego MVP bez osobnego backendu pisanego od zera.

Maciej Sala

Maciej Sala

Founder StriveLab

Drizzle ORM oraz Prisma w projektach w Next.js

Prisma i Drizzle zdominowały świat Next.js i ogólnie Node.js, wyrastając na dwa najpotężniejsze ORM-y dostępne na rynku. Choć służą podobnemu celowi, reprezentują dwie fundamentalnie różne wizje komunikacji z bazą danych.

Maciej Sala

Maciej Sala

Founder StriveLab

Repository i Service Layer w Next.js dla Server Actions

W Next.js traktuj Server Actions i Route Handlers jako cienkie adaptery wejścia: pobierają sesję, walidują payload i mapują odpowiedź. Reguły biznesowe trzymaj w Service Layer, zapytania do bazy w Repository, a transakcje spinaj przez Unit of Work. Taki podział nie jest potrzebny w każdym CRUD-zie, ale zaczyna się zwracać, gdy jedna operacja dotyka kilku tabel, kilku wejść albo kilku reguł.

Maciej Sala

Maciej Sala

Founder StriveLab

Design System w Next.js od zera: Tailwind, CVA i Radix UI

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

Maciej Sala

Founder StriveLab

Jak organizować kod w dużych projektach Next.js?

W małym projekcie domyślna organizacja katalogów App Routera działa świetnie — app/ , components/ , lib/ . Ale gdy aplikacja rośnie do 50+ komponentów, 20+ stron i kilku domen biznesowych, zaczynasz tracić orientację.

Maciej Sala

Maciej Sala

Founder StriveLab

Jak działa Partial Prerendering (PPR) w Next.js?

Przez lata rendering w Next.js stawiał nas przed skrajnym wyborem: cała strona była albo w pełni statyczna, albo w pełni dynamiczna. Partial Prerendering PPR przełamuje ten podział, sprawiając, że wstępnie wyrenderowana powłoka pojawia się natychmiast, podczas gdy dynamiczne fragmenty są strumieniowane w tle. W Next.js 16 mechanizm ten ewoluował w stronę Cache Components. Zobacz, w jakich sytuacjach rozwiązanie realnie przyspiesza aplikację, a kiedy staje się głównie niepotrzebną komplikacją.

Maciej Sala

Maciej Sala

Founder StriveLab