Masz już konto? Zaloguj się

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

4 (7 oceny)

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!

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

    Wprowadzenie

    Podgląd lekcji

    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

Inne kursy tego autora
Zbuduj własne portfolio z Tailwind CSS Next.js 13 w Praktyce Kurs Tailwind CSS

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

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

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

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