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

DARMOWE FRAGMENTY

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

JavaScript Front-end Developer

14631 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

Oszczędź 50% z kodem: ROZWOJ
Najczęściej kupowane razem:

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Kurs JavaScript od podstaw

Razem do zapłaty

144 zł

-50% 288 zł

+1440 punktów premium

KUP W PAKIECIE

Kurs Next.js od podstaw - praktyczny projekt aplikacji

Razem do zapłaty

134 zł

-50% 268 zł

+1340 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ł

+1290 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ł

+1440 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 Podgląd 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 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

47349 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 2501 wszystkich opinii.

Joanna Wrońska

22 sierpnia 2024

5.0

Strefakursów.pl to rewelacyjne miejsce do nauki! Kursy są na bardzo wysokim poziomie, zarówno pod względem merytorycznym, jak i jakości materiałów. Wszystko jest przygotowane z dbałością o szczegóły, co sprawia, że nauka jest niezwykle efektywna. Co więcej, obsługa… Czytaj więcej

Maciej Garczyk

19 sierpnia 2024

5.0

Strefakursów.pl to rewelacyjny portal edukacyjny, który wyróżnia się bogatą ofertą kursów online na najwyższym poziomie. Niezależnie od tego, czy jesteś początkującym, czy zaawansowanym użytkownikiem, znajdziesz tutaj materiały dopasowane do Twoich potrzeb. Kursy są… Czytaj więcej

Filip Chmielecki

18 sierpnia 2024

5.0

Z całego serca polecam strefę kursów. Od lat kupuję u nich kursy doszkalając się w nowych dziedzinach.

A.H. Photography

10 sierpnia 2024

5.0

Najlepsze miejsce do rozwoju kariery i zmian. Świetne kursy, przystępne ceny . Rewelacyjna obsługa klienta .

Sandra Komarnicka

2 lipca 2024

5.0

strefakursów.pl to przystępne miejsce do realizacji wyznaczonych przez siebie celów rozwojowych. Mnogość kursów oraz dobór specjalistów prowadzących dane zagadnienia na wysokim poziomie. Przystępne ceny z licznymi promocjami. Certyfikaty zaświadczające o nabytych… Czytaj więcej

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

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.9/5

z 2501 opinii w Google

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

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