Next.js 13 w Praktyce: Przeniesienie schematu na kod

0:00Zacznijmy od stworzenia dwóch podstawowych folderów, które dwóch podstawowych grup

0:05naszych robotów, które będziemy mieli w naszej aplikacji.

0:08Tak jak wspominaliśmy już w naszym diagramie, który można zobaczyć tutaj.

0:13Będzie to Marketing i application, czyli

0:15przenieśmy sobie teraz te dwie podstawowe grupy na strukturę folderów.

0:19W Next jest, czyli będzie marketing.

0:24Mamy pierwszą grupę naszych robotów i dodatkowo potrzebujemy Application.

0:30Mamy dwie główne grupy, które będą

0:33odpowiedzialne za poszczególne roboty w naszej aplikacji.

0:35Jeżeli chodzi o marketing, to tutaj

0:37będziemy potrzebowali na pewno jakiś layout

0:41marketingowy, gdzie będziemy mieli główny header, czyli layout CX.

0:47Zostawmy sobie ten plik na razie pusty

0:50i page, który będzie wyświetlany na naszym Page tests.

0:55Page główny możemy sobie skasować tego względu, że w naszym marketingu to ten

1:00page będzie głównym page, na którym będzie lądował użytkownik naszej aplikacji.

1:05Pierwszy, który wchodzi jeszcze nie ma

1:06swojego konta, chce poczuć troszeczkę co nasza aplikacja robi.

1:10To tutaj to będzie home page.

1:13Możemy sobie przenieść tą zawartość do

1:16pliku Page Design, w tym miejscu zapisać i ten plik możemy sobie spokojnie skasować.

1:22Jeżeli chodzi o ten layout, który mamy tutaj, jest to podstawowy layout, który

1:26nic nam jeszcze nie robi, tylko to jest główny layout całej naszej strony.

1:31Możemy sobie tak naprawdę ten namiot tutaj

1:33zostawić, natomiast na pewno będziemy potrzebowali naszego layoutu, bo

1:37do marketingowego Aha, tam sobie wrzucimy informacje na temat

1:42Readera, natomiast tutaj już oczywiście nie potrzebujemy HTML, body

1:47i innych tagów, tylko będziemy potrzebowali tak naprawdę tylko i

1:51wyłącznie miejsce na na nasz główny główny div main.

1:56Czyli możemy sobie zrobić

1:58to za pomocą albo diva zwyczajnego, którym będzie cała nasza treść.

2:02I tutaj pod spodem będziemy mieli header, który będzie hejterem naszej aplikacji.

2:08Header będzie zawierał całą naszą nawigację, czyli możemy sobie już tutaj

2:11skomentować Navigation i poniżej Khedira będziemy mieli jeszcze Children.

2:18Musimy też umożliwić renderowanie podstron

2:22na naszej aplikacji marketingowej, czyli Children.

2:26Tutaj tak naprawdę możemy sobie typować filter, który przychodzi jako read not.

2:33Mamy typy już tutaj podane, także jest wszystko w porządku.

2:36Mamy nasz pierwszy pakiet.

2:38Teraz po tych zmianach

2:40wprowadzonych przez nas, tak naprawdę nic nie powinno się zmienić, jeżeli odpalimy

2:44sobie naszą aplikację znowu w trybie developerskim.

2:49MPM Render to tak naprawdę

2:51na stronie głównej powinniśmy znowu zobaczyć Hello from Pocket.

2:56Jeżeli wszystko jest ok, tak, mamy Hello Pocket.

2:59Tak naprawdę nic się

3:01tutaj w tym przypadku nie zmieniło, dlatego, że przenieśliśmy zrobiliśmy

3:05lokalizację pliku pages, stąd to marketing.

3:08Natomiast pewnie zastanawia Cię teraz

3:12co by było, gdybym sobie w Application zrobił stronę Page?

3:16Pierwsza strona page została by

3:17renderowane, dlatego też Application będziemy potrzebowali sobie tutaj

3:22zrobić znowu dwie podgrupy, bo nasza aplikacja będzie miała dwie podgrupy.

3:27Będzie to APP, który będzie tak naprawdę naszą aplikacją końcową i będzie

3:32grupa do autoryzacji, czyli tam będą roboty sign in signal.

3:36To co też było pokazane tutaj na naszym diagramie, jeżeli sobie zobaczymy.

3:41Plus mamy grupę aut, mamy grupę APP, a tutaj jak widzisz w marketingu tak

3:46naprawdę mamy home block, czyli tutaj nie ma wielkiej filozofii.

3:50Dokończymy sobie jeszcze ten marketing.

3:52Musimy sobie stworzyć jeszcze podstronę

3:54Sleep block, czyli przejdźmy do naszego edytora kodu.

3:58Tutaj w marketing tworzymy sobie Block folder.

4:01To już nie jest grupa. To jest normalna podstrona, która będzie

4:04korzystała z tego samego layoutu co strona główna naszej strony.

4:09I tutaj możemy sobie zrobić Page design. Tutaj.

4:13Ja skorzystam

4:14ze skopiowania tej zawartości, bo tego tutaj zrobimy Block Page.

4:19Tutaj możemy sobie zrobić homepage

4:22i w tym przypadku zmienić nazwy naszych komponentów.

4:25Mamy Block page, zrobimy sobie Hello from

4:27Block, żeby sprawdzić czy rzeczywiście to nam zadziała.

4:30Mamy stronę Block, czyli.

4:31Przejdźmy teraz do naszej aplikacji, do naszej przeglądarki.

4:35I w tym momencie jak sobie wpiszę Slash Block powinniśmy dostać Hello from Block.

4:41Mamy Hello from blog, czyli nasz routing.

4:43Sprawdza się znakomicie Do tej pory dobrze.

4:46Mamy marketing póki co z głowy jeżeli chodzi o routing.

4:50Teraz przejdźmy do naszej aplikacji.

4:53Tutaj potrzebujemy dwie podgrupy, czyli zróbmy sobie podgrupę APP.

4:58To będzie podgrupa dla aplikacji.

5:00Jeszcze potrzebujemy jeszcze jedną podgrupę OFF.

5:04Dwie podgrupy.

5:05Jeżeli chodzi o aut to póki co zostawimy to sobie.

5:09Autoryzacją zajmiemy się w przyszłym module tego kursu.

5:12Natomiast jeżeli chodzi o UP możemy sobie tutaj już stworzyć nasze podstrony.

5:16To będą dwa Dashboard i subskrypcje.

5:19Natomiast jeszcze jedna ważna rzecz to do naszego app.

5:24Zrobimy sobie w grupie Application.

5:27Chcemy, żeby to miało zupełnie inny layout.

5:30Tak, czyli zróbmy sobie application layout.

5:34Tutaj już chcemy używać layoutu nie z marketingu, tylko chcemy używać naszego

5:38layoutu z Application i nasz layout Application może póki co

5:44wyglądać podobnie do tego z marketingu z kopiujemy zawartość.

5:49Zapiszę to sobie tutaj.

5:52Jeżeli chodzi o header, to tutaj w

5:53aplikacji na pewno go nie będziemy potrzebować, natomiast w naszym przypadku

5:56to będzie jakiś pewnie ASIC, to będzie te nasze główne menu,

6:00to będzie właśnie to menu, które mamy po lewej stronie naszej aplikacji.

6:03Możemy wykorzystać tego tag side

6:06i mamy jeszcze do tego main tutaj, gdzie będzie główna treść naszej aplikacji.

6:13Będzie to dynamiczna treść dla Dashboard i dla podstrony subskrypcji.

6:19Także jeżeli przejdziemy w APP potrzebujemy dwie podstrony tego layoutu.

6:24Potrzebujemy podstronę Dashboard.

6:28I potrzebujemy podstronę Subskrypcje.

6:33Dwie podstrony. Dla Dashboard zbudujemy sobie Page Six.

6:40Tutaj możemy sobie skopiować z naszego market i zrobimy sobie dashboard.

6:50Telefon Dashboard.

6:53I jeżeli chodzi o kolejną stronę skryptu to też będzie page fix.

7:00Jeżeli wszystko to zadziałało tak jak chcemy, to tak naprawdę powinniśmy być w

7:07stanie teraz przejść na stronę Dashboard i tak naprawdę w naszym layoucie tutaj

7:15jeszcze żeby to pokazać to zróbmy sidebar, żeby to pokazać dokładnie.

7:22To przejdźmy jeszcze sobie tutaj w layout jeżeli chodzi o marketing.

7:26Zrobimy sobie marketing header.

7:29Jeżeli będziemy skakać pomiędzy marketingowymi stronami, to tak naprawdę

7:33marketing feeder powinien być hejterem, który jest zaaplikowany.

7:36Natomiast jeżeli będziemy skakać sobie po

7:38stronach aplikacji, to w layoucie powinniśmy mieć sito.

7:42Przejdźmy teraz do naszej przeglądarki.

7:45Odświeżę sobie tą stronę i teraz przejdźmy na stronę Dashboard.

7:51I zobacz mamy suite.

7:53Jeżeli sobie cofnę, to mam marketing.

7:56Czyli wszystko jest w porządku.

7:58Aplikujemy dwa różne layouty do dwóch różnych celów.

8:03Mamy cele marketingowe dla naszej strony,

8:06gdzie mamy stronę blogową, w której chcemy mieć ten sam header co na landing page'u.

8:12Natomiast mamy też tutaj aplikację, gdzie

8:14chcemy mieć zupełnie inne elementy zawiązane w tej aplikacji.

8:19Także to jest taka bazowa struktura

8:22bazowy, bazowa struktura, bazowy routing naszej aplikacji.

8:27Jeżeli mamy już nasz bazowy routing, teraz przejdźmy do autoryzacji

8:32i autoryzacji i uwierzytelniania użytkownika i do tego, żeby niektóre z

8:36tych endpoint ów były endpoint ami otwartymi.

8:40Chcemy, żeby SLES, czyli root był otwarty,

8:42bo chcemy umożliwić klientom, którzy nie mają jeszcze konta na naszej aplikacji,

8:46oglądanie swobodne treści na blogu czy też treści marketingowych.

8:51Natomiast treści, które są w Grupie Application powinny być treściami

8:56zamkniętymi tylko dla zalogowanych użytkowników.

8:59I do celu.

9:00Do tego celu użyjemy znakomitego narzędzia, jakim jest Clark.