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

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)
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
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
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
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
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
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
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
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
Configuration and Deployment
1. Configuration and env variables - common use cases
2. Deployment and monitoring - common use cases

Pobierz program w formacie PDF

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

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

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

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.