Budowa nowoczesnych aplikacji w Next.js

Tytuł: Budowa nowoczesnych aplikacji w Next.js
Kod: react-next-js
Kategoria: React
Forma: 30% wykłady / 70% warsztaty
Czas trwania: 3 dni
Zapisy: Indywidualne zamówienie i dopasowanie dla grupy.
Logistyka: W siedzibie klienta lub w innym dowolnym miejscu.

Szkolenie przeznaczone jest dla programistów, którzy mają przynajmniej podstawową wiedzę z React.js i chcą rozszerzyć swoje umiejętności o budowanie bardziej złożonych aplikacji internetowych.

W trakcie szkolenia uczestnicy poznają sposoby budowy skalowalnych aplikacji, które renderowane są po stronie serwera dbając jednocześnie o wydajność, jak i świetny User- Experience.

Wyróżniki szkolenia

  • opanowanie i uporządkowanie najważniejszych zagadnień Next.js
  • zrozumienie różnych sposobów renderowania aplikacji oraz ich optymalizacji
  • wykorzystanie technik i dobrych praktyk używanych w komercyjnych projektach

Program Szkolenia

Program jest ramą w jakiej możemy się poruszać merytorycznie - program dla konkretnego szkolenia dedykowanego ustalamy z grupą na podstawie analizy przed-szkoleniowej.

  1. Introduction to Next.js
    1. Main advantages, use cases and evolution in the web development ecosystem
    2. Differences between monoliths, frontend applications and Next.js
    3. Methods of generating and serving content
    4. Project structure and core principles
    5. Differences between Next.js versions 12, 13, and 14.
    6. Community and ecosystem around Next.js (plugins, tools)
  2. Building Blocks
    1. Dev server
    2. Routing
    3. Pages
    4. Layouts
    5. Rendering
    6. Components
    7. API Routes
    8. Error Handling
    9. Data fetching
    10. Cache
    11. Image Optimization
  3. Routing
    1. App Router
    2. Defining Routes structure
    3. Changes regarding the Pages Router
    4. Route groups and dynamic Routes
    5. Route handlers
    6. Middleware and its role
    7. Pages
  4. Rendering
    1. Static Rendering
    2. Dynamic Rendering
    3. Dynamic Pages
    4. Streaming
    5. Incremental Static Regeneration (ISR)
    6. Hybrid Pages - SSR and SSG in the same application
    7. Layouts
    8. Nested layouts
    9. Error pages
  5. Server and Client Components
    1. Motivation beyond two types of components
    2. “use” directive
    3. How Server Components work under the hood
    4. Server Components lifecycle and use cases
    5. Client components
    6. Drawbacks and limitations
    7. Compositions Patterns
    8. Server actions
  6. Fetching, Cache and Revalidation
    1. Different methods of data retrieval
    2. Fetching
    3. Caching
    4. Revalidating
    5. Fetching Patterns
    6. Mutations
    7. Handling errors - best practices
    8. Integration with headless CMS
  7. Caching
    1. Automatic Static Optimization, Static Site Generation, Static Rendering
    2. Caching individual routes and Suspense boundaries
    3. Server Component Payload (SCP)
    4. Client component and SCP
    5. Remote cache
    6. Hydration and reconciliation
    7. Router cache
    8. Static and dynamic rendering
    9. Cache invalidation
    10. Trade-offs between different caching strategies
  8. Good practices
    1. React Context in Client Components
    2. Images, Fonts and Styling
    3. Builded functions (https://nextjs.org/docs/app/api-reference/functions)
    4. React Query
    5. GraphQL
    6. Optimizations
  9. Testing
    1. What and how should be tested in Next.js applications?
    2. Organization of testing environment
    3. Unit testing
    4. Integration tests
    5. Mock API
    6. Visual Regression Testing
    7. E2E testing
  10. Configuration and Deployment
    1. Configuration and env variables - common use cases
    2. Deployment and monitoring - common use cases


Pobierz program w formacie PDF

Trenerzy

Poznaj ekspertów, którzy mogą poprowadzić Twoje szkolenie.

Materiały związane ze szkoleniem

Idea renesansowej pracowni - Bottegi zakłada nieustanną pracę jej członków i dzielenie się jej wynikami.

  • Looking for the Holy Grail of Mobile Web Performance
    KATEGORIE: JS i Front-end

    W świecie mobilnym Istnieje przeświadczenie, że jedynie aplikacje natywne są w stanie sprostać oczekiwaniom użytkowników. Wraz z pojawieniem się Progresywnych Aplikacji Webowych, które mają przenieść na platformę webową wiele cech zarezerwowanych dotąd tylko dla rozwiązań natywnych, oczekiwania dotyczące wydajności są silniejsze niż kiedykolwiek wcześniej. Czy Web jest w stanie im sprostać?

    Autor Bottega:

    Adam Bar

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

  • JSON taki albo owaki... czyli kontrolowanie struktur z JSON Schema
    KATEGORIE: JS i Front-end

    Slides

    JSON jest najpopularniejszym formatem definiowania/wymiany danych w sieci. Jest elastyczny niczym XML oraz zwięzły, jak to tylko możliwe. Nie mniej, rozwiązłość strukturalna JSONów powoduje utratę kontroli nad tym, jakie dane są przechowywane. Jeśli chcesz kontrolować, co może być przechowywane w formacie JSON, zerknijmy na JSON Schema.

    Autor Bottega:

    Tomasz Ducin

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

  • A Ty co zrobisz bez frameworka
    KATEGORIE: JS i Front-end

    Podczas tej prezentacji poznamy lit-html – bibliotekę, która w prosty sposób abstrahuje zawiłości operacji na DOM-ie – oraz jej kuzyna lit-element, dzięki któremu Web Componenty są dziś na wyciągnięcie ręki. Sprawdzimy, jak wiele można mieć za tak niewiele i zastanowimy się, czy lit-html może stanowić alternatywę dla frameworków.

    Autor Bottega:

    Adam Bar

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

Zamów szkolenie

Imię i nazwisko:
Firma:
E-mail:
Nr tel:
Temat:
Wiadomość:

Jeżeli preferujesz osobisty kontakt to zawsze możesz zadzwonić.

Iwona Sobótka

Koordynatorka szkoleń


Twoje dane osobowe przetwarzamy, aby udzielić odpowiedzi na Twoje pytanie. Administratorem Twoich danych osobowych jest Bottega It Minds Sławomir Sobótka. Przysługuje Ci prawo wniesienia sprzeciwu wobec przetwarzania, prawo dostępu do danych, prawo żądania ich sprostowania, usunięcia lub ograniczenia ich przetwarzania. Szczegółowe informacje dotyczące przetwarzania Twoich danych osobowych znajdują się TUTAJ.