- Definicja Next.js, główne zastosowania i problemy rozwiązywane przez framework
- Konfiguracja projektu Next.js: instalacja, TypeScript i wstępna struktura projektu
Szkolenie Fullstack React z NextJS i TypeScript
Poziom
ŚredniozaawansowanyCzas
16h / 2 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie Fullstack React z NextJS i TypeScript
Szkolenie Fullstack React z Next.js i TypeScript to praktyczne wprowadzenie do tworzenia nowoczesnych aplikacji webowych w spójnym stosie React, Next.js i TypeScript. Program obejmuje App Router, routing, nawigację, rendering CSR, SSR, SSG i ISR, Server Components, layouty, optymalizację wydajności, SEO, pracę z danymi, integrację z API, stylowanie, komponenty dynamiczne, formularze, Server Actions, Route Handlers oraz podstawy deploymentu i CI/CD. Uczestnicy uczą się projektować aplikacje, które łączą warstwę front-endową i serwerową, są wydajne, czytelne, łatwe w utrzymaniu i dopasowane do wymagań współczesnych projektów webowych. Szkolenie koncentruje się na praktycznym doborze mechanizmów Next.js do wymagań projektu, bez obiecywania pełnej architektury produkcyjnej poza zakresem 2 dni.
Dla kogo jest to szkolenie?
Dla początkujących i średniozaawansowanych front-end developerów, którzy znają podstawy Reacta i chcą poszerzyć swoje kompetencje o Next.js i TypeScript-
Dla programistów JavaScript/React, którzy chcą tworzyć aplikacje z lepszą wydajnością, routingiem, renderowaniem po stronie serwera i podstawową optymalizacją SEO
-
Dla osób zajmujących się tworzeniem aplikacji webowych, które wymagają wsparcia dla renderowania serwerowego, statycznego generowania stron, integracji z API i obsługi formularzy
-
Dla zespołów programistycznych i freelancerów, którzy chcą wprowadzić nowoczesne podejście do budowania aplikacji webowych w stosie React, Next.js i TypeScript
Czego nauczysz się na szkoleniu?
- Dobierzesz możliwości Next.js, w tym CSR, SSR, SSG i ISR, do wymagań funkcjonalnych oraz wydajnościowych projektu
- Skonfigurujesz routing, layouty, dynamiczne ścieżki, nawigację i przekazywanie danych w aplikacji Next.js
- Zastosujesz techniki optymalizacji wydajności i widoczności w wyszukiwarkach, w tym lazy loading, code splitting, cache’owanie, metadane i Open Graph
- Zintegrujesz aplikację z zewnętrznymi API, uporządkujesz pobieranie danych i dobierzesz podstawowe podejście do zarządzania stanem
- Przygotujesz stylowanie komponentów z użyciem CSS Modules, Tailwind CSS lub styled-jsx
- Obsłużysz formularze, walidację, błędy, Server Actions i podstawowe endpointy API w Next.js
Program szkolenia
Dzień 1
1. Podstawy Next.js
2. Routing i nawigacja
- Routing w Next.js: system plikowy jako router i podstawy App Routera
- Dynamiczne ścieżki i struktura segmentów aplikacji
- Dane w URL, parametry tras i query params
- Linkowanie, preloading stron i podstawy nawigacji w aplikacji
3. Renderowanie stron
- Typy renderowania w Next.js: CSR, SSR, SSG, ISR oraz Server Components
- Layouty, grupy tras, ekrany ładowania, ekrany błędów i Suspense
- Server-Side Rendering – SSR i przypadki użycia renderowania serwerowego
- Static Site Generation – SSG i statyczne generowanie stron
- Incremental Static Regeneration – ISR i aktualizacja statycznych stron
- Dobór sposobu renderowania do wymagań projektu, danych i wydajności
4. Optymalizacja wydajności i SEO
- Metryki Web Vitals: Largest Contentful Paint, Cumulative Layout Shift i Interaction to Next Paint
- Techniki optymalizacji: lazy loading, code splitting, cache’owanie i optymalizacja zasobów
- Metadane strony, unikalne tytuły, opisy meta i znaczniki Open Graph
5. Praca z danymi w Next.js
- Pobieranie danych z zewnętrznych API w komponentach serwerowych i klienckich
- Generacja statycznych ścieżek na podstawie dynamicznych danych
- Zarządzanie stanem aplikacji, React Context, Redux i granice stanu lokalnego
Dzień 2
6. Stylowanie w Next.js
- Wybór technologii stylizacji: CSS Modules, styled-jsx, Tailwind CSS
- Style globalne, style lokalne i organizacja warstwy wizualnej aplikacji
- Motywy aplikacji, zmienne projektowe i spójność komponentów
7. Dynamiczne komponenty i lazy loading
- Komponenty dynamiczne, dynamic import i podział kodu aplikacji
- Lazy loading obrazów i innych zasobów
- Optymalizacja ładowania komponentów i wpływ na wydajność aplikacji
8. Formularze i praca z API
- Formularze w Next.js i obsługa danych wejściowych użytkownika
- Walidacja danych, obsługa błędów i komunikaty w formularzach
- Akcje serwerowe – Server Actions i podstawowe scenariusze zapisu danych
- API w Next.js: Route Handlers, punkty końcowe i zarządzanie komunikacją
9. Deployment aplikacji
- Przygotowanie aplikacji do środowiska produkcyjnego
- Wybór platformy hostingowej i wymagania uruchomieniowe aplikacji Next.js
- Konfiguracja CI/CD dla projektu Next.js
10. Podsumowanie i dalsze kroki
- Dobre praktyki pracy z Next.js, TypeScript i strukturą aplikacji
- Przydatne zasoby, dokumentacja i kierunki dalszego rozwoju
- Sesja pytań i odpowiedzi oraz podsumowanie decyzji projektowych
