Kurs Next.js

Darmowy, interaktywny kurs Next.js, który prowadzi cię od komponentów Reacta do prawdziwej aplikacji: routing, layouty, komponenty serwerowe i klienckie, pobieranie danych i server actions. Podpowiedzi AI pomagają, gdy utkniesz, a na koniec dostajesz darmowy certyfikat.

ZACZNIJ NAUKĘ(za darmo)

Zobacz program Podstawy Next.js online

1,529+ zapisanych osób

47 lekcje32 wyzwania99 pytania quizowe

Dla początkujących
Pomoc AI przy programowaniu
Praktyczne, interaktywne lekcje
Narracja audio w każdej lekcji
Quizy sprawdzające wiedzę
Darmowy certyfikat ukończenia

Program

1 sekcje1 projekty47 lekcje32 wyzwania99 pytania quizowe

Ta sekcja jest częścią ścieżki React. Pełny program ma więcej sekcji. Kliknij dowolny podgląd poniżej, aby zobaczyć go na stronie ścieżki.

Sekcja 1Podstawy42 lekcje
Sekcja 2
Podstawy Next.js
Zacznij sekcjęZacznijRozwińZwińPrzejdź od komponentów React do prawdziwej aplikacji: poznaj routing oparty na systemie plików, układy, komponenty serwerowe i klienckie, pobieranie danych, server actions oraz stwórz kompletny projekt Next.js.47 lekcje32 wyzwania99 pytania1 projekt
Dlaczego Next.js
4 lekcje39
01Co dodaje Next.jsWyzwanieQuiz
02Folder appQuiz
03Twoja pierwsza stronaWyzwanieQuiz
04Podsumowanie: Dlaczego Next.jsWyzwanie
Routing i linki
6 lekcje516
01Foldery to ścieżkiQuiz
02Zagnieżdżone ścieżkiWyzwanieQuiz
03Łączenie stronWyzwanieQuiz
04Dynamiczne ścieżkiWyzwanieQuiz
05Strony nie znalezionoWyzwanieQuiz
06Podsumowanie: routingWyzwanie
Układy i metadane
6 lekcje515
01Układ głównyQuiz
02Wspólna nawigacjaWyzwanieQuiz
03Zagnieżdżone układyWyzwanieQuiz
04Metadane stronyWyzwanieQuiz
05Dynamiczne metadaneWyzwanieQuiz
06Podsumowanie: układyWyzwanie
Serwer i klient
6 lekcje515
01Dwa rodzaje komponentówQuiz
02Odczytywanie błęduWyzwanieQuiz
03Linia „use client”WyzwanieQuiz
04Ograniczaj części klienckieWyzwanieQuiz
05Serwer wewnątrz klientaWyzwanieQuiz
06Podsumowanie: serwer i klientWyzwanie
Dane na serwerze
6 lekcje516
01Komponenty asynchroniczneWyzwanieQuiz
02Oczekiwanie na parametry trasyWyzwanieQuiz
03Dwa pobrania narazWyzwanieQuiz
04Stany ładowaniaWyzwanieQuiz
05Obsługa błędówQuiz
06Podsumowanie: pobieranie danychWyzwanie
Akcje serwerowe
5 lekcje413
01Czym jest akcja serwerowaQuiz
02Formularze, które działająWyzwanieQuiz
03Odczytywanie danych formularzaWyzwanieQuiz
04Odświeżanie stronyWyzwanieQuiz
05Podsumowanie: akcje serweroweWyzwanie
Nawigacja po stronie klienta
5 lekcje515
01Aktywny linkWyzwanieQuiz
02Routing programowyWyzwanieQuiz
03Filtrowanie za pomocą URLWyzwanieQuiz
04Obsługa trasWyzwanieQuiz
05Podsumowanie: nawigacjaWyzwanie
Projekt: Coddy Eats
Projekt9 lekcje
01Krok 1: SzkieletProjekt
02Krok 2: Siatka menuProjekt
03Krok 3: Strony dańProjekt
04Krok 4: Stan ładowaniaProjekt
05Krok 5: Tytuły stronProjekt
06Krok 6: Dodawanie do koszykaProjekt
07Krok 7: Filtrowanie kategoriiProjekt
08Krok 8: Dodawanie opiniiProjekt
09Krok 9: Wyszukiwanie na żywoProjekt

Zobacz pełny program ścieżki React

Co dostajesz

Wszystko, czego potrzebujesz do nauki programowania

Ucz się w praktyce

Pisz prawdziwy kod, odpytuj bazy danych, twórz strony internetowe i opanuj prompty AI. Nasze interaktywne lekcje obejmują wszystkie umiejętności, których potrzebuje współczesny programista.

playground.js

Edytor kodu

1const greeting = "Hello, Coddy!"

2function sayHi(name) {

3 return greeting + " " + name

Test #1

Test #2

Test #3

Dane wejściowe

"Alex"

Wynik

"Hello, Coddy! Alex"

Buduj swoją serię

Ucz się regularnie i patrz, jak rosną twoje postępy! Śledź codzienny nawyk programowania, chroń serię dzięki zamrożeniom i zdobywaj nagrody za każdy dzień nauki.

12 dni serii

Wróć jutro, aby utrzymać serię!

January 2026

Podwójnie albo nic

Dzień 5 z 7

Zamrożenie serii

2 left

Programuj wszędzie

Zabierz naukę programowania ze sobą! Bez konfiguracji i pobierania plików: po prostu otwórz i zacznij kodować. Dostępne na iOS, Androida i w przeglądarce, z oceną 4,9 gwiazdki.

250

Zmienne

KONTYNUUJ

4.9

Ocena

Nie uczysz się w pojedynkę

Rywalizuj w globalnych rankingach, zapraszaj znajomych po nagrody i świętujcie wspólnie swoje sukcesy. Z przyjaciółmi programuje się lepiej!

Liga ChallengerAwansuje 7 najlepszych

Alex7+ Days

2840

Jordan7+ Days

2650

Sam7+ Days

2420

Casey

2180

Morgan7+ Days

1950

Strefa awansu

Każdy sposób nauki

Czytaj, słuchaj, sprawdzaj się, pytaj AI albo wracaj do tego, co już znasz. Każda lekcja dopasowuje się do ciebie.

Wprowadzenie do zmiennych

Audio

Zmienna to nazwany pojemnik przechowujący wartość, do której możesz później odwołać się w programie.

W Pythonie tworzysz ją, pisząc nazwę, znak równości, a potem wartość, którą chcesz zapisać.

Wartość może się zmieniać: ponowne przypisanie po prostu wskazuje nazwą nową wartość.

1xZofia

Zdobądź certyfikat

Zdobywaj certyfikaty za każdy ukończony kurs. Dodaj je do profilu na LinkedIn i CV, aby pokazać pracodawcom swoje umiejętności programistyczne.

Certyfikat ukończenia

Certyfikat dlaJan Kowalskiza pomyślne ukończenie kursu

Podstawy Pythona

Datasty 2026

Dodaj do LinkedIn

Dlaczego warto uczyć się Next.js z Coddy

Budujesz aplikacje w Next.js w przeglądarce. Bez instalowania Node, bez create-next-app, bez konfiguracji: każda lekcja daje ci prawdziwy katalog app z layoutem, stronami i komponentami do edycji.
App Router w takiej postaci, w jakiej używa się go na produkcji: foldery jako trasy, dynamiczne segmenty, zagnieżdżone layouty, komponenty serwerowe i klienckie, pobieranie danych, stany ładowania i błędów oraz formularze z server actions.
Podpowiedzi AI, które czytają twój kod. Gdy trasa zwraca 404 albo komponent serwerowy się psuje, dostajesz wskazówkę, która prowadzi do problemu bez zdradzania odpowiedzi.
Darmowy certyfikat po ukończeniu działu. Next.js to najbardziej poszukiwany framework Reacta i właśnie jego obok samego Reacta wymagają współczesne ogłoszenia o pracę na frontendzie.

Najczęstsze pytania o naukę Next.js

Czym jest Next.js?

Next.js to framework Reacta do budowania pełnych aplikacji webowych. React daje komponenty, a Next.js dodaje wszystko wokół nich: routing oparty na systemie plików, zagnieżdżone layouty, renderowanie po stronie serwera, pobieranie danych i server actions do obsługi formularzy i mutacji. Tworzy go i utrzymuje Vercel, a na produkcji to najczęściej używany framework Reacta.

Czy przed nauką Next.js muszę znać React?

Tak. Next.js jest zbudowany na Reakcie, więc komponenty, propsy i stan powinny być ci najpierw znajome. Ten dział to druga część ścieżki React: poprzedzający go dział Fundamentals obejmuje dokładnie te podstawy, więc możesz przejść wszystko po kolei.

Czy kurs obejmuje App Router?

Tak. Dział jest zbudowany wokół nowoczesnego App Routera: katalog app, foldery jako trasy, dynamiczne segmenty tras, zagnieżdżone layouty i model komponentów serwerowych i klienckich. Taką architekturę domyślnie mają nowe projekty w Next.js i tego oczekują obecne oferty pracy.

Czym różnią się komponenty serwerowe od klienckich?

Komponenty serwerowe renderują się na serwerze: mogą bezpośrednio pobierać dane i wysyłają do przeglądarki mniej JavaScriptu. Komponenty klienckie działają w przeglądarce i obsługują interaktywność: stan, zdarzenia, efekty. Aplikacje w Next.js łączą oba rodzaje, a wiedza, po który sięgnąć, to jedna z kluczowych umiejętności ćwiczonych w tym dziale.

Czy mogę uczyć się Next.js online za darmo?

Tak. Interaktywny dział Next.js jest darmowy: pełne lekcje, prawdziwe wyzwania programistyczne z natychmiastową informacją zwrotną i podpowiedzi AI. Wszystko działa w przeglądarce, więc nie musisz instalować Node ani zakładać projektu, żeby zacząć.

Czy po kursie Next.js dostanę certyfikat?

Tak. Ukończenie działu daje darmowy certyfikat ukończenia, który możesz udostępnić na LinkedInie albo dodać do CV, obok kompletnego projektu w Next.js, który budujesz w ostatnich rozdziałach.