Szkolenie Next.js

Next.js łączy frontend i backend w jednej aplikacji: strony renderowane na serwerze, dostęp do bazy danych z komponentu i formularze bez osobnego API. Za tę wygodę płacisz nowym modelem myślenia. Nie każdy komponent działa w przeglądarce, łatwo o dane, które się nie odświeżają, i o akcję serwerową dostępną bez logowania. Do tego Next.js 16 dodał opcjonalny, jawny model cache (Cache Components): nic nie trafia do cache bez dyrektywy "use cache".

Na szkoleniu budujesz krok po kroku jedną aplikację z App Routerem i rozkładasz na części to, co najczęściej sprawia kłopot: granicę między serwerem a klientem, cache i odświeżanie danych, bezpieczeństwo akcji serwerowych oraz wdrożenie.

Program

3 dni

• Architektura Next.js
  • App Router: katalogi jako trasy
  • Layouty, strony, szablony i grupy tras
  • Trasy dynamiczne i parametry
  • Turbopack i typowane trasy
• Komponenty serwerowe i klienckie
  • Kiedy "use client", a kiedy komponent serwerowy
  • Przekazywanie danych przez granicę serwer-klient
  • Najczęstsze błędy i jak je rozpoznać
• Pobieranie danych
  • Dane w komponentach serwerowych
  • Streaming i Suspense, loading.tsx
  • Obsługa błędów: error.tsx, not-found.tsx
• Baza danych
  • Drizzle ORM w komponentach serwerowych
  • Migracje schematu
  • Połączenia z bazą w środowisku serverless
• Renderowanie i cache
  • Cache Components i dyrektywa "use cache"
  • Partial Prerendering: statyczna powłoka i dynamiczne fragmenty
  • Czas życia i tagi: cacheLife, cacheTag
  • Odświeżanie danych: revalidateTag, updateTag i refresh, czyli w tle, od razu po akcji i poza cache
  • Migracja z unstable_cache i starego modelu ISR
• Mutacje danych
  • Server Actions w formularzach
  • Server Actions to publiczne endpointy: walidacja i autoryzacja w każdej akcji
  • Optymistyczne aktualizacje interfejsu
• API i warstwa serwerowa
  • Route Handlers
  • Proxy (dawniej middleware): przekierowania i wstępna kontrola sesji
  • Zmienne środowiskowe i sekrety
• Uwierzytelnianie
  • Sesje z biblioteką Better Auth
  • Ochrona stron, komponentów i akcji serwerowych
• SEO
  • Metadane stron i obrazki Open Graph
  • next/image i next/font bez przesunięć układu
• Testy
  • Testy komponentów w Vitest
  • Pierwsze testy end-to-end w Playwright
• Wdrożenie
  • Vercel i obraz Docker w trybie output: 'standalone'
  • Logi i monitoring błędów
  • Wydania bezpieczeństwa Next.js: jak je śledzić i szybko aktualizować

Testy end-to-end omawiam szerzej na szkoleniu Testy end-to-end. Bazę danych pokazuję na Drizzle ORM, a na życzenie na Prisma.

Dla kogo?

• Dla programistów React, którzy zaczynają projekt w Next.js.
• Dla zespołów przenoszących aplikację SPA na renderowanie po stronie serwera.
• Dla programistów backendu, którzy znają już podstawy Reacta i chcą budować cały produkt w TypeScripcie.

Co musisz umieć?

• Tworzyć komponenty w React i korzystać z hooków na poziomie szkolenia React.
• Znać podstawy TypeScriptu. Jeśli ich nie znasz, zacznij od szkolenia TypeScript.

Czego się nauczysz?

• Rozdzielisz kod na komponenty serwerowe i klienckie bez zgadywania.
• Pobierzesz dane z bazy na serwerze i pokażesz je strumieniowo.
• Zapanujesz nad cache w modelu Cache Components i odświeżaniem danych.
• Obsłużysz formularze przez Server Actions z walidacją i autoryzacją.
• Zabezpieczysz strony i akcje serwerowe sesją użytkownika.
• Przygotujesz metadane i obrazki Open Graph pod SEO.
• Napiszesz testy komponentów i pierwsze testy end-to-end.
• Wdrożysz aplikację na Vercel albo w Dockerze, ustawisz monitoring błędów i szybko wgrasz poprawki bezpieczeństwa.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"