Lubię Programować
Lubię Programować
  • 18
  • 17 170
Next.js co to jest i jak go używać? NextJS dla początkujących.
Zobacz jak zacząć tworzyć aplikację z NextJS. Jest to wstęp do tego frameworka. Jeśli chcesz poznać całą funkcjonalność zapraszam cię do mojego kursu link poniżej:
Kurs na Udemy: www.udemy.com/course/nextjs-14-od-podstaw/?referralCode=971A21F9DD063FEE5880
Opis kursu: lubieprogramowac.pl/kursy/nextjs-od-podstaw
0:00 - omówienie tematu
0:30 - czym jest Next.js
03:45 - tworzenie projektu
08:22 - routing statyczny
11:13 - layout
15:24 - layout w layout-cie
18:55 - pobieranie danych dla strony
26:02 - client component
33:54 - co dalej…
Переглядів: 229

Відео

Jak wykonać deploy Next.js na Vercel
Переглядів 863 місяці тому
Jak wykonać wdrożenie aplikacji Next.js na serwer w Vercel-u. #nextjs #vercel #deployment #frontend #react #nextjs14 Kurs Next.js: lubieprogramowac.pl/kursy/nextjs-od-podstaw Kod rabatowy -60% ważny do 21.07.2024: vercel 0:00 - Rabat na kurs 0:34 - Jak wykonać deploy na Vercel
Next.js czym są pliki .env? Czyli konfiguracja na produkcję.
Переглядів 823 місяці тому
Kurs Next.js: lubieprogramowac.pl/kursy/nextjs-od-podstaw Kod rabatowy -60% ważny do 14.07.2024: env #nextjstutorial #nextjs #nextjs14 #react #frontend 0:00 - kurs next.js 0:49 - konfiguracja zmiennych środowiskowych 3:14 - dodajemy zmienne środowiskowe 3:57 - używanie zmiennych środowiskowych 8:22 - jak ustawić .env w client components 12:24 - rodzaje pików .env, .env.local, ...
@container queries czyli jak zmienić widok w zależność od szerokość elementu zewnetrznego
Переглядів 1134 місяці тому
Opowiem wam jak zmienić widok komponentu w zależność od szerokości elementu zewnetrznego. Funkcjonalność to @container queries. #css #frontend Kurs Next.js - lubieprogramowac.pl/kursy/nextjs-od-podstaw Kod rabatowy dla widzów na kurs Next.js: *container* ważny do 16.06.2024r. 0:00 - jak działa @cointainer 0:57 - kurs Next.js 1:47 - jak używać @cointainer queries 5:40 - rabat na kurs Next.js
Czy to nowy czy stary trend: Next.js 13 Server Actions
Переглядів 267Рік тому
Next.js wyznacza nowy trend wykonywania rendering oraz akcji po stronie serwera. Ale czy to napewno nowy trend. Już takie coś było... Sprawdźmy bliżej czym to jest. #nextjs #nextjs13 #react #reactjs 0:00 wstęp 0:24 Server Actions w akcji 2:37 odświeżanie danych po akcji serwerowej 3:35 client component server action 6:01 podsumowanie
JWT Czy znasz odpowiedź na to pytanie?
Переглядів 236Рік тому
Większość osób zna JWT, ale gdy pytam Frontend Developer-ów czy wiedzą jak sprawdzić czy token jest poprawny, często zdarza się, że nie wiedzą. Chodźcie dowiemy się jak to działa... #authorization #frontend #frontenddeveloper 0:00 Pytanie 0:43 Budowa JWT 02:34 Sedno pytania 3:02 Weryfikacja tokena w praktyce 4:44 Podsumowanie pytania 5:22 Dodatkowa informacja 5:38 Zakończenie
Jak wpisać, aktualizować i usuwać dane, czyli INSERT, UPDATE, DELETE. Bazy danych SQL czy 5
Переглядів 314Рік тому
W tej lekcji zapoznasz się jak używać komend SQL: INSERT, UPDATE, DELETE. Do wpisywania, aktualizowania oraz usuwania danych w bazie danych SQL. #database #sql #postgresql 0:00 - wstęp 0:14 - polecenie INSERT 3:59 - jak działa DEFAULT przy INSERT 5:25 - wpisywanie wielu wierszy naraz 7:07 - FOREIGN KEY przy pisywaniu danych 7:58 - polecenie UPDATE 10:13 - polecenie DELETE 11:20 - FOREIGN KEY pr...
Czym jest Docker Network? Praktyczny przykład. Czyli jak połączyć kontenery miedzy sobą.
Переглядів 465Рік тому
Pokaże wam czym jest docker network na prawdziwym przykładzie z którym możecie się spotkać w pracy. #docker 0:00 wstęp 0:12 omówienie problemu 1:59 problem połączenia miedzy kontenerami 2:35 dlaczego jest problem z połączeniem między kontenerami 3:47 network - połączenie między kontenerami 08:08 zmienne środowiskowe 10:10 network w docker run 11:50 pożegnanie
Co się stało z children w React? React z TypeScript
Переглядів 314Рік тому
W typie FC nie ma props-a "children"? Co się z nim stało? Gdzie go szukać? #react #typescript
Jaka jest różnica między type a interface...? TypeScript interface vs type
Переглядів 928Рік тому
Czy wiecie jaka jest różnica między interface a type w TypeScript? Czy można rozszerzać typy? Na te pytania odpowiem wam w tym filmie oraz pokaże prosty trick z aliasami. #typescript 0:00 wstęp 0:16 type vs interface 2:55 extends vs intersection 4:21 przydane aliasy 6:55 pobieranie typu z pola obiektu 7:47 podsumowanie
Jak stworzyć tabelę w PostgreSQL? Bazy danych cz. 4
Переглядів 652Рік тому
W tym odcinku podstaw bazy danych pokaże wam jak tworzyć tabele w PostgreSQL. Jakie mamy typy danych, czym jest SERIAL oraz jak tworzyć relacje (REFERENCES) między tabelami. #postgresql #database Przykłady na GitHub: github.com/jjuszkiewicz/postgresql-start 0:00 wstęp 0:22 komenda: create table 1:36 jak stworzyć kolumnę id - PRIMARY KEY 3:15 czy wielkość liter ma znaczenie w DDL-u? 3:39 kolumna...
Czym jest Union i Intersection? Co to Narrowing i Type Guard? TypeScript w praktyce.
Переглядів 276Рік тому
TypeScript w praktyce czyli czym jest Union oraz Intersection typów. Dodatkowy zobaczycie czym jest Narrowing i Type Guard? Zapraszam do seri TypeScript w praktyce. #typescript 0:00 Sugestia widza. 0:19 Czym jest Union? 1:50 Narrowing i Type Guard 8:17 Czym jest in Intersection? 9:56 Zakończenie
Jak nie stracić danych w kontenerze? Poznaj Docker Volumes i jego zalety.
Переглядів 508Рік тому
W tym nagraniu opowiem o Docker Volumes. Zapobiegają one utraty danych, pomagają współdzielić zasoby pomiędzy kontenerami. Dowiesz się co to volume zewnętrzny (external volumes), listowanie, tworzenie i usuwanie volumes. #docker Przykład z nagranie: github.com/jjuszkiewicz/docker-volumes 0:00 Wstęp 0:19 Co to jest Volume? 1:51 Przykład: dane bez Volume 5:00 Dodajemy Volume 7:38 Lista Volumes 8:...
Jak zainstlować PostgreSQL z Docker-em? Co to jest psql i pgAdmin? Baza danych PostgreSQL cz. 3
Переглядів 1,4 тис.Рік тому
W tym odcinku dowiesz się jak zinstalować PostgreSQL za pomocą docker-a do pracy na śrdowisku lokalnym. Wytłumacze jak się zalogować do bazy danych z poziomu terminala przy użyciu narzędzia psql oraz pokażę łatwieszy sposób za pomocą programu pgAdmin. #docker #postgres #postgresql Link do projektu z przykładem: github.com/jjuszkiewicz/postgresql-start 0:00 Wstęp 0:19 Jak zainstalujemy PostgreSQ...
Duże zmiany w Next.js 13. Sprawdź co weszło nowego...
Переглядів 822Рік тому
Sprawdźmy nowe funkcjonalności w #nextjs wersji 13, a dokładnie eksperymentalną wersje app directory. #javascript #tech #js #react Wykonany przykład dostępny jest w repozitorium: github.com/jjuszkiewicz/nextjs-13 0:00 wstęp 0:12 co to Next.js 0:40 start projektu z Next.js 13 1:48 jakie zmiany strukturze? 4:54 nowy layout 14:02 podsumowanie nowej struktury 15:44 server component 23:26 loading.ts...
Docker co to jest i jak go używać? Docker dla początkujących
Переглядів 8 тис.Рік тому
Docker co to jest i jak go używać? Docker dla początkujących
Jakie są relacje pomiędzy tabelami? Baza danych SQL cz. 2
Переглядів 1,6 тис.Рік тому
Jakie są relacje pomiędzy tabelami? Baza danych SQL cz. 2
Czym jest relacyjna baza danych? Baza danych SQL cz 1
Переглядів 638Рік тому
Czym jest relacyjna baza danych? Baza danych SQL cz 1

КОМЕНТАРІ

  • @dariuszmion2764
    @dariuszmion2764 2 місяці тому

    Co takiego ?! Doker jest niezbędny do relacyjnych baz danych i node & React.js - co za bzdura !

    • @lubie-programowac
      @lubie-programowac 2 місяці тому

      Widać że nie odsłuchałeś całości. W innych filmach używam Dockera np do uruchomienia PostgreSQL i bez wiedzy na temat Dockera widz nie zrozumie co tam się dzieje. Docker nie jest niezbędny, ale jeśli widz go nie zna to odsyłam go do tego filmu aby poznał podstawy i rozumiał co dzieje się w innych filmach.

  • @coder_one
    @coder_one 3 місяці тому

    1:10 Next.js przez niedopracowany app router nie zwiększa popularności tego frameworka. On go pogrąża... Fakt - pages router był paskudny ze względu na sposób działania funkcji getServerSideProps & getStaticProps co pokazuje przykład Remix.js - frameworka, który o niebo lepiej ogarnął zagadnienie zasilania komponentów danymi.

  • @Noseq_1
    @Noseq_1 5 місяців тому

    Przydało się. Super :)

  • @allright518
    @allright518 10 місяців тому

    Myślałem, że to VMki, a nie kontenery mają system operacyjny

    • @lubie-programowac
      @lubie-programowac 10 місяців тому

      Ze względu że jest to materiał od podstaw to jest skrót myślowy, ale patrząc głębiej to tak masz racje. Chodzi mi o to że otrzymujemy w kontenerze pełno prawny system operacyjny niezależny od drugiego kontenera, a dodatkowo każdy kontener może mieć inną wersje systemu.

  • @slavicdesign1837
    @slavicdesign1837 Рік тому

    W czym piszesz ten kod ? Dopiero zaczynam... czy to PgAdmin?

    • @slavicdesign1837
      @slavicdesign1837 Рік тому

      czy moze Intellij?

    • @lubie-programowac
      @lubie-programowac Рік тому

      @@slavicdesign1837 Hej to jest Visual Studio Code, kiedyś pisałem w Intellij ale przesiadłem się jakieś2 lata temu. Co do drugiego pytania to tak to jest PgAdmin :)

  • @almazd5953
    @almazd5953 Рік тому

    Super. Czekam na więcej. Takie pytanie mnie naszło. mamy: 1. Piotr 2. Anna 3. Michał. Usuwamy Anne 1. Piotr 3. Michał. Przy dodaniu kolejnej osoby np. Julki mamy 1.Piotr 3.Michał 4.Julka. Rozumiem, że aktualizowanie id Michała może troszkę popsuć, Jak zrobić aby osoby "wskakiwały" w puste id w liście. (skoro wraz z usunięciem Anny wszystkie elementy innych tabel związanych z nią też zostały usunięte). Będę wdzięczny za odp. :D

    • @lubie-programowac
      @lubie-programowac Рік тому

      Hej, usunięte ID-ki już się nie używa ponownie. Dzięki temu unikniesz problemów pojawienia się innych danych pod tym samym ID. Rozważmy prosty przykład z blogiem: Wyobraź sobie że masz artykuł o tytule "ABC" z ID 2, wyświetla się on pod adresem <jakas-domena-bloga.pl>/post/2. Usuwasz go i wskakuje w to miejsce nowy artykuł "DEF" o tym samym ID. Osoby które miały zapamiętane (jak i również Google indeksował) link do artykuły "ABC" teraz widzą "DEF". Powoduje to pewną niezgodę. Ten przykład jest akurat bardzo błachy, ale może być więcej takich problemy np: z CACHE w aplikacji, niepoprawnym sczyszczeniem danych po poprzednim wpisie. Cieżko jest to potem naprawić bo nie wiesz które dane są stare, a które nowe. Tak masz pewność że nowy dane mają swój unikalny ID. W PostgreSQL zakres SERIAL jest dużo od 1 do 2147483647. Jeśli to za mało to możesz zdefiniować ID jako BIGSERIAL wtedy zakres będzie: od 1 do 9223372036854775807. P.S. jeśli powyższy przykład nie jest przekonujący, to wyobraź sobie że PESEL przechodzi na nowo urodzone dziecko po zmarłej osobie. Jeśli zmarła osoba miała długi (np. kredyt), to nowo narodzone dziecko ma już kredyt zanim poznała co to są pieniądze. Dlatego unikamy dziedziczenia unikalnego ID na nowe wpisy.

  • @miwdawid5665
    @miwdawid5665 Рік тому

    Bardzo fajnie i przystępnie opowiedziane👍 Czekamy na dalsze części, np jak teraz dodawać dane do stworzonych tabel oraz jak połączyć np frontend w REACT z tak przygotowaną w kontenerze bazą danych 💪💪💪

  • @themask4497
    @themask4497 Рік тому

    Świetny materiał

  • @tarsiik6816
    @tarsiik6816 Рік тому

    Przydatne informacje!

  • @anteqkois
    @anteqkois Рік тому

    Terac ogl. odradza się używać generyku FC

    • @lubie-programowac
      @lubie-programowac Рік тому

      Z tego co kojarzę to FC nie polecano właśnie na prop children. Był domyślnie dodany mimo, że nie zawsze się go wykorzystywało. Teraz jak widać się to zmieniło. Rozwiń temat, jak masz więcej informacji dlatego FC się nie poleca to chętnie przeczytam i inni napewno też.

  • @devman5813
    @devman5813 Рік тому

    Dzięki ;)

  • @Marcin987
    @Marcin987 Рік тому

    Jeżeli mamy klienta hotelu, który składa zamówienie w hotelowej restauracji to adres tzn numer pokoju oraz klient to relacja wiele do jeden? W jednym pokoju może być wiele klientów. Jeżeli hotel jest all inclusive i nie ma w nim płatności to gdzie tu znaleźć relacje jeden do jeden?

    • @lubie-programowac
      @lubie-programowac Рік тому

      Hejka, dzięki za ten przykład, jest naprawdę rozbudowany i można na nim znaleść kilka rozwiązań w zależności od skomplikowania systemu pod hotel. Co do twojego przykładu rozważ propozycję którą rozpisałem tutaj: miro.com/app/board/uXjVPID2mdc=/?share_link_id=948629317359 (jak problemy z linkiem to daj znać). Jest tam dodatkowa tabela "pobyt" która ma jednego klienta, a klient może mieć wiele pobytów (wiele do jeden). Pobyt może mieć kolumnę "type" z wartościami (all inclusive, standard, itp...) do tego może mieć od 0 do wielu zamówień (relacje jeden do wiele) i jeśli jest all inclusive zamówienie miał by odrazu status opłacony. Relacja pobyt (lub jeśli nie dasz tej tabeli to tabela klient) do pokój to wiele do wiele z walidacją po stronie aplikacji, że ten sam pokój nie może mieć dwóch pobytów w tym samym czasie. Co do pytania o relacje jeden do jeden gdzie jej szukać. Tutaj jest dość duża dowolność i można kilka znaleść lub nie dawać jej w ogóle. Możesz np. wydzielić dane do faktury do osobnej tabeli, aby nie było zbyt dużo kolumn w tabeli klient (to relacja jeden do jeden z oznaczeniem 1..0 bo nie każdy potrzebuje faktury, tylko może wziąć paragon). Do każdego przypadku można podejść na kilka sposobów i nie znaczy że któryś jest zły.

    • @marcin2029
      @marcin2029 Рік тому

      @@lubie-programowac Dziękuję za obszerną odpowiedź. Można też zacząć jak na filmie od tabel: order, product np. drinki, customer, address np. numer pokoju, bar miejsce wykonania zamówienia oraz employee barman. Męczę się nad pomysłem na jakieś web api.