Kategoria: JavaScript, programowanie front-end, frameworki JS
O szkoleniu
Next.js to dziś najpopularniejszy sposób budowania aplikacji w React, które mają być szybkie, dobrze widoczne w wyszukiwarkach i łączyć frontend z logiką po stronie serwera. Na szkoleniu budujemy przykładową aplikację w Next.js z TypeScriptem: od routingu i layoutów, przez komponenty serwerowe i pobieranie danych, po formularze, uwierzytelnianie, SEO i wdrożenie.
Po tych dwóch dniach:
- będziesz wiedzieć, czym Next.js różni się od aplikacji React SPA i kiedy warto go wybrać,
- zbudujesz strukturę aplikacji w App Routerze: strony, layouty, trasy dynamiczne, stany ładowania i błędów,
- świadomie podzielisz kod na komponenty serwerowe i klienckie,
- pobierzesz dane po stronie serwera i dobierzesz sposób renderowania oraz odświeżania danych,
- obsłużysz formularze przez Server Actions i dodasz własne endpointy API,
- przygotujesz aplikację pod SEO i wdrożysz ją na serwer produkcyjny.
Pokazujemy też, jak dodać do aplikacji funkcję AI z bezpiecznym wywołaniem modelu po stronie serwera i jak korzystać z asystenta AI przy pracy z kodem Next.js.
Szkolenie jest dla programistów Reacta, którzy zaczynają pracę z Next.js albo przechodzą ze starszego Pages Routera, a także dla full-stack developerów i liderów zespołów, którzy wybierają technologię do nowego projektu. Jeśli dopiero poznajesz Reacta, zacznij od szkolenia React w praktyce.
Czas trwania
2 dni
Program
- Next.js w ekosystemie Reacta
- czym Next.js różni się od aplikacji React SPA i kiedy go wybrać
- projekt z TypeScriptem i struktura katalogów
- Routing w App Routerze
- strony, layouty i zagnieżdżone trasy
- trasy dynamiczne i nawigacja
- stany ładowania i obsługa błędów
- Komponenty serwerowe i klienckie
- Server Components i Client Components – podział odpowiedzialności
- hydratacja i jej typowe pułapki
- przekazywanie danych między komponentami serwerowymi i klienckimi
- Dane i renderowanie
- pobieranie danych w komponentach serwerowych
- renderowanie statyczne, dynamiczne i strumieniowe
- cache i odświeżanie danych
- Formularze i logika po stronie serwera
- Server Actions i walidacja formularzy
- Route Handlers – własne endpointy API w aplikacji
- połączenie z bazą danych lub zewnętrznym API
- uwierzytelnianie i ochrona tras – przegląd rozwiązań
- SEO i wydajność
- metadane, mapa strony, obrazy i czcionki
- rzut oka na wskaźniki Core Web Vitals
- AI w aplikacji Next.js
- wywołanie modelu językowego po stronie serwera (np. OpenAI) i bezpieczne klucze API
- przesyłanie odpowiedzi modelu do interfejsu na bieżąco (streaming)
- Wdrożenie
- build produkcyjny i zmienne środowiskowe
- wdrożenie na platformie hostingowej (np. Vercel)
- rzut oka na uruchamianie aplikacji na własnym serwerze
Dla grup na zamówienie program możemy rozszerzyć do 3 dni, np. o migrację aplikacji z Pages Routera, wielojęzyczność, integrację z headless CMS, testy end-to-end albo pracę na kodzie zbliżonym do projektu zamawiającego.
Training also available in English .
Przeznaczenie i wymagania
Szkolenie jest przeznaczone przede wszystkim dla:
- programistów Reacta zaczynających pracę z Next.js,
- zespołów przechodzących ze starszego Pages Routera na App Router,
- full-stack developerów budujących aplikacje webowe w JavaScripcie i TypeScripcie,
- liderów zespołów i architektów wybierających technologię do nowego projektu.
Od uczestników oczekujemy:
- praktycznej znajomości Reacta (komponenty, props, stan, hooki),
- podstawowej znajomości TypeScriptu,
- ogólnej orientacji w HTTP i pracy z API.
Doświadczenie z Next.js nie jest wymagane.
Certyfikaty
Uczestnicy szkolenia otrzymują imienne certyfikaty sygnowane przez ALX.