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