Next.js 13 w Praktyce: Schemat routingu w naszej aplikacji w postaci diagramu

0:00To co widzisz teraz na ekranie to jest

0:02schemat naszej aplikacji routingu, naszej aplikacji, który będziemy wykorzystywać.

0:06Generalnie rzecz biorąc, wiele ludzi ma problemy z tym, żeby oddzielić sobie tzw.

0:13marketing paździerz od UP.

0:16Bardzo często idzie się to drogą tą drogą, że generalnie musimy tworzyć slash, slash

0:23coś tam coś tam po tym, żeby być w aplikacji.

0:25Natomiast ja pokażę Ci inny sposób, w który możesz sobie użyć grup pingu Twojego

0:30Twojego ruchu do tego, żeby pokazywać odpowiednie rzeczy na Twojej stronie.

0:33Generalnie cała trudność polega na tym, że jeżeli weźmiemy pod uwagę nasze marketing

0:39pages, czyli nasz landing page naszej strony, załóżmy, że będzie nasza strona

0:43miała jakiegoś bloga, naszego startupu, naszej firmy do zarządzania, subskrypcji.

0:48No to slash blog.

0:50Chcemy pokazać header, który jest header em.

0:53Marketingowym też.

0:54Natomiast jeżeli nasz użytkownik się zaloguje to już ten header, który jest

0:58kadrem marketingowym, który odnosi naszego użytkownika do bloga, do informacji o

1:03naszej firmie przestaje mieć jakiekolwiek znaczenie.

1:06No bo lądujemy już na naszym porcie,

1:09który tutaj jeżeli chodzi o DC lądujemy na naszym boardzie.

1:12Tutaj chcemy już pokazać i

1:15informacje, które są użytkownikowi potrzebne jeżeli chodzi o rozwiązanie jego

1:19problemu, czyli w tym przypadku na stronie głównej,

1:23gdzie użytkownik ma przegląd swoich subskrypcji, ile one kosztują?

1:27Kiedy następny payment będzie miał u góry, ma przegląd takich statystyk

1:31i mamy kategorii breakdown też kolejne statystyki.

1:34Nie ma tutaj prawda miejsca na to, żeby zostawić marketingowy header i żeby

1:39użytkownik mógł sobie skakać do bloga do informacji o nas.

1:42Takich spraw to już jest też port aplikacji.

1:45Tu tak naprawdę marketing nie ma nic do rzeczy.

1:48I tutaj jeżeli chodzi o stronę subskrypcji, to tak samo

1:51informacje o subskrypcji czy zostały już zapłacone czy nie.

1:55Koszta subskrypcji, guzik do edytowania,

1:57guzik dodawania nowej subskrypcji no i jakieś podstawowe statystyki.

2:02To wszystko moglibyśmy nazwać, że to tak naprawdę to jest nasza aplikacja.

2:07Tak, Dodatkowo do tego jeszcze dojdzie OUT, czyli sign up i sign in.

2:11Zakładanie konta i logowanie się do naszej aplikacji to też są dwa osobne ekrany.

2:16Natomiast jeżeli chodzi o aplikację mamy dashboard.

2:19To jest sidebar, który tak naprawdę będzie

2:21tym samym sidebar na tych dwóch stronach to będzie komponent, który będziemy mogli

2:25sobie prawdopodobnie ograć jakimś layoutem tutaj.

2:28No a content, który mamy w środku jeżeli

2:30chodzi o dashboard i o nasze subskrypcje jeszcze raz pokażę Ci.

2:34No to content się troszeczkę różni, bo na dashboard mamy tutaj

2:38app coming payment, informację o nadchodzących płatnościach dla danego

2:42użytkownika tyle ile już zapłacił w tym miesiącu, Ile jeszcze zapłaci?

2:45Po prawej stronie mamy informacje na temat kategorii naszego użytkownika.

2:50Które kategorie dla niego są najdroższe, które są najtańsze?

2:53Na Jak przejdziesz sobie na subskrypcje no to już też ta strona jest dynamiczna.

2:56Natomiast to tutaj po lewej stronie zauważ, że ok, design nam się tutaj

3:00zmienia, bo są dwa różne koncepty nawigacji, designu.

3:03Natomiast generalnie rzecz biorąc ten tutaj cały po lewej stronie to jest

3:10taka sama, taki sam komponent, do tego tak naprawdę moglibyśmy.

3:14Prawdopodobnie użyjemy tutaj layoutu, w

3:16którym ta część będzie częścią stabilną, a ta część tutaj będzie częścią dynamiczną,

3:21która będzie prawdopodobnie po stronie serwera, po stronie klienta.

3:25Zobaczymy jak to wszystko ogram.

3:28Wracając do naszego diagramu to tu mamy

3:31naszą aplikację, czyli możemy sobie zgrupować te wszystkie

3:35roboty jeżeli chodzi o dodawanie subskrypcji.

3:37Tutaj jeszcze będziemy mieli popa, który wyskoczy to jest edit panel.

3:43Jeżeli chodzi o dodawanie to też będzie popup pod tym samym adresem.

3:47Po co?

3:48Po naciśnięciu guzika tutaj będziemy mieli popa, który

3:51się pojawi i który pozwoli nam dodawać subskrypcje i edytować subskrypcje.

3:55Jeżeli naciśniemy sobie tutaj ten przycisk też wyskoczy nam tutaj panel, który

3:59pozwoli nam taki formularz, który pozwoli nam edytować sobie te subskrypcje.

4:04Czyli to wszystko moglibyśmy zawrzeć sobie w Grupie Application.

4:08Natomiast mamy też grupę Marketing, która będzie miała zupełnie inny layout, bo

4:12tutaj mamy header związany z typowym już marketingowym handlem.

4:17Jeżeli chodzi o naszą aplikację.

4:19No tutaj mamy blok contact about w naszej

4:21firmie guziki do logowania, guziki do zakładania konta, jakieś hero section,

4:27promo section i footer naszej aplikacji, naszego marketingowego layoutu.

4:33To samo na sekcji Block header article section.

4:35Tu jeszcze powinien być footer na dole to też może być osobna grupa w naszej

4:39aplikacji i nie musimy używać jednego layoutu do wszystkich.

4:43Tak naprawdę jak odpowiednio sobie to wszystko podróżujemy

4:47to możemy mieć jeden layout do marketingu, jeden layout do naszej aplikacji,

4:52który będziemy tutaj używać na kolejnych podstronach.

4:55Także teraz, po takim krótkim wstępie,

4:57krótkim wprowadzeniu obrazkowym, który pozwoli Ci dużo.

4:59Lepiej zrozumieć to, w jaki sposób będziemy ogrywać naszych operacji.

5:04Przejdźmy do naszego

5:05kodu i zacznijmy kodować sobie nasz routing w naszej aplikacji.