Next.js 13 w Praktyce: Teoretyczny wstęp do routingu w NextJS

0:00Jeżeli chodzi o routing w aplikacji Next

0:02czy jest okej, to nie chcę Cię zanudzać teorią.

0:05Tak naprawdę zachęcam Cię serdecznie do tego, żebyś przeczytała sobie

0:09dokumentację, którą masz dostępną na stronie.

0:13I tutaj bardzo ważne, żebyś używał tej opcji using absolute.

0:18To już jest opcja stabilna.

0:20Generalnie rzecz biorąc jest tutaj wszystko świetnie pokazane na grafikach, w

0:24jaki sposób renderowane są strony, w jaki sposób działa Fail Convention.

0:29Generalnie routing działa na zasadzie plików i folderów.

0:33Hierarchia komponentów, którą mamy tutaj.

0:36Twórcy tego frameworka bardzo fajnie to

0:38wszystko przygotowali, żeby pokazać Ci w jaki sposób to wszystko działa pod spodem.

0:43Generalnie rzecz biorąc najważniejsze

0:44rzeczy, o których musisz wiedzieć to to, że App Directory to jest folder, w którym

0:50dzieje się tak naprawdę większość naszej pracy.

0:53I moim zdaniem jest to najlepszy ficzer w next, że jest.

0:56Mamy nasz App Directory, w którym

0:58zaczniemy za chwilkę stopować nasz routing w aplikacji.

1:03Jeżeli chodzi o Page Six to to jest to co masz tutaj i to odpowiada za

1:09wyświetlenie i ucina naszym ekranie wyświetlanie części.

1:13Jeżeli chodzi o layout to jest część wspólna, która będzie

1:17używana dla wszystkich podstronach zaczynając od roota.

1:23Bo jeżeli chodzi o to co widzisz tutaj mamy z layout i page.

1:27To jest tak naprawdę index Agreement znany ze starej strony.

1:31Czyli to jest lutowy adres naszej aplikacji.

1:35Jeżeli ktoś odwiedza naszą aplikację na

1:36adresie to ląduje właśnie na tej stronie Page sex.

1:40Tutaj jest pierwsza strona na której się

1:41ląduje tak naprawdę w aplikacji Next Dzieje grzbietowej.

1:44Wszystko bazuje na nazwach plików i folderów.

1:46Jeżeli chcesz stronę w aplikacji, plik musi nazywać się właśnie php X.

1:51Jeśli chcesz zrobić inną stronę pod tym samym adresem URL, nie ma to większego

1:55sensu tak naprawdę i zawsze powinieneś mieć jeden page root w aplikacji.

2:00Jeżeli chcesz zrobić strony artykuł w swojej aplikacji, musimy stworzyć sobie

2:04folder o nazwie odpowiadającej końcówce URL articles.

2:07Czyli jeżeli chcielibyśmy w naszej

2:09aplikacji mieć articles to tutaj articles musielibyśmy sobie

2:13stworzyć folder page i w środku w tym folderze.

2:16To wtedy moglibyśmy lądować na stronie

2:19Nasza domena localhost 3000 slash articles.

2:23Wtedy odpalił by się nam ten page, który jest właśnie w tym folderze.

2:26Jeżeli chcesz robić stronę podstronę to np.

2:30poprzez dodanie nowego folderu w articles możesz nazwać dodać sobie folder np.

2:35React czy.

2:36I pod tym folderem stworzyć page, czyli będzie slash articles slash ri.

2:41Jeżeli chodzi o dynamiczne adresy URL to

2:43tak naprawdę najlepiej chyba to pokazać na przykładzie bloga.

2:47Jeżeli chcielibyśmy mieć slash blog, czyli tworzyli byśmy tutaj

2:51podstronę blog i tutaj w środku był plik page ts x to byłby plik

2:58slash slash blog na którym lądowali byśmy w naszej aplikacji.

3:01Jeżeli chodzi o dynamiczną, dynamiczną

3:05i jeżeli chcielibyśmy dynamicznie odczytywać slug czy adres tej strony to

3:10musielibyśmy zamienić tą stronę, zrobić sobie

3:14file i zamiast tego Page'a to musielibyśmy wpisać na przykład slug

3:21i tu w tym przypadku byłby to dynamiczny parametry przekazywane do naszej strony,

3:25które moglibyśmy wykorzystywać wtedy w adresie slash blog.

3:29Wszystko co było tutaj pod tym wszystkim

3:32to byłoby traktowane jako slack, co byśmy mogli wykorzystać w naszej aplikacji.

3:36Generalnie.

3:38Routing w next pomaga Ci konfigurować to dowolnie.

3:41Możesz np. zrobić tzw.

3:42cache page przez priv.

3:45Tutaj to jest też dosyć przydatne czasami jeżeli masz więcej jakby.

3:50Jeżeli zrobisz tutaj

3:52ten lag po trzech kropelkach, czyli użyjemy spread operatora znanego nam z

3:56JavaScriptu, to to wszystko będzie łapało nam strony, które są po block.

4:02I tutaj cokolwiek, cokolwiek, cokolwiek,

4:04cokolwiek to wszystko będzie złapane tutaj za pomocą tego laga.

4:09Jest to tzw. catch w.

4:13Ja sobie usunę, bo nie będziemy akurat

4:14potrzebować tutaj strony block w naszej aplikacji.

4:17Natomiast pominiesz. Powinieneś wiedzieć trochę o

4:20pingu i przydatne do grupowania poszczególnych adresów URL i dzielenia np.

4:25layoutu i styli.

4:27Ciekawe jest to, że podczas grupowania można zrobić taki sam folder bez

4:32grupowania i teoretycznie mamy dwa takie same adresy URL, ale w praktyce

4:36to pierwsza stworzona strona będzie tą zbudowaną przez aplikację.

4:40I jeżeli chodzi o specjal

4:42tak zwany layout, error loading i nawigację po aplikacji to wszystko będę

4:47Ci tłumaczył po drodze jak sobie będziemy budować naszą aplikację.

4:50Natomiast jeżeli chodzi o samą nawigację to jest ona banalnie prosta.

4:55Wykorzystujemy w tym celu komponent Link,

4:57dany nam też od twórców tego frameworka Next.

5:02Generalnie komponent Link wymaga od Ciebie tylko i wyłącznie adresach href odnośnika.

5:07Jest to domyślne.

5:10Podajemy jako string i na tę stronę się przenosimy.

5:13Generalnie rzecz biorąc

5:15router pod spodem używa tylko coś co potrzebuje dynamicznych danych.

5:19To nazywamy też częściowym render linkiem tzw.

5:22pasza rendering i te strony do których lądujemy za pomocą

5:27komponentu Link są kasowane po stronie klienta i render.

5:31Router automatycznie potrafi aktualizować tylko to co trzeba od nowa zwalić.

5:36Dlatego strony budowane w mieście są tak szybkie, tak responsywne,

5:40że w przypadku, w którym mamy dane zapisywane po stronie serwera są one

5:46kasowane po stronie klienta i klient jeżeli drugi raz odwiedza tę samą stronę.

5:50Jeżeli te dane nie muszą być zrealizowane,

5:52to mamy tak naprawdę od razu zwróconą zwrotkę.

5:55Do klienta.

5:57Używana jest ta skasowana wartość.

5:58Jeżeli tak naprawdę odpowiednie warunki zostaną spełnione, router automatycznie

6:02wczytuje tylko to, co już znajduje się w pamięci podręcznej przeglądarki.

6:06Jest tak zwany soft navigation i jeżeli

6:09jakieś dane muszą zostać rywali dodane, następuje hard navigation.

6:12I to jest ta sytuacja.

6:13Kiedy użytkownik już odwiedził naszą stronę, to drugi raz wskakując na tą

6:18stronę będzie miał miejsce soft navigation.

6:20Natomiast jeżeli użytkownik jeszcze nie

6:22odwiedził strony, pierwszy raz ją wczytuje na swoim komputerze.

6:25To jest tzw. hard navigation.

6:27Dostaje nowe dane ze stanem z serwera.

6:32Co jeszcze jest warte wspomnienia to to

6:34jeżeli będziesz sobie używał do nawigowania normalnego a, to tak naprawdę

6:38będziesz standardowo nawigować pomiędzy stronami i nie będziesz korzystać z tych

6:42wszystkich korzyści automatycznie wbudowanych dla nas.

6:45W przypadku użycia komponentu Link i Link adresy to są relatywne adresy do

6:51roota i nie do miejsca użycia komponentu Link.

6:53Czyli niezależnie gdzie sobie bym użył ten komponent link adres to mojego about page

6:58będzie zawsze pisany właśnie w taki sposób.

7:01To będzie zawsze pisane.

7:04Czyli to też warto sobie zapamiętać, że to nie są adresy relatywne.

7:08I myślę Tahiti pode mnie.

7:10Jeżeli będziesz budował sobie nawigację swojej strony, to tak naprawdę staraj się

7:14korzystać tylko i wyłącznie z tego, z tego linku, z tego komponentu.

7:19Link do naszej strony.

7:21Zaczniemy sobie teraz budować naszą nasz routing.

7:25W tym celu najpierw stworzymy nowego

7:27branch, a na naszym naszym repozytorium zróbmy sobie git checkout i develop.

7:38Pociągniemy ostatni develop z naszego zdalnego repozytorium.

7:44Będziemy mieli najnowsze zmiany.

7:45Mamy prime, mamy migracje, które już są i teraz git czeka od I minus B.

7:52Tworzymy nowy.

7:53Brałem, ćwiczę przy sobie jeszcze jakie mamy branch

7:56naszej aplikacji, mamy initial critical, mamy routing, mamy etap DP.

8:01I wszystko się zgadza.

8:02Tak naprawdę trzy.

8:04Sobie ten branch i routing setup, żeby był już prętem zdalnym.

8:10Dobrze, mamy nasz routing setup.

8:13Teraz zanim przejdziemy do do konkretnego pisania kodu, to chciałbym

8:18pokazać jeszcze pewien Dragan, który dla Ciebie

8:21przygotowałem, związany właśnie z tą aplikacją naszą.

8:23Żeby troszeczkę wyjaśnić

8:26w jaki sposób będziemy podchodzić do budowania tej nawigacji.