Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 24/ 46Boczna nawigacja
Next.js 13 w Praktyce: Boczna nawigacja
Czego się nauczysz
- Pełne zrozumienie architektury i możliwości frameworka Next.js
- Zdolność tworzenia bezpiecznej autoryzacji i autentykacji z Clerk
- Efektywne zarządzanie danymi za pomocą Prismy i PostgreSQL na DigitalOcean
- Umiejętność budowania intuicyjnej nawigacji za pomocą routingu Next.js
- Umiejętność wdrożenia aplikacji na Vercel
- Dogłębne zrozumienie zarządzania stanem i wykorzystywania server actions
Next.js 13 w Praktyce - Projekt aplikacji SaaS
Odkryj możliwości i elastyczność frameworka Next.js, jednego z najbardziej efektywnych i dynamicznych narzędzi w ekosystemie JavaScript. Ten kurs pokazuje, jak wykorzystać zaawansowane funkcje Next.js do tworzenia pełnoprawnej aplikacji do zarządzania subskrypcjami. Będziesz się uczyć od podstaw, poprzez omówienie najważniejszych elementów jak autoryzacja i autentykacja, integracja z bazą danych, routing i nawigacja, aż do finalnego wdrożenia na Vercel. Każdy aspekt został dogłębnie opracowany, aby dać Ci solidne podstawy i umożliwić tworzenie własnych, zaawansowanych aplikacji w Next.js.
Autoryzacja i autentykacja z Clerk
Naucz się tworzyć bezpieczne systemy uwierzytelniania i autoryzacji, korzystając z Clerk. Pokażę Ci, jak to robić krok po kroku, aby Twoje aplikacje były bezpieczne i profesjonalne.
Integracja z bazą danych za pomocą Prismy
Zrozumiesz, jak skutecznie i bezboleśnie połączyć swoją aplikację Next.js z bazą danych PostgreSQL na DigitalOcean. Pokażę Ci, jak używać Prismy, aby ułatwić ten proces.
Routing i nawigacja
Dowiesz się, jak zarządzać routingiem i nawigacją w swojej aplikacji, aby użytkownicy mogli łatwo i intuicyjnie poruszać się po Twojej stronie.
Deployment na Vercel
Pokażę Ci, jak z łatwością wdrożyć swoją aplikację na Vercel, jednym z najpopularniejszych środowisk hostingowych dla aplikacji Next.js.
Zarządzanie stanem i server actions
Nauczysz się zarządzać stanem aplikacji i jak wykorzystać server actions w praktyce, co pozwoli Ci na tworzenie bardziej zaawansowanych i dynamicznych funkcji.
Dla kogo jest ten kurs?
Ten kurs jest dla osób, które już mają pewne doświadczenie z JavaScript i chcą zgłębić swoje zrozumienie Next.js. Zakładamy, że znasz podstawy TypeScript, TailwindCSS, ale nie potrzebujesz doświadczenia z Next.js - wszystko wyjaśnię Ci od podstaw!
Kurs Next.js 13 w Praktyce
12 rozdziałów46 lekcji8h 8min
Wstęp
2min
- Wprowadzenie2min(zablokowana)
Informacje wstępne
2min
- Co będziemy budować?2min(zablokowana)
Konfiguracja projektu
30min
- Inicjalizowanie projektu7min(zablokowana)
- Inicjalizowanie repozytorium4min(zablokowana)
- Deployment aplikacji na Vercel3min(zablokowana)
- Przegląd serwisów i narzędzi7min(zablokowana)
- Konfiguracja środowiska developerskiego8min(zablokowana)
Konfiguracja bazy danych
50min
- Serwisy bazodanowe i setup PostgreSQL na DigitalOcean6min(zablokowana)
- Omówienie struktury danych i konfiguracja Prismy8min(zablokowana)
- Prisma schema i relacje w bazie13min(zablokowana)
- Prisma studio i pierwsza migracja2min(zablokowana)
- Seedowanie bazy danych danymi testowymi23min(zablokowana)
Routing aplikacji
26min
- Deployment i zmienne środowiskowe na Vercel4min(zablokowana)
- Teoretyczny wstęp do routingu w NextJS9min(zablokowana)
- Schemat routingu w naszej aplikacji w postaci diagramu5min(zablokowana)
- Przeniesienie schematu na kod9min(zablokowana)
Automatyzacja i uwierzytelnianie
39min
- Czym jest Clerk i setup aplikacji10min(zablokowana)
- SignUp route i zapis użytkownika w bazie15min(zablokowana)
- Logowanie i SignIn route3min(zablokowana)
- Deployment aplikacji i przetestowanie produkcyjne11min(zablokowana)
Marketing layout
26min
- Header logo i nawigacja8min(zablokowana)
- Button SignIn i SignUp7min(zablokowana)
- Hero section11min(zablokowana)
App layout
51min
- Boczna nawigacja8min(zablokowana)
- Link w nawigacji15min(zablokowana)
- Przycisk dodawania subskrypcji4min(zablokowana)
- Przycisk zarządzania kontem14min(zablokowana)
- SignOut10min(zablokowana)
Strona z dashboardem
2h 1min
- Header na stronie Dashboard10min(zablokowana)
- Seedowanie danymi istniejącego użytkownika3min(zablokowana)
- Pobieranie danych5min(zablokowana)
- Układ strony Dashboard7min(zablokowana)
- Komponent ze statystykami płatności15min(zablokowana)
- Logika do obliczania statystyk sumarycznych15min(zablokowana)
- Logika do obliczania serwisów opłaconych i do opłacenia12min(zablokowana)
- Komponent ze statystykami grup subskrypcji19min(zablokowana)
- Tabelka w komponencie category breakdown11min(zablokowana)
- Komponent tabelki z danymi24min(zablokowana)
Strona z subskrypcjami
39min
- Komponent ze statystykami w widoku subskrypcji19min(zablokowana)
- Komponent z danymi widoku subskrypcji20min(zablokowana)
Dodawanie subskrypcji
1h 40min
- Dialog do dodania nowej subskrypcji12min(zablokowana)
- Podstawowa struktura formularza do dodawania subskrypcji12min(zablokowana)
- Stylowanie formularza31min(zablokowana)
- Kontrola formularza16min(zablokowana)
- Funkcja dodająca nową subskrypcję29min(zablokowana)
Zakończenie
1min
- Podsumowanie1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.