Kurs Next.js od podstaw - praktyczny projekt aplikacji
Opanuj framework Next.js od zera i zacznij tworzyć szybkie, dynamiczne strony i aplikacje. Ucz się w praktyce, tworząc pełnoprawną aplikację do wyszukiwania i oceniania filmów.
Oferta specjalna
Kup ten kurs za 93 zł z kodem
Minimalna wartość w koszyku, aby aktywować kod: 199 zł.
Dostęp od razu po zakupie ·
Płacisz raz i wchodzisz prosto do lekcji - bez subskrypcji, bez czekania na grupę.
Ten kurs jest częścią ścieżki
JavaScript Front-end Developer
15791 kursantów
Szczegóły, które warto znać
Opis szkolenia
Czego się nauczysz:
-
praktycznego zastosowania Next.js i React
-
tworzenia systemu autoryzacji i uwierzytelniania użytkowników
-
integracji z bazą danych przy pomocy drizzle.orm
-
walidacji danych przy pomocy biblioteki zod
-
tworzenia aplikacji w pełni zabezpieczonych typami dzięki Typescript
-
stylowania aplikacji za pomocą TailwindCSS
-
bezpiecznego wywoływania zewnętrznych API oraz integracji z zewnętrznymi usługami
-
wdrażania aplikacji na repozytorium oraz w wersji produkcyjnej na vercel.com
Znasz już podstawy JavaScript oraz React i chcesz zrobić kolejny krok, który zwiększy Twoje szanse na zdobycie atrakcyjnego stanowiska w branży IT? Chcesz tworzyć szybkie, skalowalne i nowoczesne aplikacje i rozwijać się jako full-stack developer? Chcesz opanować technologię, na która postawiły takie marki takie jak Spotify, TikTok, Nvidia, Nike czy Porsche? W takim razie ten kurs Next.js jest dla Ciebie!
W jego trakcie stworzysz pełnoprawną fullstackową aplikację umożliwiającą wyszukiwanie informacji o filmach oraz ich ocenianie przez użytkowników. Wspólnie przejdziemy przez wszystkie kroki od konfiguracji projektu, aż po wdrożenie na platformie Vercel. Oprócz samej obsługi i koncepcji związanych z frameworkiem Next.js, poznasz wiele technologii które są kluczowe w dzisiejszym Web Devie.
Opanujesz m.in. Typescript, TailwindCSS, pracę z bazą danych przy pomocy ORM’u Drizzle czy walidację danych za pomocą biblioteki Zod. Przyswoisz wiedzę na temat dobrych praktyk wdrażania poszczególnych modułów w tym ekosystemie oraz poznasz sposoby radzenia sobie z najpopularniejszymi błędami.
Budowa aplikacji krok po kroku
W trakcie kursu zajmiemy się kodowaniem aplikacji podobnej do typowych serwisów agregujących informacje o filmach i serialach, gdzie użytkownicy mogą je recenzować i oceniać. Budując aplikację z użyciem frameworka Next.js zadbamy o dodanie kluczowych funkcjonalności takich serwisów m.in. wyszukiwarki wraz z filtrowaniem, systemu rejestracji i logowania. Wszystkie umiejętności będziesz więc zdobywać w praktyce, a efektem finalnym kursu będzie projekt, który będziesz mógł dalej rozbudować według własnego uznania lub umieścić w portfolio.
Na początku kursu zajmiemy się omówieniem projektu. Przejdziemy przez najważniejsze funkcjonalności i możliwości przyszłej rozbudowy aplikacji. Zajmiemy się także konfiguracją środowiska pracy i edytora kodu, w którym będziemy pracować, czyli VS Code. Zobaczysz moją własną konfigurację oraz wtyczki, z których korzystam na co dzień. Następnie zainstalujemy niezbędne biblioteki oraz prześlemy naszego inicjalnego commita na repozytorium, które połączymy z platformą Vercel.
Praca nad stylami i UI
W kolejnych lekcjach poznasz niezwykle popularną bibliotekę TailwindCSS. Dowiesz się, jak wygląda pracą z tą biblioteką i jakie są jej najważniejsze wady i zalety. Nauczysz się stosować odpowiednie klasy, konfigurować i rozszerzać TailwindCSS o nowe, specjalne klasy oraz użyteczne wtyczki. W projekcie będziemy korzystać także z biblioteki komponentów shadCN, która ułatwi nam i przyspieszy pracę nad interfejsem użytkownika. Aplikacja, którą stworzymy w trakcie kursu będzie w pełni responsywna, dostosowana zarówno do komputerów, jak i urządzeń mobilnych, takich jak smartfony i tablety.
Routing oraz podstawy Next.js
W kolejnych etapach kursu poznasz fundamenty frameworka Next.js - poznasz podział komponentów na klienckie oraz serwerowe i wyjaśnię z czym się to wiążę. Dowiesz się, jak działa routing za pomocą plików i folderów w Next.js. Poznasz też najważniejsze komponenty dostarczane przez ten framework, czyli <Link /> oraz <Image />.
Zrozumiesz różne sposoby działania tych komponentów oraz opcje ich konfiguracji. W tym miejscu zaczniemy już budowę podstawowych elementów aplikacji takich jak menu. Poznasz też niezbędne hooki dostarczane przez Next.js, oraz omówimy pracę z metadata oraz fontami.
Pobieranie danych i praca z API
Z tego kursu Next.js dowiesz się, jak w łatwy i bezpieczny sposób pobierać dane z zewnętrznych usług. Dzięki temu bez problemu poradzisz sobie z każdym publicznym API, nawet jeżeli usługodawca nie przygotował żadnej biblioteki ułatwiającej pobieranie takich danych.
W tej części zbudujemy prostą usługę do pobierania danych o filmach, z jej pomocą będziemy tworzyć kolejne elementy aplikacji i wypełniać je treścią. Utworzymy m.in. slider na stronie głównej, podstronę filmu i serialu, czy podstronę wyszukiwania.
Pokażę Ci także jak łatwo zbudować bloga przy pomocy plików MDX. Dowiesz się jak je skonfigurować w Next.js, a przy okazji wdrożysz na blog nieco treści przy pomocy generatywnej sztucznej inteligencji.
Renderowanie i cachowanie
Przechodząc przez kolejne lekcje kursu zrozumiesz dwie najważniejsze koncepcje Next.js - dowiesz się, w jaki sposób obsługuje on renderowanie aplikacji, oraz poznasz 4 rodzaje cachowania. Dowiesz się, jak dokładnie wygląda cały proces renderowania ścieżki od momentu wysłania żądania, aż po wyświetlenie odpowiedzi, czyli w tym wypadku podstrony aplikacji.
Nauczysz się optymalnie używać cache i poznasz pojęcia, takie jak hydracja, czy full route cache. Omówimy także, na czym polega streaming stron i komponentów, a także generowanie stron dynamicznych jako statyczne w Next.js.
Obsługa bazy danych - autoryzacja i uwierzytelnienie
W trakcie kursu nauczysz się także obsługi bazy danych z pomocą biblioteki drizzle.orm. Zajmiemy się konfiguracją połączenia z bazą danych, dodamy odpowiednie zależności, a także napiszemy wspólnie pierwszą migrację. Utworzymy też pomocnicze klasy, które ułatwią korzystanie z tabeli baz danych. Wspólnie zbudujemy logikę uwierzytelnienia, czyli logowania oraz autoryzacji, czyli rejestracji dla naszej aplikacji. Do zwykłego systemu logowania dodamy także uwierzytelnienie poprzez Google. Dowiesz się również, w jaki sposób prawidłowo skonfigurować middleware w Next.js.
Mutacje i tworzenie własnego API
W kolejnych lekcjach dowiesz się, w jaki sposób poprawnie wysyłać żądania mutacji danych dzięki akcjom serwerowym zawartym w Next.js. Nauczysz się poprawnie wysyłać takie żądania poprzez formularze oraz poprzez Event Handlery np. onClick. Po stronie serwera nauczysz się walidować przychodzące dane oraz obsługiwać akcje. Z ich pomocą stworzymy prosty system komentarzy oraz ocen w naszej aplikacji.
Na koniec dowiesz się, jak w prosty sposób budować i obsługiwać własne API w Next.js.
Dostaniesz również garść cennych uwag oraz kilka sugestii dotyczących dalszej rozbudowy aplikacji.
Co jeszcze powinieneś wiedzieć?
Aby w pełni wykorzystać wiedzę zawartą w tym kursie, przyda Ci się podstawowa znajomość JavaScript oraz React. Jeżeli potrzebujesz nadrobić zaległości, możesz to zrobić z naszymi kursami:
Kup w pakiecie i oszczędź
Kurs Next.js od podstaw - praktyczny projekt aplikacji
169 zł
Kurs Node.js - dynamiczne aplikacje
119 zł
Cena za zakup pakietu
Oszczędzasz w pakiecie: 58 zł
Zyskujesz 23.04 zł w punktach na kolejne zakupy.
Kurs Next.js od podstaw - praktyczny projekt aplikacji
169 zł
Kurs JavaScript od podstaw
149 zł
Cena za zakup pakietu
Oszczędzasz w pakiecie: 64 zł
Zyskujesz 25.44 zł w punktach na kolejne zakupy.
Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku
159 zł
Kurs Next.js od podstaw - praktyczny projekt aplikacji
169 zł
Cena za zakup pakietu
Oszczędzasz w pakiecie: 66 zł
Zyskujesz 26.24 zł w punktach na kolejne zakupy.
Kurs Next.js od podstaw - praktyczny projekt aplikacji
169 zł
Kurs TypeScript
119 zł
Cena za zakup pakietu
Oszczędzasz w pakiecie: 58 zł
Zyskujesz 23.04 zł w punktach na kolejne zakupy.
Program kursu
10 modułów · 67 lekcji
1 · Wprowadzenie
- Wstęp 01m 52s
- Jak korzystać z materiałów? 02m 16s
- Czym jest Next.js? 01m 38s
- Omówienie projektu eKino 01m 41s
2 · Przygotowanie do pracy
- Instalacja i konfiguracja środowiska pracy 07m 23s
- Konfiguracja Edytora VS Code 05m 11s
- Opis struktury plików i folderów Next.js 02m 32s
- Konfiguracja projektu 05m 50s
3 · UI
- Omówienie biblioteki Tailwind CSS 06m 15s
- Podstawy Tailwind CSS 11m 31s
- Kolekcja komponentów shadcn i jej wdrożenie 08m 48s
- Plik global.css oraz tailwind.config.ts 06m 00s
4 · Routing oraz podstawy Next.js
- Komponenty klienckie i serverowe 05m 53s
- Routing w Next.js 10m 20s
- Strony, layouty oraz grupy 09m 20s
- Dynamiczny routing 07m 24s
- Nawigacja pomiędzy stronami - komponent - tworzenie Menu 14m 58s
- Menu dla wersji mobilnej z użyciem komponentu Dialog 04m 11s
- Nawigacja pomiędzy stronami - hook useRouter 09m 33s
- usePathname / useSelectedLayoutSegment/s do zaznaczania aktywnej pozycji w Menu 08m 01s
-
Omówienie komponentu
14m 08s - Metadata w Next.js 08m 16s
- Obsługa Fontów w Next.js 03m 09s
- Funkcja redirect 06m 01s
- Error handling w routingu 05m 52s
5 · Obsługa plików MDX w Next.js
- Instalacja oraz konfiguracja bibliotek do MDX 05m 32s
- Podstawy MDX 11m 17s
- Funkcje transformujące w mdx-components.tsx 11m 39s
- Dodanie postów oraz obrazków na bloga przy pomocy AI 10m 50s
6 · Pobieranie danych i rozbudowa aplikacji
- Pobieranie danych w Next.js 10m 39s
- Przedstawienie API - The Movie DB 12m 52s
- Pozyskanie klucza oraz omówienie pliku .env w projekcie 05m 00s
- Slider na stronie głównej - pobieranie danych 12m 23s
- Slider na stronie głównej - baner 15m 14s
- Filmy i seriale na stronie głównej - pobieranie danych oraz tworzenie komponentów 15m 33s
- Podstrona filmu i serialu - pobieranie danych 12m 20s
- Podstrona filmu i serialu - wizualizacja danych 16m 20s
- Dodanie galerii do podstrony filmu i serialu 07m 37s
- Komponent okruszków (breadcrumbs) 05m 43s
- Dodanie statycznych części strony głównej oraz stopki 07m 17s
- Podstrona wyszukiwania 08m 45s
- Komponent szukaj 06m 14s
- Rozszerzenie wyszukiwania o filtry - użycie hooku useSearchParams cz. 1 13m 38s
- Rozszerzenie wyszukiwania o filtry - użycie hooku useSearchParams cz. 2 16m 17s
7 · Renderowanie i cachowanie
- Budowanie strony, omówienie komendy build 04m 52s
- Renderowanie i cachowanie w Next.j 08m 03s
- Streaming - utworzenie skeleton loader'a 05m 49s
- Omówienie i użycie funkcji generateStaticParams 04m 39s
8 · Obsługa bazy danych - autoryzacja oraz uwierzytelnienie
- Inicjalizacja bazy danych na Vercel 02m 08s
- Biblioteka drizzle 03m 51s
- Biblioteka Next-Auth 11m 00s
- Dodanie dostawcy Google 04m 22s
- Formularz logowania 10m 45s
- Komponent Toast i Provider komponentów 05m 16s
- Obsługa uwierzytelnienia przez dane logowania na serwerze 08m 22s
- Middleware w Next.js 11m 25s
9 · Mutacje - Server Actions
- Zasady działania i korzystania z Server Actions 04m 53s
- Biblioteka Zod - tworzenie pierwszych walidatorów 06m 26s
- Widok rejestracji - pierwsza akcja 14m 24s
- Aktualizacja danych na profilu oraz aktualizacja tokenu JWT 16m 32s
- Layout w dashboard oraz kolejna budowa aplikacji 06m 00s
- Widok komentarzy - tworzenie i oceny 11m 02s
- Schemat komentarzy oraz akcje 14m 26s
- Dodawanie i wyświetlanie komentarzy, hook useOptimistic 14m 29s
10 · Zakończenie
- Route handlers czyli własne API w Next.js 04m 39s
- Kilka cennych uwag i rozbudowa aplikacji 07m 43s
- Słowo na zakończenie 01m 03s
Twój instruktor
Sebastian Machaj
Full Stack Web Developer
Opinie kursantów
„Cieszę się, że zdecydowałem się na ten kurs, ponieważ pozwolił mi on nie tylko zrozumieć podstawy Next.js, ale także dał możliwość stworzenia rzeczywistej aplikacji. Instrukcje są jasne i przystępne, a praktyczne podejście sprawia, że nauka jest angażująca."
„Bardzo dobry kurs"
„Bardzo dobry kurs. Polecam!"
„Polecam kurs Next.js od podstaw - praktyczny projekt aplikacji. Włąśnie takiego kursu potrzebowałem po teoretycznym wstępie, który wcześniej przyswoiłem. Materiał właściwie dobrany, a kurs bardzo dobrze poprowadzony"
„Bardzo fajnie prowadzony kurs. Dużo technicznych aspektów."
„Wszystko OK, Polecam"
„Cieszę się, że zdecydowałem się na ten kurs, ponieważ pozwolił mi on nie tylko zrozumieć podstawy Next.js, ale także dał możliwość stworzenia rzeczywistej aplikacji. Instrukcje są jasne i przystępne, a praktyczne podejście sprawia, że nauka jest angażująca."
Najczęściej zadawane pytania
Jak wygląda uczestnictwo w kursie online?
Kursy online w strefakursów.pl to kompletne pakiety materiałów wideo przygotowane przez zespół naszych specjalistów. Po zakupie otrzymujesz natychmiastowy dostęp do wszystkich lekcji, testów i materiałów dodatkowych na swoim koncie - możesz zacząć się uczyć od razu, bez czekania. Konto jest bezpłatne i możesz założyć je w dowolnym momencie lub w trakcie dokonywania pierwszego zakupu w serwisie strefakursów.pl. Materiały, do których otrzymasz dostęp, pozwolą Ci rozwinąć się zawodowo i podnieść swoje kwalifikacje. Każdy kurs przepełniony jest praktyczną wiedzą, która ułatwi Ci osiągnięcie wymarzonych życiowych celów. Zdobytą wiedzę i postępy możesz w łatwy sposób zweryfikować za pomocą licznych testów i ćwiczeń dołączonych do każdego kursu.
Czy otrzymam certyfikat ukończenia kursu?
Do każdego ukończonego przez Ciebie kursu wystawiamy imienny certyfikat w formacie PDF - będzie on dostępny na Twoim koncie w zakładce Certyfikaty. Warunkiem jego otrzymania jest zaliczenie testów dołączonych do kursu oraz obejrzenie wszystkich lekcji. Na certyfikacie znajduje się Twoje imię oraz nazwisko, nazwa ukończonego kursu, data wystawienia i unikalny numer certyfikatu. Certyfikat możesz wydrukować lub opublikować w Internecie za pośrednictwem specjalnego odnośnika np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV. Pamiętaj, że certyfikatów nie wysyłamy w formie papierowej.
Czy otrzymam fakturę VAT za zamówienie?
Tak, do każdego zamówienia wystawiamy fakturę VAT (23%) lub paragon - w zależności od danych podanych przy zakupie. Pobierzesz ją z zakładki Historia zamówień na swoim koncie. Powiadomimy Cię mailowo, gdy dokument będzie gotowy.
Potrzebujesz proformy? Zaznacz pole "Chcę otrzymać dokument proforma" przy składaniu zamówienia lub napisz: biuro@strefakursow.pl
Zakup w aplikacji mobilnej? Jeśli kupujesz przez App Store lub Google Play, sprzedawcą jest odpowiednio Apple lub Google. Fakturę otrzymasz od nich zgodnie z ich zasadami:
Możesz również pobrać dokument przez stronę Apple. Przejdź pod ten adres: https://reportaproblem.apple.com/, następnie zaloguj się swoim Apple ID, znajdź zakup na liście i kliknij, aby zobaczyć szczegóły i ewentualnie pobrać dokument. Apple zwykle wystawia fakturę jako dostawca usług cyfrowych. Jeśli potrzebujesz faktury VAT, możesz skontaktować się z pomocą techniczną Apple, aby uzyskać dodatkowe informacje na temat zgodności faktury z przepisami w Twoim kraju.
Zakup w Google Play(Android)
Gdy dokonujesz zakupu w aplikacji strefakursów.pl na Android za pośrednictwem Google Pay sprzedawcą jest Google. Fakturę lub dokument zakupu znajdziesz zgodnie z poniższą instrukcją:
- Otwórz aplikację Google Play.
- Kliknij ikonę swojego profilu w prawym górnym rogu.
- Wybierz Płatności i subskrypcje > Historia zakupów.
- Znajdź interesujący Cię zakup i kliknij na niego, aby zobaczyć szczegóły. Jeśli chcesz pobrać fakturę, kliknij przycisk Faktura (jeśli jest dostępny).
Możesz również znaleźć fakturę na stronie Google Pay. Przejdź pod ten adres: pay.google.com i zaloguj się na swoje konto Google, z którego dokonano zakupu. W sekcji Aktywność znajdziesz wszystkie transakcje dokonane w Google Play. Kliknij daną transakcję, aby zobaczyć szczegóły i pobrać fakturę.
Ile mam czasu na przerobienie materiałów?
Tyle, ile potrzebujesz! Uczysz się we własnym tempie - bez presji i bez abonamentu. Płacisz raz i zachowujesz dostęp do zakupionego kursu na swoim koncie bez z góry określonej daty końcowej. Przez pierwsze 12 miesięcy od zakupu dbamy o aktualność materiałów i zapewniamy pełną dostępność testów oraz certyfikatu. Później kurs nadal pozostaje na Twoim koncie - wracasz do lekcji, kiedy masz ochotę. Szczegółowe zasady dostępu znajdziesz w regulaminie.
Zobacz też
Podobne kursy
Programowanie
Kurs Node.js - dynamiczne aplikacje
119 zł
Programowanie
Kurs React od podstaw - zbuduj nowoczesną aplikację webową krok po kroku
159 zł
Programowanie
Kurs JavaScript od podstaw
149 zł
Programowanie
Ekosystem JavaScript - wprowadzenie
119 zł
Programowanie
Kurs Programowanie funkcyjne w JavaScript
119 zł
Programowanie
Kurs Programowanie obiektowe w JavaScript
119 zł
Programowanie
Kurs Programowanie asynchroniczne w JavaScript
119 zł
Programowanie
Kurs ES6 nowa generacja JavaScript
119 zł
IT i oprogramowanie
Jak zostać Full Stack Developerem
119 zł
Programowanie
Kurs Webpack
119 zł
Ten kurs jest częścią ścieżki
JavaScript Front-end Developer
Zostań developerem najpopularniejszego języka współczesnej sieci Web. Zdobądź niezbędne umiejętności i pracuj w niezwykle dynamicznej dziedzinie.
Dostęp od razu po zakupie ·
169 zł

