Pokročilý vývoj v Next.js 16 Počítačový Kurz

Přehled Next.js 16 a pokročilá architektura

• Hlavní novinky a změny ve verzi Next.js 16.x
• Principy architektury App Routeru a jeho koncepce navrhování
• Rozdíly mezi serverovými a klientskými komponentami
• Strategie vykreslování: SSR, SSG, ISR a streaming
• Oblasti použití a osvědčené postupy pro strukturu projektu
• Navrhování aplikací s důrazem na výkon

Pokročilá správa tras a navigace

• Vnořené rozložení stránek a sdílené uživatelské rozhraní
• Skupiny tras pro lépe organizovanou strukturu navigace
• Paralelní trasy umožňující nezávislý průběh různých sekcí stránky
• Přesměrování tras a navigační modální dialogy
• Dynamické trasy a segmenty pro všechny možné cesty
• Obsluha požadavků na různé koncovky pomocí Route Handlerů
• Použití Middleware k zachycení a předzpracování požadavků

React Server Components a serverové funkce

• Podrobný rozbor modelu React Server Components
• Načítání dat na straně serveru
• Vytváření interaktivních uživatelských rozhraní s využitím Suspense
• Ošetřování chyb a způsoby jejich řešení
• Návrh náhradních stavů během načítání dat
• Částečné vykreslování obsahu a selektivní aktualizace rozhraní

Server Actions a formuláře

• Architektura Server Actions a jejich možnosti využití
• Ošetřování formulářů s využitím serverové logiky
• Metody validace zadaných dat
• Aktualizace uživatelského rozhraní bez čekání na potvrzení akce
• Ošetřování stavů při neaktivním vyplňování formuláře a poskytování zpětné vazby uživateli
• Nahrávání souborů a postupné zdokonalování funkcí formulářů

Pokročilé načítání dat a mezipaměť

• Funkce Fetch API v Next.js a memoizace požadavků
• Základy práce s Data Cache
• Nastavení Route Cache podle potřeb projektu
• Router Cache a strategie pro jeho vyprazdňování
• Způsoby znovunačítání dat: na požádání či časově řízené
• Použití streamingu při přenosu dat

Autentizace a autorizace

• Architektura autentizace v rámci Next.js
• Rozdílné strategie správy uživatelských relací
• Přístupové mechanismy založené na tokenech JWT
• Možnosti integrace systémů OAuth
• Implementace kontroly přístupu podle uživatelských rolí
• Ochrana jednotlivých tras pomocí Middleware

Integrace databází a ORM nástroje

• Hlediska týkající se architektury databází v aplikacích Next.js
• Připojení PostgreSQL k projektům Next.js
• Nastavení a používání nástroje Prisma ORM pro dotazy na data
• Možnosti využití nástroje Drizzle ORM a jeho migrace datových struktur
• Optimalizace připojení k databázi pomocí technik typu connection pooling
• Přístupy k migracím databázových schémat
• Použití vzorů repository pro organizované vyhledávání dat

Tvorba API rozhraní

• Nástroje a konvence určené k vytváření API tras v Next.js
• Metody implementace RESTful API rozhraní
• Ošetřování chyb při vyžadování dat z aplikace
• Návrh formátů odpovědí na požadavky uživatelů
• Mechanismy pro nahrávání souborů do systému
• Integrace a ověřování webhooků v komunikaci s externími systémy
• Omezení počtu žádostí z jednoho klienta a celková ochrana API před útoky

Optimalizace výkonu aplikací

• Analýza velikosti balíčku kódu a způsoby jeho optimalizace
• Rozdělování kódu na části s cílem urychlit jeho spuštění
• Dynamické nahrávání jednotlivých částí aplikace dle potřeby uživatele
• Optimalizace komponenty určené pro zobrazení obrázků
• Použití modulu next/font k efektivní optimalizaci písmen a typografie stránek
• Využití mechanismů lazy loading při vykreslování obsahu
• Zlepšování klíčových ukazatelů Core Web Vitals za účelem zvýšení rychlosti načítání stránek

Testování aplikací v Next.js

• Metody testování jednotlivých funkcí serverového i klientského kódu
• Používání speciálních nástrojů pro ověření chování komponent uživatelského rozhraní
• Testování celkových datových toků v rámci aplikace jako celku
• Používání nástrojů typu Playwright nebo Cypress k testování uživatelských scénářů v praxi
• Nahrazování skutečných služeb a API pomocí simulovaných odpovědí
• Ošetřování serverových komponent v rámci testovacích procedur
• Testování Server Actions a jejich správného fungování v praxi

Nasazení, DevOps a monitorování výkonu

• Nastavení konfigurace při tvorbě finální produkční verze projektu
• Správa proměnných prostředí určených k běhu aplikace v různém prostředí
• Vytváření kontejnerů Docker pro spouštění Next.js aplikací
• Návrh a realizace automatizovaných procesů CI/CD pro bezproblémové nasazování kódu
• Monitorování chodu aplikace včetně záznamu generovaných logů
• Sledování chyb a automatické hlášení jejich výskytů do systémů určených k reportingu
• Průběžné vyhodnocování výkonnostních ukazatelů v produkčním prostředí

Pokročilé architektonické vzory a závěrečný projekt

• Architektonické principy navrhování škálovatelných aplikací v Next.js
• Organizace jednotlivých funkcionalit a logických modulů projektu
• Běžné vzory používání při tvorbě komplexních aplikací v tomto frameworku
• Principy budování více tenantních systémů v Next.js
• Praktická práce na závěrečném projektu kurzu s lektorovým doprovodem
• Shrnutí kurzu, diskuze otázek a odpovědí ze strany účastníků