- Czym jest Next.js i jakie problemy rozwiązuje?
- Konfiguracja projektu Next.js: instalacja 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 kompleksowe wprowadzenie do tworzenia nowoczesnych aplikacji webowych z wykorzystaniem jednych z najpopularniejszych narzędzi w ekosystemie JavaScript. Program szkolenia obejmuje wszystkie kluczowe aspekty pracy z Next.js, od podstawowych po zaawansowane funkcjonalności, w tym routing, różne typy renderowania, optymalizację wydajności, stylowanie i integrację z zewnętrznymi API. Kurs kończy się praktycznymi wskazówkami dotyczącymi wdrażania aplikacji w środowisku produkcyjnym i konfiguracji CI/CD. Dzięki połączeniu teorii i ćwiczeń praktycznych uczestnicy zdobędą solidną wiedzę i umiejętności pozwalające na tworzenie skalowalnych, szybkich i przyjaznych dla użytkownika aplikacji webowych.
Dla kogo jest szkolenie z Fullstack React z NextJS i TypeScript?
Dla początkujących i średniozaawansowanych front-end developerów, którzy chcą poszerzyć swoje kompetencje o Next.js i TypeScript.-
Dla programistów JavaScript/React, którzy chcą tworzyć aplikacje z lepszą wydajnością i optymalizacją SEO.
-
Dla osób zajmujących się tworzeniem aplikacji webowych, które wymagają wsparcia dla renderowania serwerowego (SSR) i statycznego generowania stron (SSG).
-
Dla zespołów programistycznych i freelancerów, którzy chcą wprowadzić nowoczesne podejście do budowania aplikacji webowych w swoich projektach.
Czego nauczysz się na szkoleniu?
-
Jak wykorzystać możliwości Next.js, w tym różne typy renderowania (CSR, SSR, SSG, ISR), aby dostosować aplikację do wymagań projektu.
-
Jak optymalizować wydajność aplikacji i jej widoczność w wyszukiwarkach (SEO), korzystając z technik takich jak lazy loading, code splitting i cache’owanie.
-
Jak efektywnie integrować aplikacje z zewnętrznymi API, zarządzać stanem aplikacji oraz stylizować komponenty za pomocą CSS Modules, Tailwind CSS lub styled-jsx.
-
Jak tworzyć i zarządzać dynamicznymi ścieżkami, routingiem oraz poprawnie wdrażać nawigację w aplikacjach React.
Program szkolenia Fullstack React z NextJS i TypeScript
1. Podstawy Next.js
2. Routing i nawigacja
- Routing w Next.js: system plikowy jako router.
- Tworzenie dynamicznych ścieżek.
- Przekazywanie danych za pomocą URL i query params.
- Poprawne linkowanie i preloading stron
3. Renderowanie stron
- Typy renderowania w Next.js: CSR, SSR, SSG, ISR.
- Layouty, grupy, ekrany ładowania, błędów i Suspense
- Implementacja Server-Side Rendering (SSR).
- Generowanie statycznych stron (Static Site Generation – SSG).
- Incremental Static Regeneration (ISR) – aktualizowanie statycznych stron.
- Jak wybrać odpowiedni sposób renderowania w zależności od wymagań projektu.
4. Optymalizacja wydajności i SEO
- Metryki Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), itp.
- Techniki optymalizacji: lazy loading, code splitting, cache’owanie.
- Tworzenie unikalnych tytułów, opisów meta i znaczników Open Graph.
5. Praca z danymi w Next.js
- Pobieranie danych z zewnętrznych API za pomocą
- Generacja statycznych ścieżek na podstawie dynamicznych danych.
- Zarządzanie stanem aplikacji (np. za pomocą React Context, Redux).
6. Stylowanie w Next.js
- Wybór technologii stylizacji: CSS Modules, styled-jsx, Tailwind CSS.
- Tworzenie stylów globalnych i lokalnych.
- Obsługa motywów (themes) w aplikacji.
7. Dynamiczne komponenty i lazy loading
- Tworzenie komponentów dynamicznych za pomocą
- Lazy loading obrazów i innych zasobów.
- Optymalizacja ładowania komponentów dla poprawy wydajności.
8. Formularze i praca z API
- Tworzenie formularzy w Next.js.
- Walidacja danych, obsługa błędów w formularzach
- Akcje Serwerowe
- Obsługa API w Next.js: tworzenie i zarządzanie punktami końcowymi
9. Deployment aplikacji
- Przygotowanie aplikacji do środowiska produkcyjnego.
- Wybór platformy hostingowej
- Konfiguracja CI/CD dla projektu Next.js.
10. Podsumowanie i dalsze kroki
- Omówienie najlepszych praktyk w pracy z Next.js.
- Przegląd przydatnych zasobów i dokumentacji.
- Sesja pytań i odpowiedzi.
Pobierz program
Pobierz szczegółowy program w PDF, żeby dowiedzieć się więcej o godzinach i tematach zajęć.
