Kurs Next.js 13 w Praktyce
Odkryj możliwości i elastyczność frameworka Next.js, jednego z najbardziej efektywnych i dynamicznych narzędzi w ekosystemie JavaScript
46 lekcji
8h 8min
5 (6 oceny)
Next.js 13 w Praktyce - Projekt aplikacji SaaS
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!
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
Zawartość
Next.js 13 w Praktyce
12 rozdziały 46 lekcji 8h 8min
-
Wstęp
2min
-
Informacje wstępne
2min
Co będziemy budować?
2min
-
Konfiguracja projektu
30min
Inicjalizowanie projektu
7min
Inicjalizowanie repozytorium
4min
Deployment aplikacji na Vercel
3min
Przegląd serwisów i narzędzi
7min
Konfiguracja środowiska developerskiego
8min
-
Konfiguracja bazy danych
50min
Serwisy bazodanowe i setup PostgreSQL na DigitalOcean
6min
Omówienie struktury danych i konfiguracja Prismy
8min
Prisma schema i relacje w bazie
13min
Prisma studio i pierwsza migracja
2min
Seedowanie bazy danych danymi testowymi
23min
-
Routing aplikacji
26min
Deployment i zmienne środowiskowe na Vercel
4min
Teoretyczny wstęp do routingu w NextJS
8min
Schemat routingu w naszej aplikacji w postaci diagramu
5min
Przeniesienie schematu na kod
9min
-
Automatyzacja i uwierzytelnianie
39min
Czym jest Clerk i setup aplikacji
10min
SignUp route i zapis użytkownika w bazie
15min
Logowanie i SignIn route
3min
Deployment aplikacji i przetestowanie produkcyjne
11min
-
Marketing layout
26min
Header logo i nawigacja
8min
Button SignIn i SignUp
7min
Hero section
11min
-
App layout
51min
Boczna nawigacja
8min
Link w nawigacji
15min
Przycisk dodawania subskrypcji
4min
Przycisk zarządzania kontem
14min
SignOut
10min
-
Strona z dashboardem
2h 1min
Header na stronie Dashboard
10min
Seedowanie danymi istniejącego użytkownika
3min
Pobieranie danych
5min
Układ strony Dashboard
7min
Komponent ze statystykami płatności
15min
Logika do obliczania statystyk sumarycznych
15min
Logika do obliczania serwisów opłaconych i do opłacenia
12min
Komponent ze statystykami grup subskrypcji
19min
Tabelka w komponencie category breakdown
11min
Komponent tabelki z danymi
24min
-
Strona z subskrypcjami
39min
Komponent ze statystykami w widoku subskrypcji
19min
Komponent z danymi widoku subskrypcji
20min
-
Dodawanie subskrypcji
1h 40min
Dialog do dodania nowej subskrypcji
12min
Podstawowa struktura formularza do dodawania subskrypcji
12min
Stylowanie formularza
31min
Kontrola formularza
16min
Funkcja dodająca nową subskrypcję
29min
-
Zakończenie
1min
Podsumowanie
1min
Autor kursu
Daniel Noworyta
Full stack Developer
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Bardzo fajne wprowadzenie do Nexta z AppRouterem - od początku wszystko jest rzeczowo wyjaśnione. Fajnie, że podano alternatywy dla Digital Ocean - u mnie sprawdził się bardzo dobrze Railway. Jedynie według mnie trochę za dużo zabawy z Tailwindem na końcu, ale to taki nieznaczny minus jak dla mnie. Daniel ma super talent do tłumaczenia. Polecam każdemu i czekam na kolejny kurs! :)
Grzegorz Cymborski
4 września 2023
Świetny kurs i duża wiedza autora! Wiele praktycznych wskazówek i odniesień do ciekawych narzędzi, bibliotek. Na pewno poszerzyłem swoją wiedzę z zakresu autoryzacji, Prismy, TS, Tailwinda, Next.js i ogólnie "całościowego" tworzenia aplikacji. Rezultatem nie jest w pełni działająca aplikacja, ale materiał do dalszego rozwoju, co mnie osobiście bardzo inspiruje. Poza brakiem plików źródłowych w niektórych miejscach (szczególnie w przypadku listy subskrypcji i pliku konfiguracyjnego tsconfig-seed), minusem był dla mnie brak obiecanego podsumowania całego procesu. Wypatruję takowego w kolejnych rewizjach kursu :) Serdecznie polecam!
Mateusz
5 września 2023
Od jakiegoś czasu chciałem wejść w świat nexta i ten kurs mnie do tego zmotywował. Zawsze lubiłem naukę na praktycznych projektach i po zakończeniu kursu czuję, że jestem w stanie napisać coś swojego z wykorzystaniem nextJS.
Michał Lączak
20 września 2023
Mateusz Szydłowski
30 września 2023
Jestem trochę zawiedzony tym kursem. Niestety jest to kurs na którym przepisuje się kod, prowadzący bardzo mało wyjaśnia a odsyła do dokumentacji. Rzeczy kopiowane z generatorów pojawiające się na ekranie, łatwiej byłoby podać też kod w notatkach żeby nie musieć szukać w internecie. Kilka razy kod został zmieniony poza filmem - następuje cięcie i kod nagle jest zmieniony, momentami dużo czasu spędziłem na tym żeby znaleźć błąd a okazało się że w momencie cięcia kod się zmienił. Kurs jest niepełny - brakuje funkcji opisanych we wstępie, kilka pomyłek w kodzie nie zostaje rozwiązanych. Podczas kursu napotkałem wiele błędów, możliwe że wersje się zmieniły i przez to spędziłem kilka dni na naprawianiu errorów. Podsumowując, duża ilość kodu jest nie wytłumaczona - jeśli ktoś chce się nauczyć używania next.js to nie jest to kurs dla niego.
Laura Witkowska
11 grudnia 2023
Laura Witkowska
12 grudnia 2023
Kurs Next.js 13 w Praktyce
-
46 lekcji wideo
-
8h 8min materiału
-
Ostatnia rewizja 22.08.2023
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Next.js 13 w Praktyce
-
46 lekcji wideo
-
8h 8min materiału
-
Ostatnia rewizja 22.08.2023
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk