Aplikacje Full-Stack z użyciem React.js i Next.js
Czas trwania szkolenia:2 dni (16h)
Kod kursu:NEXTJS
Poziom zaawansowania:
O szkoleniu Aplikacje Full-Stack z użyciem React.js i Next.js
W cenie otrzymasz:
- Materiały szkoleniowe
- Certyfikat ukończenia szkolenia
- W przypadku szkolenia w trybie stacjonarnym zapewnimy Ci również lunch oraz sprzęt niezbędny do nauki
Dla kogo?
- Programistów posiadających podstawową wiedzę z zakresu JavaScript/TypeScript oraz wcześniejsze doświadczenie z React.JS, którzy chcą poznać zaawansowane techniki tworzenia aplikacji full-stack w React.JS
Wymagania
- Podstawowa wiedza z zakresu HTML, CSS, JavaScript/TypeScript
- Znajomość podstawowych koncepcji React.js
- Znajomość podstawowych koncepcji aplikacji serwerowych i API
Zalety
- Szkolenie stanowi kompleksowe wprowadzenie do frameworka Next.js z naciskiem na praktyczne zastosowanie w tworzeniu aplikacji
- Szkolenie skupia się na realizacji projektu praktycznego w trakcie warsztatów
Cele szkolenia
- Zapoznanie z założeniami frameworka Next.js i jego architekturą
- Zdobycie praktycznych umiejętności w zakresie tworzenia aplikacji internetowych z użyciem Next.js
Program
Wprowadzenie do Next.js
- Charakterystyka i zalety frameworka Next.js
- Konfiguracja środowiska deweloperskiego
- Tworzenie nowego projektu Next.js
Routing w Next.js
- Użycie routera Next.js do nawigacji między stronami
- Tworzenie dynamicznych ścieżek
- Przekazywanie danych przez URL
SSR (Server-Side Rendering)
- Zasady działania SSR w Next.js
- Budowanie stron z SSR
- Optymalizacja wydajności SSR
Generowanie stron statycznych i SSR w kontekście SEO i WebVitals
- Porównanie różnych metod generowania stron w Next.js (statyczne generowanie, generowanie na żądanie, SSR)
- Wybór odpowiedniej metody generowania stron w zależności od celów SEO i wymagań projektu
- Ustalanie unikalnych tytułów stron, opisów meta, znaczników Open Graph, itp.
Optymalizacja wydajności aplikacji zgodnie z Web Vitals
- Omówienie metryk Web Vitals - Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), itp.
- Techniki optymalizacji wydajności, takie jak lazy loading, code splitting, cache'owanie, minimalizacja i kompresja zasobów
Praca z danymi w Next.js
- Pobieranie danych z zewnętrznych źródeł
- Użycie API w Next.js
- Zarządzanie stanem aplikacji
Dynamiczne renderowanie komponentów
- Tworzenie dynamicznych komponentów w Next.js
- Lazy loading komponentów
- Optymalizacja wydajności
Stylowanie w Next.js
- Wybór i konfiguracja narzędzi do stylizacji
- Sposoby stylizacji komponentów w Next.js
- Implementacja motywów i stylów globalnych
Obsługa formularzy i API
- Tworzenie formularzy w Next.js
- Walidacja danych formularzy
- Przesyłanie danych formularzy na serwer
Deployment aplikacji Next.js
- Przygotowanie aplikacji do produkcji
- Wybór platformy hostingowej
- Publikacja aplikacji na serwerze produkcyjnym