Cyberpunk 2150
Witaj w Metropolii Quantum roku 2150. Naucz się Next.js budując zaawansowane aplikacje fullstack w futurystycznym mieście.
Czego się nauczysz
Główne projekty
W trakcie kursu zbudujesz prawdziwe projekty, które możesz dodać do swojego portfolio
Quantum Dashboard
Admin dashboard z SSR, autentykacją i bazą danych
Neural Network Blog
Blog platform z ISR, MDX i komentarzami
Mega City E-commerce
Sklep online z Stripe, koszyk i checkout
Program kursu
9 moduły pełne interaktywnych ćwiczeń i praktycznych projektów
Wejście do Metropolii
Konfiguracja Next.js
Setup projektu, struktura katalogów
15 ćwiczeń
- Wprowadzenie do React i Next.js
- Instalacja i konfiguracja środowiska programistycznego
- Inicjalizacja projektu i dostępne startery
- Struktura katalogów i plików w Next.js (app/ vs pages/)
- System komponentów - Client i Server Components
- Pierwsza aplikacja "Hello World" - krok po kroku - prosta strona dla firmy kosmicznej
- Instrumentacja i debugowanie aplikacji
- Narzędzia deweloperskie Next.js
- Turbopack i optymalizacja kompilacji
- Środowisko deweloperskie - narzędzia i praktyki
- Renderowanie w Next.js - przegląd strategii
Hyperloop miejski
Routing i Layouts
App Router, dynamic routes, layouts, metadata
22 ćwiczeń
- System routingu oparty na plikach
- Dynamiczne segmenty ścieżki i parametry
- Nawigacja z komponentem Link i useRouter
- Grupowanie i organizacja tras
- Zagnieżdżone ścieżki i parametry catch-all
- Loading UI i layout.tsx
- Obsługa 404 i przekierowań (not-found.js i redirects)
- Middleware i przechwytywanie żądań
- Prefetching i optymalizacja nawigacji
- Shallow Routing - nawigacja bez przeładowania
- Zaawansowany routing: Parallel, Intercepting i Route Groups
Kwantowe przetwarzanie
SSR, SSG, ISR
Server-Side Rendering, Static Generation, ISR
28 ćwiczeń
- Globalne style i CSS Modules
- Integracja z Tailwind CSS i konfiguracja w Next.js 15
- Shadcn/UI - Komponenty dla Next.js 15
- Komponent Image i optymalizacja obrazów w Next.js 15
- Strategie ładowania obrazów (lazy, eager, priority) w Next.js 15
- Optymalizacja czcionek i komponent Font w Next.js 15
- Zarządzanie zasobami statycznymi w katalogu public w Next.js 15
- Ikony, favicon i metadane wizualne w Next.js 15
- Animacje i przejścia w interfejsie użytkownika w Next.js 15
- Dark Mode i preferencje użytkownika w Next.js 15
- Performance Benchmarks w Next.js 15 - SSR vs SSG vs ISR
Sieci neuronowe
API Routes i Backend
API Routes, REST endpoints, middleware
25 ćwiczeń
System identyfikacji
Authentication
NextAuth.js, JWT, Sessions, OAuth
20 ćwiczeń
- Strategie renderowania w Next.js App Router
- Rewalidacja danych w Next.js App Router
- Streaming danych i React Suspense
- Skelety ładowania i wskaźniki postępu
- Częściowe prerenderowanie (Partial Prerendering)
- Zaawansowane strategie cachowania
- Edge Runtime i optymalizacja wydajności
- Performance Benchmarks w Next.js 15 - SSR vs SSG vs ISR
Centralny mainframe
Database Integration
Prisma, PostgreSQL, MongoDB, CRUD
24 ćwiczeń
- Tworzenie formularzy w React i Next.js
- Controlled vs Uncontrolled Components
- React Hook Form i zarządzanie stanem formularzy
- Walidacja formularzy z Zod
- Walidacja po stronie serwera z Server Actions
- Obsługa błędów formularzy i komunikaty
- Komponenty error.tsx dla obsługi błędów
- Obsługa błędów w Server Actions
- Usability i accessibility w formularzach
- Wielokrokowe formularze i przepływy
Interfejsy holograficzne
Styling i UI
Tailwind CSS, CSS Modules, UI libraries
18 ćwiczeń
- Podstawy uwierzytelniania w aplikacjach Next.js
- Implementacja NextAuth.js / Auth.js
- Strategie uwierzytelniania
- Podłączanie dostawców (Google, GitHub, Facebook)
- Sesje użytkowników i zarządzanie tokenami
- Role i uprawnienia użytkowników
- Middleware do ochrony tras
- Bezpieczeństwo aplikacji i OWASP
- Context Provider dla autentykacji
- Implementacja Clerk w Next.js
- Podsumowanie metod uwierzytelniania i autoryzacji
Optymalizacja kwantowa
Performance
Image optimization, lazy loading, caching
16 ćwiczeń
- Przygotowanie aplikacji do produkcji
- SEO i metadane dynamiczne
- Open Graph i udostępnianie na platformach społecznościowych
- Generowanie map witryn i robots.txt
- Integracja z Web Analytics
- Wdrażanie na Vercel, Netlify i innych platformach
- Zmienne środowiskowe i konfiguracja produkcyjna
- CI/CD i automatyzacja wdrożeń
- Monitoring wydajności i analityka błędów
- Progressive Web Apps i Service Workers
- Preview Deployments i środowiska staging
- Projekt: Pełne wdrożenie aplikacji Next.js do produkcji
Projekt: Mega City
Fullstack Project
Kompletna aplikacja fullstack
27 ćwiczeń
- Wprowadzenie do Next.js i Strapi
- Next.js i Stripe - Kompletny system płatności
- Next.js z Resend i React Email - Nowoczesny system mailowy
- Next.js z Zustand - Nowoczesne state management
- Server Actions - zaawansowane wzorce
- Next.js z TanStack Table - Zaawansowane tabele danych
- Typed Routes - Bezpieczne linki z TypeScript
- Internacjonalizacja z next-intl
- Next.js i Docker - Konteneryzacja Aplikacji
- Monorepo z Turborepo
- forbidden() i unauthorized() - Nowe funkcje Next.js 15
- after() API - Wykonywanie kodu po odpowiedzi
- use cache - Nowa era cachowania w Next.js 15
Motyw kursu
Metropolia Quantum i Zaawansowane Technologie
Każdy moduł osadzony jest w unikalnej tematyce, która sprawia, że nauka staje się przygodą.
Twój przewodnik
AI Guide Nexus
Sztuczna Inteligencja
Poprowadzi Cię przez wszystkie wyzwania i pomoże zdobyć nowe umiejętności.
Zacznij naukę Next.js 14 już dziś
Dołącz do CodeWorlds i odkryj nowoczesne metody nauki, które sprawiają, że programowanie staje się fascynujące i dostępne dla każdego.