Zadaj pytanie
Frameworki JavaScript Frontend

Szkolenie Fullstack React z NextJS i TypeScript

Termin

Ustalamy indywidualnie

Czas

16h / 2 dni

Cena

Ustalamy indywidualnie

Szkolenie 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.

Program szkolenia Fullstack React z NextJS i TypeScript

1. Podstawy Next.js

Czym jest Next.js i jakie problemy rozwiązuje?
Konfiguracja projektu Next.js: instalacja i wstępna struktura projektu.

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

Czego nauczysz się na szkoleniu z Fullstack React z NextJS i TypeScript?

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.

Chcesz dowiedzieć się więcej o szkoleniu z Fullstack React z NextJS i TypeScript?

Dowiedz się więcej

Przemysław Wołosz

Szkolenia dla firm
(+48) 730 830 801

    Zamów rozmowę