✅ Nowoczesny system szkoleniowy dla firm i zespołów! Zobacz ofertę

Zastanawiasz się jak zwiększyć motywację i zaangażowanie w swoim zespole? Poznaj nasz nowoczesny system szkoleniowy dla firm i zespołów. Dzięki skutecznemu systemowi motywacji aż 80% użytkowników kończy szkolenie! Twórz programy nauczania dopasowane nie tylko do specyfiki Twojej działalności, ale przede wszystkim do potrzeb działu, stanowiska czy konkretnego pracownika. Wybierz pakiet

✅ Ucz się o dowolnej porze i oglądaj szkolenia bez dostępu do Internetu w aplikacji mobilnej

Pobierz naszą aplikację mobilną strefakursów.pl i ucz się bez żadnych ograniczeń. Pobieraj kursy i lekcje na swoje urządzenie i oglądaj nawet bez dostępu do Internetu. Dla nowych użytkowników aplikacji mamy niespodziankę! Aby odebrać prezent musisz zezwolić aplikacji na wysyłanie powiadomień. Pobierz aplikację

Pomoc i kontakt

Koszyk

Zaloguj się

strefakursów.pl Programowanie

Kurs Next.js od podstaw - praktyczny projekt aplikacji:Trailer

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.

Kurs Next.js od podstaw - praktyczny projekt aplikacji:Funkcja redirect

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.

Kurs Next.js od podstaw - praktyczny projekt aplikacji:Dodanie galerii do podstrony filmu i serialu

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.

Kurs Next.js od podstaw - praktyczny projekt aplikacji:Route handlers czyli własne API w Next.js

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.

Kurs Next.js od podstaw - praktyczny projekt aplikacji:Middleware w Next.js

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.

DARMOWE FRAGMENTY

Ten kurs jest częścią ścieżki:

JavaScript Front-end Developer

15157 użytkowników podnosi swoje kwalifikacje w tej ścieżce kariery.

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.

Wprowadzenie do tworzenie gier - jak wejść do gamedev.

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:

ZOBACZ WIĘCEJ

50% zniżki do niedzieli!
Często kupowane w pakiecie

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Kurs JavaScript od podstaw

Razem do zapłaty

144 zł

-50% 288 zł

+1152 punktów premium

KUP W PAKIECIE

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Kurs Node.js - dynamiczne aplikacje

Razem do zapłaty

129 zł

-50% 258 zł

+1032 punktów premium

KUP W PAKIECIE

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Kurs React od podstaw

Razem do zapłaty

144 zł

-50% 288 zł

+1152 punktów premium

KUP W PAKIECIE

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Razem do zapłaty

134 zł

-50% 268 zł

+1072 punktów premium

KUP W PAKIECIE

Nie wiesz od czego zacząć naukę?

Chętnie pomożemy! Odpowiedz na pytania przygotowane przez naszych specjalistów, a my dopasujemy ścieżkę rozwoju do Twoich preferencji.

Rozpocznij teraz

Program nauczania

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 Podgląd 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 Podgląd 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 Podgląd 04m 39s

Kilka cennych uwag i rozbudowa aplikacji 07m 43s

Słowo na zakończenie 01m 03s

Ocena uczestników

51108 użytkowników oceniło i zrecenzowało szkolenia strefakursów.pl

Średnia ocena uczestników w niezależnym serwisie Google to 4.9/5 ⭐⭐⭐⭐⭐ z 2701 wszystkich opinii.

79%

21%

Recenzje użytkowników (4)

Robert Sajdak

8 stycznia 2025

5.0

Bez wątpienia dużą zaletą tego kursu jest jego aktualność technologiczna i to, że cały materiał oparty jest o zbudowanie jednej konkretnej aplikacji na Next.js. Kurs jest bardzo rozległy i wymaga znajomości podstawowych zagadnień z webdevelopmentu.

Piotr Bartnik

29 listopada 2024

5.0

W tej chwili najlepszy kurs w internecie w polskiej wersji wart swojej ceny.

Kamil Zygarlicki

17 listopada 2024

5.0

Polecam.

Dawid Marek

14 listopada 2024

4.0

Jakość prowadzonego kursu oraz wiedza prowadzącego na wysokim poziomie, dzięki czemu dowiedziałem się wielu cennych informacji z Next.js oraz poznałem kilka bibliotek, z którymi wcześniej nie pracowałem np. Drizzle ORM czy Zod.

Najczęściej zadawane pytania

Jak wygląda uczestnictwo w kursie online?

Kursy online w strefakursów.pl to wideoporadniki przygotowane przez zespół naszych specjalistów. Twoje uczestnictwo w szkoleniu polega na tym, że otrzymujesz dostęp do wykładów wideo oraz innych materiałów szkoleniowych za pośrednictwem platformy szkoleniowej zaraz po zalogowaniu się na swoje konto. 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ść Twoje 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 w nauce 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 szkolenia i jaką ma on formę?

Do każdego ukończonego przez Ciebie szkolenia wystawiamy imienny certyfikat. Warunkiem jego otrzymania jest zaliczenie testów dołączonych do kursu. Na certyfikacie znajduje się Twoje imię oraz nazwisko, nazwa ukończonego kursu, data wystawienia i nazwa instytucji certyfikującej. Warto podkreślić, że jesteśmy wpisani do Rejestru Instytucji Szkoleniowych (nr wpisu 2.12/00119/2017).

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.

Czy otrzymam fakturę VAT za zamówienie?

Tak, do każdego zamówienia mamy obowiązek wystawić fakturę VAT (23%) lub paragon. Rodzaj dokumentu zależy od danych, które podasz w formularzu podczas składania zamówienia. Faktury zwykle wystawiamy do 3 dni roboczych od momentu zaksięgowania wpłaty. Poinformujemy Cię o tym fakcie mailowo, a dokument będzie można pobrać bezpośrednio z poziomu zakładki Historia zamówień na Twoim koncie w strefakursów.pl. Jeśli potrzebujesz dokumentu Proforma lub faktury odroczonej, złóż zamówienie, a w uwagach do zamówienia dodaj komentarz “Proforma” lub "Faktura z odroczonym terminem płatności", lub skontaktuj się z nami telefonicznie bądź mailowo (biuro@strefakursow.pl).

Zakup w aplikacji mobilnej strefakursów.pl, a faktura

Zakup w App Store(iOS)

Gdy dokonujesz zakupu w aplikacji strefakursów.pl na iOS za pośrednictwem Apple Pay sprzedawcą jest Apple. Fakturę lub dokument zakupu znajdziesz zgodnie z poniższą instrukcją:

Otwórz Ustawienia na iPhone
Kliknij swoje imię i nazwisko na górze ekranu, aby przejść do ustawień Apple ID.
Wybierz Multimedia i zakupy > Pokaż konto.
Przewiń w dół i wybierz Historia zakupów.
Znajdź interesujący Cię zakup i kliknij na niego, aby zobaczyć szczegóły oraz możliwość pobrania faktury.

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ę.

Czy dostęp do szkolenia jest ograniczony czasowo?

Po opłaceniu zamówienia otrzymujesz nielimitowany dostęp do zakupionych materiałów. Dzięki temu, że szkolenia są dla Ciebie dostępne zarówno online za pośrednictwem naszej platformy szkoleniowej i offline w aplikacji mobilnej strefakursów.pl, możesz w dowolnym czasie i miejscu powracać do obejrzanych lekcji i powtarzać materiał bez ograniczeń. Dodatkowo po ukończeniu całego szkolenia otrzymasz imienny certyfikat poświadczający Twój udział w szkoleniu. Certyfikat możesz opublikować np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV.

Sebastian Machaj

Full Stack Web Developer

4.8

(4 ocen)

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Q: ✅ Dożywotni dostęp do szkolenia i możliwość powtarzania materiału w dowolnym miejscu i czasie.

Po opłaceniu zamówienia otrzymujesz nielimitowany dostęp do zakupionych materiałów . Dzięki temu, że szkolenia są dla Ciebie dostępne zarówno online za pośrednictwem naszej platformy szkoleniowej i offline w aplikacji mobilnej strefakursów.pl , możesz w dowolnym czasie i miejscu powracać do obejrzanych lekcji i powtarzać materiał bez ograniczeń. Dodatkowo po ukończeniu całego szkolenia otrzymasz imienny certyfikat poświadczający Twój udział w szkoleniu. Certyfikat możesz opublikować np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV.

Q: ✅ Nie wiesz od czego zacząć naukę? Chętnie pomożemy!

W naszej ofercie znajdują się setki kursów online, jeśli nie wiesz od czego zacząć naukę zaufaj naszemu doświadczeniu. Odpowiedz na pytania przygotowane przez naszych specjalistów, a my dopasujemy ścieżkę rozwoju do Twoich preferencji. Rozpocznij teraz

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.

Kto pyta nie błądzi! Zobacz Najczęściej zadawane pytania

🔥 Gorący temat: W tym tygodniu 109 użytkowników obejrzało to szkolenie

Rozpocznij naukę teraz za darmo, zapłać w ciągu 30 dni z lub – Jak to działa?