To wersja testowa nowego serwisu infoShare Academy — wyświetlane treści i oferta nie są wiążące ani kompletne

Frontend

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.

Czas trwania
16h · 2 dni
Zapytaj o program → Zobacz wszystkie
Dla kogo

Idealny dla zespołów, które…

1 Dla początkujących i średniozaawansowanych front-end developerów, którzy chcą poszerzyć swoje kompetencje o Next.js i TypeScript.
2 Dla programistów JavaScript/React, którzy chcą tworzyć aplikacje z lepszą wydajnością i optymalizacją SEO.
3 Dla osób zajmujących się tworzeniem aplikacji webowych, które wymagają wsparcia dla renderowania serwerowego (SSR) i statycznego generowania stron (SSG).
4 Dla zespołów programistycznych i freelancerów, którzy chcą wprowadzić nowoczesne podejście do budowania aplikacji webowych w swoich projektach.
Efekty po programie

Nowoczesny frontend w praktyce — komponenty, wydajność i jakość kodu.

✓

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 · 10 modułów

Co konkretnie robimy

1. Podstawy Next.js

M01
1. Podstawy Next.js
  • · Czym jest Next.js i jakie problemy rozwiązuje?
  • · Konfiguracja projektu Next.js: instalacja i wstępna struktura projektu.
M02
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
M03
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.
M04
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

M05
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).
M06
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.
M07
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.
M08
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
M09
9. Deployment aplikacji
  • · Przygotowanie aplikacji do środowiska produkcyjnego.
  • · Wybór platformy hostingowej
  • · Konfiguracja CI/CD dla projektu Next.js.
M10
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.
Każdy moduł modyfikujemy pod Twój stack i kontekst. Powyższe to punkt wyjścia — nie sztywna agenda.
Jak pracujemy

Od briefu do retro w 30 dniach.

01

Brief i diagnoza

Rozmowa z liderem zespołu + krótka ankieta dla uczestników. Określamy cele, gap, kontekst.

02

Modyfikacja programu

Dostosowujemy moduły, case studies i przykłady kodu pod Twój stack. Akceptacja w 5 dni.

03

Warsztat

Sesje z trenerem, hands-on, code review. Mentor dostępny też pomiędzy sesjami.

04

Retro + raport

Raport z efektami dla zespołu i lidera. 30 dni konsultacji w cenie.

Zapytanie

Wyślij brief. Odezwiemy się w 1 dzień.

Po krótkim briefie przygotujemy program i wycenę. Bez zobowiązań — to tylko punkt wyjścia do rozmowy.

✓Wycena w 48h od briefu
✓Pierwsza sesja w 30 dni
✓Pilotaż przed pełną decyzją
✓Faktura VAT, możliwość płatności w transzach

Co robimy z Twoimi danymi

Dane służbowe (imię, e-mail firmowy, telefon, firma, stanowisko) przetwarzamy w celu obsługi zapytania o szkolenie dla firmy i przygotowania oferty. Administratorem danych jest infoShare Academy Sp. z o.o., Al. Grunwaldzka 472B, 80-309 Gdańsk. Podanie danych jest dobrowolne, ale niezbędne do udzielenia odpowiedzi. Masz prawo dostępu do danych, ich sprostowania, usunięcia, ograniczenia przetwarzania i wniesienia sprzeciwu. Pełną informację znajdziesz w Klauzuli informacyjnej.

Zgody marketingowe (dobrowolne)

Administratorem danych osobowych jest infoShare Academy sp. z o.o. Zasady przetwarzania danych osobowych znajdują się w dokumentach Polityka Prywatności oraz Klauzula Informacyjna.

Inne programy dla zespołów

Zobacz wszystkie →
Frontend

Angular

Nowoczesny frontend w praktyce — komponenty, wydajność i jakość kodu.

40h · 5 dni →
Frontend

Aplikacje Full-stack z NestJS i Angular

Nowoczesny frontend w praktyce — komponenty, wydajność i jakość kodu.

32h · 4 dni →
Frontend

Aplikacje Node i ExpressJS z TypeScript

Nowoczesny frontend w praktyce — komponenty, wydajność i jakość kodu.

24h · 3 dni →