Next.js 13 w Praktyce: Header logo i nawigacja

0:01Teraz przejdźmy do budowania już naszej struktury strony.

0:04Generalnie chodzi nam o layout marketingowy, dlatego zajmiemy się

0:07najpierw tymi otwartymi wrotami, które mamy bez konieczności logowania się.

0:11Generalnie rzecz biorąc w aplikacjach przyjęło się, że jednak ten landing

0:15pojęcie jest otwartym ruchem, nie musimy się do niego logować.

0:18Tam mamy informacje na temat naszego

0:20startupu, do czego on przeznaczony służy tak naprawdę dodatkowo jakaś sekcja blog.

0:25My to mamy też tutaj zrobione. Mamy stronę, blog.

0:28W naszej aplikacji tego przyjmiemy.

0:30Zajmiemy się

0:32tym chodem, żeby stworzyć odpowiednią nawigację po naszej aplikacji.

0:37Zacznijmy od tego, że w header tak naprawdę chcemy mieć załóżmy 2 linki.

0:43Chcemy mieć link do naszej strony domowej i chcemy mieć też link do naszego bloga.

0:48W tym przypadku czyli korzystamy z komponentu Link z next jest.

0:55Niech to będzie tutaj href ustawiony na stronę domową i kolejnym

1:01linkiem niech tutaj będzie link do naszej naszej strony z blogiem.

1:06Teraz jeżeli chodzi o linki o statyczne

1:08typowanie tutaj adresów zauważ, że mogę napisać kontakt i pomimo tego, że ja nie

1:14mam strony kontakt nie dostanę żadnej informacji od naszego frameworka.

1:19Dlatego przydatną opcją jest włączenie

1:21sobie w konfiguracji statycznego typowania tych linków tutaj.

1:26Tak że jeżeli wpisać sobie kontakt ja nie mam stworzonej strony kontakt to next.

1:30Czy jest jest na tyle inteligentnym

1:32frameworkiem, że będzie w stanie mi to powiedzieć?

1:35Hej Daniel, słuchaj, nie masz takiego

1:36gluta, nie masz takiej strony stworzonej, także powinieneś nad tym pomyśleć.

1:41I jak to się robi?

1:42Generalnie mamy w configu next kropka config jest.

1:46Mamy opcję eksperymentalną jeszcze co prawda na dzień dzisiejszy natomiast

1:50sprawdza się dosyć fajnie już na produkcji.

1:53Dlatego ja sobie zawsze lubię to włączyć i przełączamy sobie trójkę Roads na true z.

1:58Kopiujemy sobie teraz tą opcję, przejdziemy do naszego next config.

2:03Czy jest i tutaj w konfiguracji T.

2:07I teraz przejdźmy do naszego naszego layoutu.

2:11Restart.

2:12Restartujemy serwer, restartujemy naszą aplikację czyli NPM Render Wystartujemy.

2:21Nasza aplikacja jest na localhost 3000.

2:23Przejdźmy teraz tutaj do naszego edytora kodu i zobacz co się dzieje.

2:27Już dostaję informację kontakt nie istnieje, nie mamy takiego

2:32roota tutaj jeżeli wpiszemy sobie blok to już wszystko jest w porządku.

2:36Nexus jest. Wie na tyle, że mamy taką stronę

2:39i możemy do niej linkować tak, że mamy pierwsze dwa linki na naszej stronie.

2:43Ja sobie teraz to tutaj otworzymy naszą stronę

2:47localhost 3000 damy na prawą stronę, natomiast nasz edytor kodu będzie tutaj po

2:52lewej stronie i postaramy się teraz ładnie stylizować nasze naszą nawigację.

2:59Żeby zobaczyć te linki na naszej stronie musimy nie zamykać

3:04tych tagów, tylko musimy pozostawić tutaj miejsce na napis home zapiszemy już w tym

3:09momencie powinno się pojawić home tutaj na naszej stronie i to samo robimy tutaj.

3:13Z tej strony będzie blog.

3:16Jeżeli sobie teraz będziemy przełączać to jesteśmy na stronie bloga

3:20i blog ma ten sam header co strona forum czyli kolumna główna i blog tak naprawdę

3:26mają tą samą nawigację i też o to nam chodzi.

3:28To są 2 otwarte rolety w naszej aplikacji.

3:31Jeżeli chodzi o styl tego to możemy się tym zająć.

3:35Chcemy tak naprawdę skorzystać.

3:37Tutaj korzystamy w naszym projekcie z Windows i w naszym przypadku będzie to.

3:43Chcemy wyśrodkować to wszystko.

3:46Chcemy zrobić display flex.

3:49Chcemy zrobić max UI na 7 XML.

3:53Generalnie lubię sobie coś takiego

3:54przyjąć, żeby maksymalna szerokość tak jak widzisz tutaj

3:57już jak na większych ekranach przejdziemy to zostajemy tutaj na środku.

4:01Jeżeli sobie zrobimy tutaj, inspektor to zauważy cały ten header.

4:05On ma jaką maksymalną szerokość.

4:07Jeżeli ekran będzie większy to po prostu

4:11pozostają tutaj użyte marginesy po prawej i po lewej stronie.

4:14Jeżeli chodzi jeszcze o padding i żeby to wszystko lepiej wyglądało to najpierw

4:18zróbmy sobie items center, żeby wszystkie itemy były na środku i padding.

4:25Jeżeli chodzi o wygląd naszej nawigacji to dobrze byłoby tutaj zrobić jakieś logo

4:31i zmienić ten napis home na nazwę naszego startupu czyli Pocket Cap.

4:36Niech to będzie też napisane h1 kom.

4:39Jako że jest to główna informacja na tej stronie, zrób sobie Pocket cap.

4:45I tutaj klasyczny niech to będzie font bold.

4:53Tekst XL.

4:56Napiszemy.

4:57Jest to nazwa naszego startupu jeżeli chodzi o obrazek logo.

5:02Przygotowałem dwa obrazki, które przydadzą

5:05nam się z Hiro Mock naszej aplikacji, który pokażemy na środku tutaj.

5:09Jeżeli chodzi o logo to mamy tutaj logo

5:11PNG, czyli możemy sobie teraz to logo zaimportować.

5:15Import logo From tutaj images i logo PNG i

5:21to wykorzystamy tutaj w komponencie Image, który też dostajemy od Next.

5:27Czy jest I Image Component Images Next potrzebuje serce.

5:31Na początku importujemy sobie ten komponent i już w tym momencie.

5:36Serce zrobimy tutaj logo, zapiszemy to sobie.

5:40Jeszcze dostajemy informację, że

5:43potrzebujemy alt i missing, czyli zrobimy alt jeszcze związane z accessibility.

5:48I oczywiście bardzo fajna praktyka, żeby

5:50nie zapominać o podpisywaniu swoich obrazków.

5:53Pocket Cap Logo.

5:57I myślę, że jeszcze możemy nadać wysokość, która będzie równa 34.

6:04Zapiszemy.

6:05Mamy już nasze logo, natomiast ustawienie tych dwóch rzeczy nie jest odpowiednie,

6:09dlatego przejdźmy tutaj do naszego komponentu Link i Class Name.

6:14Zrobimy sobie Flex i dalej zrobimy Items Center.

6:20I GAP. Pomiędzy tymi dwoma elementami ustawimy

6:23sobie na najmniejszy możliwy seks, czyli 2.

6:26Już mamy fajnie logo, które jest linkiem do naszej strony głównej.

6:30Przejdziemy na blog bloki, przejdziemy

6:32tutaj, klikniemy na logo, mamy przejście do strony głównej.

6:36Jeżeli chodzi o całą tą nawigację to też przydałoby się tutaj coś z tym zrobić.

6:42Generalnie rzecz biorąc

6:43jeżeli chodzi o ten blog to to będzie należało do nawigacji całej.

6:47To tutaj możemy nazwać blogiem.

6:49Czyli w eterze będziemy mieli jeszcze na i do środka.

6:54Do tego możemy sobie wrzucić teraz nasz link.

6:58Zapiszesz to sobie teraz tutaj.

6:59Wszyscy ludzie żyjemy sobie na W.

7:01Chcemy, żeby zajął całą szerokość tej,

7:06która jest jeszcze dostępna w naszym header.

7:08Dlatego zróbmy sobie class name I tutaj tak na chwilę

7:15mamy całą szerokość jeżeli chodzi o ustawienie tego elementu tutaj.

7:21No to możemy sobie zrobić jeżeli chodzi.

7:23Potem możemy mieć więcej elementów tutaj jeżeli chodzi o Word zrobimy sobie listę.

7:29I pierwszym elementem w tej liście niech będzie nasze nasz odnośnik do bloga.

7:37I tutaj jeżeli chodzi o naszą listę musimy sobie zrobić class tam oczywiście.

7:43Wyświetlanie na flex ustawimy items na center.

7:49Ustawimy sobie czas sci fi center, żeby to wszystko też ustawiło się na

7:53środku i pomiędzy elementami ustawimy na 4.

7:58W przyszłości, kiedy ustawili byśmy sobie więcej elementów, na przykład kontakt.

8:05Już nie zwracając uwagi na to, że tu mamy

8:06czerwień, to będą one odpowiednio od siebie odsunięte.

8:10Natomiast na chwilę obecną zostawimy sobie tylko i wyłącznie ten blog.

8:15I tutaj na końcu, po tej całej nawigacji

8:19przydałoby się mieć komponent, w którym mielibyśmy dwa guziki sign signal.

8:24I teraz może zajmiemy się właśnie tym komponentem.