Скачать "NextJS Быстрый Курс - SSR на React JS"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: 🤯 ИНТЕРНЕТ МАГАЗИН ЗА 12 ЧАСОВ! + оплата. СТРИМ-ЧЕЛЛЕНДЖ [React / TypeScript / Redux / Next.js]Следующее видео: React Hooks - Полный Курс (Про Все Хуки в 1 видео!)

0:00

Что такое SSR и Next

14:36

Установка Next

20:40

Начало работы

25:54

Роутинг и навигация

49:15

SEO + Meta

54:40

Создание Layout

1:06:29

Стили, модули, SASS

1:14:48

Страница 404

1:22:14

Создание API мок сервера

1:33:30

Загрузка данных

1:57:05

getServerSideProps

2:00:30

Индикатор загрузки

2:07:15

Создание API

2:13:00

TypeScript

2:26:40

Next Config

2:34:12

Классные рекомендации

React Hooks - Полный Курс (Про Все Хуки в 1 видео!)

React Hooks - Полный Курс (Про Все Хуки в 1 видео!)

Канал: Владилен Минин

🤯 ИНТЕРНЕТ МАГАЗИН ЗА 12 ЧАСОВ! + оплата. СТРИМ-ЧЕЛЛЕНДЖ [React / TypeScript / Redux / Next.js]

🤯 ИНТЕРНЕТ МАГАЗИН ЗА 12 ЧАСОВ! + оплата. СТРИМ-ЧЕЛЛЕНДЖ [React / TypeScript / Redux / Next.js]

Канал: RED Group

Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

Канал: Programming with Mosh

68 - React JS - Redirect

68 - React JS - Redirect

Канал: IT-KAMASUTRA

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

Канал: RED Group

How to Use WordPress as a Headless CMS

How to Use WordPress as a Headless CMS

Канал: NL Tech

63 - React JS - практика, DAL, axios.create

63 - React JS - практика, DAL, axios.create

Канал: IT-KAMASUTRA

Nuevo componente de IMAGEN de NEXTJS - Curso de NextJS #16

Nuevo componente de IMAGEN de NEXTJS - Curso de NextJS #16

Канал: Webtoriales

ФИНАЛ! УСПЕЮ ЛИ Я? ПОЛНАЯ КОПИЯ Youtube с НУЛЯ | День 7

ФИНАЛ! УСПЕЮ ЛИ Я? ПОЛНАЯ КОПИЯ Youtube с НУЛЯ | День 7

Канал: RED Group

React JS Быстрый Курс

React JS Быстрый Курс

Канал: Владилен Минин

владилен

владилен минин

javascript

next

nextjs

next.js

react

reactjs

react.js

ssr

react ssr

ssr react

server side rendering

js

react js

react next

next react

next курс

nextjs курс

react курс

typescript

react typescript

typescript next

next typescript

уроки react

уроки next

nextjs примеры

00:00:02

курс по next джесс сейчас я нахожусь на

00:00:06

официальном сайте данной технологии где

00:00:08

написано что

00:00:09

next джесс это фреймворк над реактор так

00:00:13

вот зачем нам нужен дополнительный

00:00:14

фреймворк над и так уже полноценным

00:00:16

реактор какие задачи next решает зачем

00:00:19

он вообще нужен

00:00:20

и почему его слог стоит использовать вы

00:00:22

узнаете из этого курса next джесса

00:00:26

довольно таки продвинутая технология

00:00:27

который включает в себя большое

00:00:29

количество различных концептов и в

00:00:31

процессе данного курса я буду делать

00:00:33

референсы на различные технологии ссылки

00:00:37

на которые вы сможете найти в описании к

00:00:39

данному курсу то есть допустим вам нужно

00:00:42

понимать как работает но джесс дай

00:00:44

поэтому в описании вы найдете ссылку на

00:00:46

полный курс по но джесс на моем

00:00:48

youtube-канале для того чтобы вам лучше

00:00:50

было понимать что происходит внутри

00:00:52

данного видео да и соответственно то же

00:00:54

самое с другими технологиями для того

00:00:57

чтобы просто вам было легче

00:00:58

ориентироваться в том что происходит

00:01:01

также на правах рекламы скажу что на

00:01:05

моем youtube канале сейчас огромное

00:01:07

количество полезных материалов по java

00:01:09

script и вы можете в этом убедиться если

00:01:11

просто зайдете в раздел видео или

00:01:13

плейлист и и найдете здесь что-то для

00:01:15

себя посмотрите здесь большое количество

00:01:18

интересного контента который вам

00:01:20

обязательно поможет в вашей

00:01:21

профессиональной деятельности теперь с

00:01:25

вводной частью мы закончили и давайте

00:01:28

теперь приступать непосредственно к

00:01:29

тексту значит как мы уже сказали next

00:01:33

джесс это фреймворк над реактором

00:01:36

который служит для того чтобы мы могли

00:01:38

писать ряд приложение с использованием

00:01:41

концепта сервер сайт рендеринг

00:01:43

и давайте перед тем как мы начнем

00:01:46

разрабатывать непосредственно next

00:01:48

быстро посмотрим а что же такое вообще

00:01:50

ссср для этого я открыл диаграммы

00:01:53

где немножечко порисуем давайте вначале

00:01:55

разберем что же такое у нас

00:01:58

спс по переводится как сингл пейдж

00:02:01

applications do что дословно с в

00:02:04

переводе с английского языка

00:02:06

обозначается как единичная страница

00:02:10

приложения да если по-человечески

00:02:12

то это от на страничное приложение как

00:02:16

она работает да то есть мы можем взять

00:02:19

условный блок сервером и мы можем взять

00:02:23

условный блок клиента постойте single b

00:02:28

vibration работает исключительно на

00:02:30

клиентской части а клиентам в вебе

00:02:33

вообще является браузер то есть вот то

00:02:34

что я сейчас сделаю это и есть клиент и

00:02:36

как работает с п мы берем в браузере да

00:02:42

заходим на какую-то страницу вот

00:02:43

допустим на об diagrams . нет когда мы

00:02:46

сюда заходим еще перед тем как

00:02:48

приложение от рисовалась мы делаем

00:02:50

запрос на сервер который доступен по

00:02:52

данным доменному имени по айпи адресу и

00:02:55

так далее мы делаем запросы сервер

00:02:58

пытается понять а что же мы хотим

00:03:00

увидеть то есть какую страницу нам нужно

00:03:02

открыть и что нам нужно нарисовать

00:03:03

то есть мы сделаем некоторые request

00:03:12

сервер думает и соответственно

00:03:14

возвращает нам обратно некоторое

00:03:16

количество файлов до обычно это ввп html

00:03:23

css и java script можем так и написать

00:03:26

здесь что он нам возвращает html css

00:03:31

плюс джесс и предположим что давайте раз

00:03:36

уж мы говорим про react to будем

00:03:37

рассматривать это все в концепте реактор

00:03:41

где здесь

00:03:43

react react конечно же находится в java

00:03:45

script то есть допустим мы подключаем

00:03:48

здесь react кстати курс на который вы

00:03:52

можете найти так же в описании под

00:03:53

данным роликом обязательно посмотрите

00:03:56

его если вы вдруг не очень хорошо

00:03:58

знакомы с раком перед тем как проходить

00:03:59

данное видео в курсе я за 80 минут по

00:04:03

сути рассказываю про все его концепты

00:04:04

так вот react нам прилетает

00:04:07

именно в java script то есть это просто

00:04:09

набор некоторых функций если очень

00:04:11

условно до которые позволяют

00:04:12

реализовывать

00:04:13

его функционал и только после того как

00:04:16

клиент загрузил html-код

00:04:19

верность их на пустой css там какие-то

00:04:21

стили и react непосредственно мы

00:04:25

получили react на клиентской части уже

00:04:27

только после этого react

00:04:29

совместно с нашими java script файлом

00:04:32

берет и генерирует нам уже

00:04:35

непосредственно само приложение то есть

00:04:36

тут он нам создает applications

00:04:40

получается что контент этого приложения

00:04:45

мы генерируем

00:04:47

исключительно на клиентской части да то

00:04:49

есть у нас генерируется в динамическом

00:04:52

режиме с помощью java script и в

00:04:54

принципе мы получаем как раз таки

00:04:56

одностраничные приложение потому что нам

00:04:58

не нужно менять страницу мы все это

00:05:00

делаем на клиенте и react об этом

00:05:03

заботиться то есть даже если мы условно

00:05:05

меняем страницу какую-то данном

00:05:06

переходим на в новый раздел то на самом

00:05:10

деле это просто react берет и

00:05:12

перерисовывает динамические системы

00:05:16

плюсы данного подхода в том что все

00:05:19

работает довольно таки быстро да потому

00:05:22

что мы изначально тратим большое

00:05:23

количество времени на то чтобы загрузить

00:05:25

много java script потому что ну грубо

00:05:27

говоря мой сразу же грузин все

00:05:29

приложение вообще естественно есть

00:05:31

различные методики позволяющие это дело

00:05:33

оптимизировать но суть сводится к тому

00:05:35

что мы загружаем все наше приложение а

00:05:38

потом уже согласно тому что делает

00:05:40

пользователем и отрисовываем нужную ему

00:05:42

часть и соответственно он не видит

00:05:44

никаких задержек все происходит довольно

00:05:46

таки быстро из минуса да то что мы

00:05:50

изначально тратим здесь какое-то время

00:05:52

потому что при первом запросе мы грузим

00:05:56

не те вещи которые нам нужны то есть

00:05:57

много того что нам не нужно в принципе и

00:06:02

также большой минус у сингл печь

00:06:05

applications есть то что поисковые

00:06:09

роботы они не могут никак

00:06:10

проанализировать контент тех страниц

00:06:13

которые открывает пользователь почему

00:06:16

потому что все генерируется динамически

00:06:19

до поисковые роботы это такие как яндекс

00:06:22

google или другие поисковые системы

00:06:25

они же не в ручную заходит на сайт и

00:06:28

смотрят что же там со структуры и

00:06:29

системы и так далее

00:06:30

у них есть специальные роботы которые

00:06:32

заходят по страницам сайта да они их

00:06:37

индексируют и смотрят на html content

00:06:39

тем самым они делает поисковую выдачу да

00:06:43

то есть можем допустим зайти в google

00:06:45

набрать какой-нибудь react

00:06:47

и то есть вот поисковой выдаче да здесь

00:06:49

такие вот сайта и как раз таки

00:06:52

оптимизация сайтов под эту поисковую

00:06:55

выдачу да потому что ну я думаю что

00:06:57

логично чем выше находится ваш сайт тем

00:06:59

больше по нему кликов тем больше трафика

00:07:01

тем соответственно больше внимание до

00:07:03

внимание уже можно по-разному там

00:07:06

интегрировать ибо в свои проекты либо в

00:07:08

монетизацию и так далее нам нужно

00:07:11

каким-то образом оптимизировать сайт и

00:07:13

под его выдачи

00:07:14

и проблема заключается в том что если мы

00:07:17

работаем в формате сингл печь апликэйшен

00:07:19

то поисковые роботы

00:07:21

когда заходят на наш сайт они просто

00:07:23

видят пустой контент страницы

00:07:25

да потому что все остальное динамически

00:07:27

генерируется и это большая проблема для

00:07:30

некоторых типов сайтов то есть допустим

00:07:31

если мы делаем закрытое приложение

00:07:34

скажем какойнибудь серая им систему

00:07:35

которую нам не нужно индексировать

00:07:38

нам все равно нам поисковых роботов

00:07:40

поэтому можем пойти с этим концептом

00:07:42

либо нам просто допустим какой-то

00:07:44

корпоративный сайт мы делаем и нам

00:07:46

неважно да что там будет у нас поисковой

00:07:49

выдаче но если мы делаем допустим какой нибудь

00:07:51

блог или интернет-магазин как вариант и

00:07:55

если поисковые роботы не могут точно

00:07:58

понять что у нас происходит на сайте то

00:08:00

соответственно он не будет нормально

00:08:01

ранжировать это сайт в поисковой выдаче

00:08:04

да я-то уже проблемная зона

00:08:06

поэтому для того чтобы решить данную

00:08:09

проблему был изобретён такой концепт

00:08:12

который называется сервер сайт рендеринг

00:08:15

но или сокращенно

00:08:16

ссср

00:08:21

в принципе если также дословно его

00:08:23

кровать переводить то получается что мы

00:08:26

делаем рендеринг на стороне сервера и на

00:08:30

самом деле этот концепт а вовсе не новый

00:08:32

он уже очень давно присутствует то есть

00:08:34

допустим если раньше массово создавали

00:08:36

сайтами печь питу там где как раз таки

00:08:39

есть сервер сайт рендеринг да то есть

00:08:41

тут примерно такая же конструкция

00:08:45

получается что у нас есть некоторые

00:08:46

сервер есть клиент клиенту также

00:08:54

является браузером да то есть мы просто

00:08:56

уже другой конце просматриваем и раньше

00:08:58

мы также заходили на какой-нибудь сайт

00:09:01

то есть нашего клиента

00:09:03

делали запрос на сервер и в ответ мы

00:09:10

получали те же самые

00:09:13

html и css вот только если давайте

00:09:18

запишу здесь html css

00:09:19

ну и плюс javascript также вот только

00:09:25

если клиент делает

00:09:27

на запрос на сервер который написан

00:09:30

напичкать сайт описаны .

00:09:32

the client он не может понимать pitch

00:09:35

пекут да поэтому если тут пички например

00:09:39

то вначале печки на сервере он нам

00:09:41

генерирует в зависимости от запроса

00:09:44

какое-то и чтим или наполнения то есть

00:09:46

уже готовую структуру приложение и после

00:09:49

этого уже только дает нам статику

00:09:51

поэтому например в php или других языках

00:09:55

там типа сишарп или джавы мы уже

00:09:59

получаем сервер сайт рендеринг то есть

00:10:01

мы уже получаем статику но при этом у

00:10:02

нас отсутствует динамика динамика потому

00:10:05

что на любой запрос от клиента нам

00:10:08

необходимо также делать запрос на сервер

00:10:09

омс новый генерирует нам статику и этот

00:10:13

подход тоже не очень оптимально

00:10:14

получается и мы рассматривать будем

00:10:18

концепт сервер сайт рендеринга когда уже

00:10:22

были изобретены java script ремарки в

00:10:25

частности

00:10:26

react для того чтобы комбинировать

00:10:29

лучшие практики с двух миров

00:10:30

то есть здесь по сути

00:10:33

то же самое мы заходим в браузер им

00:10:35

делаем запрос на сервер да здесь все

00:10:37

неизменно но вот на сервере уже крутится

00:10:40

некоторый другой сервер не печки там

00:10:43

работает но джесс кстати на курс который

00:10:45

вы также можете найти ссылку в описании

00:10:48

посмотрите там всего час и при этом вы

00:10:50

хорошо поймете что такое но джесс здесь

00:10:54

крутится но джесс сервер и конкретно на

00:10:58

нем крутится свой сервер на next джесс

00:11:01

который обрабатывает входящий запрос и

00:11:05

дальше в зависимости от этого вопроса на

00:11:08

языке java script он берёт и совместно с

00:11:11

реактором то есть помимо того что здесь

00:11:13

присутствует next также присутствует

00:11:16

react а потому что сам по себе next этот

00:11:18

фреймворк над реактор совместно вот эти

00:11:21

вот технологии они берут и генерирует

00:11:23

нам уже статику

00:11:24

генерирует html и css для того чтобы мы

00:11:27

могли все это писать на java script

00:11:29

framework все как мы любим и на клиент

00:11:32

мы здесь отправляем уже непосредственно

00:11:34

вот эту вот статику то есть дальше нам

00:11:39

не нужно динамически здесь генерировать

00:11:41

не какой контент мы и так уже все

00:11:42

получаем с сервера и соответственно

00:11:45

когда мы заходим на сайт то мы уже видим

00:11:48

готовую структуру и это означает что

00:11:50

роботы которые будут индексировать

00:11:52

данный сайт они тоже увидят эту

00:11:54

структуру что позволит сойду

00:11:55

продвигаться если в общих чертах то

00:11:59

примерно это таким образом выглядят

00:12:00

естественно у современного подхода сср

00:12:03

есть и еще плюс и ну например что на

00:12:05

самом деле мы создаем универсальное

00:12:07

приложение в том плане что при первом

00:12:11

запросе мы делаем сервер сайт рендеринг

00:12:13

а дальше приложение может работать как

00:12:15

сингл печь applications потому что нам

00:12:18

очень важно при первом рендеринге

00:12:20

вернуть html структуру а дальше мы можем

00:12:23

все это работать в динамическом режиме

00:12:25

то есть на самом деле вы не заметите

00:12:26

разницы single page приложения да но при

00:12:29

этом мы получим большое количество

00:12:31

бонусов

00:12:32

минус у этого подхода в том что создание

00:12:36

таких сайтов конечно немного сложнее

00:12:38

потому что если допустим в первом

00:12:40

варианте мы разрабатываем все только на

00:12:42

клиенте и не паримся поводу сервера то

00:12:44

здесь нам нужно определять

00:12:46

где мы что делаем на сервере к тем что

00:12:48

делаем на клиенте до учитывать специфику

00:12:51

двух миров и так далее да но тем не

00:12:55

менее благодаря таким фреймворком как

00:12:57

например next кстати для

00:12:59

view джесс есть фреймворк который

00:13:01

называется naxt и если вам интересно то

00:13:04

на канале также есть по нему быстрый

00:13:06

курс жизнь становится намного проще и

00:13:09

этим видео я вам покажу как все это

00:13:11

работает поэтому я думаю что с и

00:13:14

концептуальной частью мы закончили и

00:13:16

теперь время окунуться в практику

00:13:21

официальная документация данной

00:13:23

технологии находится на сайте next джез

00:13:25

. орк здесь есть много чего интересного

00:13:28

то есть вы можете посмотреть как

00:13:30

использовать там база вы как создавать

00:13:33

базовые приложения такие бонусы и фичи

00:13:38

есть у технологии есть обширная

00:13:41

документация очень хорошая мы по ней

00:13:43

много будем сегодня гулять смотреть

00:13:45

значит как нам стартануть что вообще

00:13:48

есть да у определенных концептов здесь

00:13:53

сразу я хочу обратить ваше внимание на

00:13:54

то что next будет работать если у вас

00:13:59

стоит но джесс 10 и 13 или выше до

00:14:03

соответственно если у вас ниже или от

00:14:04

вообще отсутствует тот же 100 установите

00:14:06

ее на компьютер

00:14:07

делается это очень просто на сайте но

00:14:10

джез . орк да я надеюсь что вы уже

00:14:12

посмотрели курсы знаете как надо

00:14:13

поставить есть различные шоукейсе то

00:14:17

есть какие сайты используют например

00:14:19

next например тик ток до это нынче

00:14:23

популярная социальная сеть то есть

00:14:26

технология она довольно-таки

00:14:27

перспективные большие гиганты ее

00:14:29

используют и это означает что

00:14:31

действительно было бы неплохо с ней

00:14:33

познакомиться также если мы нажмём на

00:14:37

кнопку start learning to здесь есть

00:14:39

неплохой такой tutorial гайд который

00:14:42

позволит вам быстро окунуться в

00:14:44

next и посмотреть как вообще его

00:14:46

использовать но мы его проходить не

00:14:49

будем потому что мы будем делать сегодня

00:14:50

свое дело плюсом будут пояснить как это

00:14:52

работает

00:14:54

значит давайте перейдем в документацию и

00:14:57

здесь посмотрим как нам все это

00:14:59

установить то есть мы уже поговорили про

00:15:01

то что но jest нам необходим на

00:15:04

компьютере и дальше наиболее простой

00:15:08

способ установки текста на компьютер

00:15:13

является утилита crate next up

00:15:16

да возможно вы работали с реактором там

00:15:19

присутствует утилита греет react об это

00:15:22

просто пакет позволяющие развернуть уже

00:15:25

целое приложение свой готовым инвайн

00:15:27

монтаж

00:15:28

использовать да поэтому это будет

00:15:30

довольно таки просто мы сегодня пойдем

00:15:32

именно с таким способом установки но

00:15:35

если вы хотите более детально

00:15:36

разобраться что происходит то можете

00:15:38

воспользоваться мануальным сетапом когда

00:15:40

вы устанавливаете все вручную да здесь

00:15:43

подробно описано как это работает вот но

00:15:46

нам потребуется вот такой скрипт здесь

00:15:50

мы обращаемся к утилите яндекс то есть

00:15:53

это очень похожи на

00:15:55

npn но единственное что он позволяет

00:15:57

временно скачать вот этот пакет да и

00:16:02

использовать его только когда мы его

00:16:06

вызываем при этом он не будет нам

00:16:08

засорять глобальную область видимости

00:16:10

глобальными пакетами да например такие

00:16:12

как creed mixtape то здесь мы обращаемся

00:16:14

к индексу и просто говорим что нам

00:16:16

необходимо поставить вот этот способ

00:16:20

установки поэтому переходим терминал 4

00:16:23

сделать побольше чтобы вам было видно и

00:16:25

для начала давайте выберем какую-нибудь

00:16:28

папку где мы хотим создать этот проект

00:16:30

допустим я перейду в папку вот шторм

00:16:33

projects и дальше обращаюсь к утилите

00:16:36

mpx

00:16:37

дальше нам потребуется кредит next up и

00:16:41

дальше давайте мы как-нибудь назовем

00:16:44

наше будущее приложение наш будущий

00:16:46

проект допустим next курс дальше я

00:16:52

нажимаю enter и мы ждем пока

00:16:54

mpx нам скачает греет next up для того

00:16:58

чтобы мы могли им воспользоваться и вот

00:17:01

мы за 80 он все это установили здесь мы

00:17:05

можем выбрать шаблон до для будущего

00:17:09

проекта выбираем и стрелочками можно

00:17:12

выбрать пример с сайта next джесс с его

00:17:16

репозитория но я пойду с дефолтным

00:17:19

стартапам нажимаю enter и жду пока

00:17:22

просто становится react react дом да то

00:17:25

есть эти два пакета они уже включены в

00:17:29

next

00:17:30

да потому что опять же это фреймворк над

00:17:32

рядом и он использует их по полной

00:17:38

степени давайте дождемся пока все это

00:17:41

установится и если вы сделали все

00:17:44

правильно то в конце вы получите вот

00:17:46

такое сообщение с access мы создали next

00:17:50

курс дает название проекта которая

00:17:53

вписал и дальше нам доступны следующие

00:17:54

команды

00:17:55

мдф build но нам сегодня очень интересно

00:17:58

потому что мы сами на все это посмотрим

00:18:01

здесь по факту мы можем посмотреть какие

00:18:03

проект у меня есть и перейти в папку

00:18:05

next курс команда ls

00:18:11

в маке я смотрю какие файлы присутствуют

00:18:13

по-моему в windows эта команда dir видим

00:18:17

что действительно мы сгенерировали

00:18:19

проект и теперь время на него посмотреть

00:18:22

давайте его откроем ввп шторме значит

00:18:27

нашему окон в шторм project

00:18:30

им не интересует next курс нажимаю

00:18:33

открыть значит мне потребуется некоторое

00:18:36

количество времени для того чтобы шторм

00:18:38

проиндексировал данный проект то есть

00:18:39

как видите я все показываю с нуля

00:18:43

рассматриваю данный проект и давайте

00:18:45

посмотрим что тут присутствует то есть

00:18:48

во первых присутствует папка над мариус

00:18:50

да где хранится все ядро данного

00:18:53

приложения все библиотеки до которые

00:18:55

используют конкретно где-то здесь мы

00:18:57

наверняка найдем next

00:19:00

вот он непосредственно сам next да и тут

00:19:03

присутствует большое количество его

00:19:04

сгенерированных файлов какие-то модули

00:19:07

которые мы будем использовать и

00:19:09

наверняка где-то здесь присутствует

00:19:10

также react

00:19:11

и react дом то есть это вот ядро

00:19:14

на котором работает наше приложение

00:19:17

дальше по классике гид игнор поехать

00:19:20

джейсон и обязательно нужно посмотреть

00:19:22

да то есть вот как раз таки присутствуют

00:19:25

те скрипты которые мы будем использовать

00:19:27

div для того чтобы непосредственно

00:19:29

собрать приложение в девелопмент мази то

00:19:34

есть в режиме разработки бьют для того

00:19:37

чтобы собрать продакшен мод и старт

00:19:39

чтобы запустить

00:19:40

разработка проекта и список зависимости

00:19:45

как раз таки next версии 944

00:19:48

react 1613 и react дом той же самой

00:19:52

версии все довольно таки базового ничего

00:19:55

интересного нет кроме у списка этих

00:19:57

зависимости папка public она хранит себе

00:20:02

какие-то статические файлы то есть

00:20:04

favicon такой tvg и все больше тоже

00:20:07

ничего интересного нет есть папка п джаз

00:20:10

и давайте мы сделаем вот что я возьму и

00:20:12

удалю эту папку пейджет сейчас по той

00:20:15

причине что я хочу показать вам все с

00:20:17

нуля то есть вот мы идем с полностью

00:20:19

чистым проектом который нам как-то нужно

00:20:22

сейчас запустить на самом деле для того

00:20:26

чтобы работать с текстом в первую

00:20:29

очередь нам необходимо разобраться с тем

00:20:31

а как вообще здесь что-то работает то

00:20:35

есть если мы привыкли видеть папочку

00:20:37

source например да и какой-то

00:20:40

входной файл там индекс же если manages

00:20:43

to в никсе такого нет более того здесь

00:20:47

отсутствует файл index.htm или ли вообще

00:20:50

какой-либо html который мы хотели бы

00:20:53

увидеть у нас сейчас вообще нет никакого

00:20:56

java-script

00:20:57

и как нам начать работу то есть с чего

00:21:00

вообще нам начать логично что нам нужно

00:21:03

начать какой-то странице который будет

00:21:05

открывать наше приложение и для того

00:21:08

чтобы нам создать страницу

00:21:09

по сути нам необходим роутинг но ротор

00:21:14

здесь также у нас нет вообще нет

00:21:16

никакого java script что нам делать и

00:21:19

здесь так как раз таки есть вот

00:21:22

первая такая интересная особенность в

00:21:24

тексте на самом деле то же самое и в на

00:21:27

кости сделано про который я говорил

00:21:30

роутинг и различные страницы мы создаем

00:21:34

через файловую систему то есть для того

00:21:37

чтобы создать первую страницу нам

00:21:39

необходимо в корне приложение создать

00:21:41

папку пейджер и это зарезервированное

00:21:44

слово в никс который он будет считывать

00:21:48

и так у нас есть папка пейджер на

00:21:51

переводе с английского как страница и

00:21:53

здесь допустим мы можем создать

00:21:56

какой-нибудь файл java script например и

00:22:00

он зову индекс .

00:22:02

джесс давайте для того чтобы не

00:22:06

отвлекаться на систему китая сделаю

00:22:08

таким вот образом

00:22:09

удалю просто данную папку сейчас в

00:22:12

штурме не будет ругаться на то что

00:22:15

отсутствует гид но я возьму просто его и

00:22:18

ударю

00:22:21

до чтобы не отвлекаться на git я создаю

00:22:25

один файл индекс . джесс и что мы здесь

00:22:29

должны написать на самом деле здесь нет

00:22:32

ничего специфического мы должны здесь

00:22:33

написать какой-нибудь react компонент да

00:22:38

и давайте я напишу таким образом то есть

00:22:40

я сделаю экспорт default

00:22:42

если друзья вдруг по какой-то причине вы

00:22:45

плохо знакомы с системой импорта и

00:22:48

экспорта в acme скрипт 6 и выше то так

00:22:52

же в описании есть полный курс по из 6

00:22:55

плюс который позволит вам окунуться во

00:22:57

все детали синтаксиса java-script это

00:23:01

небольшое отступление мы экспортируем по

00:23:03

дефолту

00:23:04

функцию которую давайте назовем допустим

00:23:07

а давайте так и назовем индекс да сейчас

00:23:11

в реакции мы в основном используем

00:23:13

функциональные компоненты поэтому это не

00:23:15

исключение и здесь допустим я вернул

00:23:18

какой-нибудь же секс

00:23:20

ну давайте допустим это будет заголовок

00:23:23

h1 день напишу

00:23:24

хеллоу next .

00:23:28

jess

00:23:30

и все здесь также вы можете увидеть

00:23:33

такую интересную вещь что я не

00:23:35

импортирую react да как привыкли это

00:23:38

видеть я не пишу здесь

00:23:39

импорт react фронт react в тексте это не

00:23:44

нужно делать и сейчас я расскажу почему

00:23:47

теперь давайте посмотрим на париж .

00:23:50

джейсон значит для того чтобы стартануть

00:23:53

нам необходимо написать команду npm ран

00:23:58

старт и мы сразу же получили здесь

00:24:04

ошибку потому что я думаю что нет

00:24:09

абсолютно прав так как в первую очередь

00:24:11

все-таки необходимо запустить команду

00:24:13

mpm ран д то есть все таки с помощью

00:24:16

команды diff мы запускаем наше

00:24:19

приложение для того чтобы next на

00:24:21

сгенерирую такую папочку .

00:24:24

next вы можете поизучать что вообще

00:24:26

здесь находится но на самом деле здесь

00:24:28

просто какие-то системный файл которые

00:24:30

позволяют работать непосредственно

00:24:31

сервера даты можем раскрыть папку

00:24:34

сервер например и посмотреть какие то

00:24:36

файл присутствуют тут все собрано с

00:24:38

помощью в пока кстати курс на который вы

00:24:41

найдете в описании так же и здесь

00:24:44

соответственно есть какой-то код который

00:24:49

относится к серверу и которые вот можем

00:24:51

конечно разобрать но пока что не стоит

00:24:54

такой задачи то есть это папка . next

00:24:59

она грубо говоря системная и вне никакие

00:25:01

изменения делать не нужно оно просто

00:25:03

нужно для работы самого ник 100 и более

00:25:05

того в консоли мы видим очень приятную

00:25:07

теперь надпись уже без ошибки что наш

00:25:10

сервер готов и он работает на локу хост

00:25:13

3000 если я на него перейду то я получаю

00:25:17

такую красоту

00:25:18

то есть выходить видим хэллоуин джесс

00:25:21

присутствует такая кнопочка пока мы

00:25:23

можем ее проигнорировать она находится

00:25:25

на добавляется просто никс там так

00:25:29

давайте изображу масштаб самом деле вот

00:25:32

такое должен быть масштаб сто процентов

00:25:34

давайте сделать побольше чтобы было

00:25:37

видно вдруг если вы с мобильного

00:25:38

телефона

00:25:39

и все мы получили работающее приложение

00:25:42

то есть сейчас если мы посмотрим на

00:25:43

структуру у нас присутствует всего лишь

00:25:45

один файл при чем здесь мы как

00:25:49

функциональный компонент создаем react

00:25:51

компонент даже не импортируем react и

00:25:53

при этом уже все работает и

00:25:55

действительно как я говорил мы создаем

00:25:58

роутинг через файловую систему то есть

00:26:00

папки пейджер мы создаем файл индекс .

00:26:04

джесс у этого файла должно быть название

00:26:07

yandex потому что когда мы заходим

00:26:10

допустимо главную страницу

00:26:12

ведь сейчас в адресной строке ничего нет

00:26:14

да the next по умолчанию будет смотреть

00:26:17

на файл который называется индекс

00:26:19

соответственно если допустим мы захотим

00:26:21

создать какую-нибудь другую страницу

00:26:23

например страницу эбаут мы просто берем

00:26:26

создаем здесь about .

00:26:29

джесс здесь экспортируем по дефолту

00:26:32

функцию так и назову эбаут и так же

00:26:37

возвращаем здесь какой-нибудь же секс

00:26:39

допустим также в заголовке h1 я здесь

00:26:43

напишу about печь и все тоже больше

00:26:47

ничего не делаю никуда не импортирую

00:26:48

данный компонент не импортирую react

00:26:51

просто описываю

00:26:52

компонент нажимая controls перехожу

00:26:56

браузер обновляю страницу пока что мы

00:26:58

видим все еще хэллоу

00:26:59

next джесс дано если мы перейдем на

00:27:02

пусть у нас лишь about мы получаем уже

00:27:05

about печь круто круто учитывая сколько

00:27:09

кода мы написали то есть вот таким вот

00:27:11

образом мы создаем как раз таки роутинг

00:27:15

естественно если мы зайдем на какой-то

00:27:17

несуществующую страницу то по умолчанию

00:27:19

мы здесь получаем ошибку 404 от

00:27:22

непосредственно next позже мы разберемся

00:27:24

какие можно поменять да покажет мы видим

00:27:27

что это тут название в url-адрес about

00:27:32

она совпадает с названием файлы до

00:27:34

соответственно здесь мы допустим просто

00:27:37

чтобы немножечко попрактиковаться можем

00:27:40

создать например новый файл допустим

00:27:43

пост . джесс также спарте ровать по

00:27:46

дефолту функцию

00:27:48

пусть им пост и пока что будем просто по

00:27:53

умолчанию возвращает h1 где будем писать

00:27:57

босс мэйдж тоже больше ничего не делаю

00:28:01

однако если я сейчас перейду на страницу

00:28:04

пост тут мы получаем еще одну страницу

00:28:07

то есть вот так вот просто создается

00:28:09

роутинг в тексте теперь давайте немного

00:28:13

проанализируем что же мы в итоге

00:28:15

получили допустим я вернусь на главную страницу

00:28:18

холодных джесс и в чем же отличие да то

00:28:21

есть такое преимущество мы получили с

00:28:23

использованием покажет у данного

00:28:25

фреймворка если мы посмотрим исходный

00:28:29

код данной странице то естественно мы

00:28:31

здесь получим во-первых какие-то

00:28:34

системные скрипты их нам трогать не

00:28:37

нужно эти проинспектируем h1 и вот мы

00:28:40

видим что корневой элемент нашего

00:28:42

приложения это

00:28:43

div с и d 2 нижнее подчеркивание next

00:28:46

и внутри находится тот контент который

00:28:48

мы описали в нашей странице давайте

00:28:53

зайдем в network

00:28:55

я также мою страницу и посмотрим какие

00:28:58

мы запросы здесь делали мы делаем

00:29:01

различные запросы на скрипты то есть на

00:29:05

java script который мы получаемся

00:29:07

сервера до но при этом нет никаких

00:29:12

покажут асинхронных запросов как нам

00:29:15

убедиться что вообще прошел сервер сайт

00:29:17

рендеринг здесь и что действительно

00:29:20

поисковые роботы они смогут увидеть

00:29:21

контент данной страницы для этого мы

00:29:25

можем нажать также правой кнопкой

00:29:26

к отменить выделение и если в прошлый

00:29:30

раз мы нажимали здесь посмотреть код да

00:29:32

для того чтобы вызвать virtus то в этот

00:29:35

раз мы нажмем посмотреть код страницы

00:29:37

для того чтобы увидеть скелет html

00:29:40

страницы которые на самом деле прилетел

00:29:42

с сервера давайте его раскроем сброшу

00:29:46

масштаб было пусть будет допустим 170

00:29:52

и вот что нам ответил сервер то есть как

00:29:55

я говорю серверном отвечает обычно и

00:29:57

чтим элем да вот как раз мы получаем

00:29:59

этот доктор почти мальфит здесь

00:30:02

присутствуют какие-то заранее

00:30:03

заготовленные стиля и давайте найдем то

00:30:08

что у нас здесь интересует обычные где

00:30:11

вы поиском допустим h1 и действительно в

00:30:17

теге body мы видим что помимо этого

00:30:20

корневого дива

00:30:21

сойди next мы получаем тот контент

00:30:24

который мы сгенерировали хэллоу next

00:30:26

джесс ну и дальше идут различные скрипты

00:30:30

чуть позже мы еще обратим внимание вот

00:30:33

на этот скрипт next дата

00:30:35

да тут присутствует какой-то джейсон

00:30:36

который позволяет нам отрисовывать

00:30:38

приложение

00:30:39

но факт в том что серверном ответе вот

00:30:42

именно с уже этим контентом которые мы написали в

00:30:45

реакции но при этом уже bocelli его в

00:30:48

html произошел сервер сайта рендеринг и

00:30:51

google сможете при понять что у нас

00:30:55

происходит на странице

00:30:56

теперь давайте покажу то же самое в

00:30:58

networked если мы обновим страницу

00:31:00

посмотрим в network то самый первый

00:31:04

запрос о ghost да вот мы делаем запрос

00:31:08

get запрос на локу хост 3000 и в ответе

00:31:11

мы получаем как раз таки вот вот html в

00:31:14

рис пользе он присутствует то что на

00:31:16

сгенерировал сервер то есть очень грубо

00:31:19

говоря мы работаем как и раньше работал

00:31:21

печки только теперь это все с

00:31:23

использованием react java script и

00:31:26

посмотрите как удобно да более того

00:31:28

здесь мы можем допустим создавать более

00:31:31

сложной структуры страниц естественно

00:31:33

допустим все это обернуть в react

00:31:35

фрагмент ну и например добавить здесь

00:31:39

какой-нибудь текст lorem будет 7 давайте

00:31:43

посмотрим он сразу же

00:31:46

отобразился у нас на странице и при этом

00:31:49

если мы посмотрим на исходный код

00:31:51

страницы по

00:31:52

здесь также присутствует этот текст то

00:31:54

есть все теперь точно

00:31:55

гогу сможет это проанализировать что у

00:31:59

нас за контент на странице и

00:32:00

соответственно уже как-то его в

00:32:02

поисковую выдачу отображать окей с этим

00:32:05

концептом мы также разобрались двигаемся дальше

00:32:07

давайте немного поговорим про роутинг

00:32:10

потому что конечно очень здорово что мы

00:32:13

можем создавать атаку странице например

00:32:15

bout или мы создали еще страницу posts

00:32:19

но как нам допустим быть с теми

00:32:24

страницами которые используют

00:32:26

динамические параметры скажем пост вот

00:32:29

223

00:32:30

даю другой едешь ник понятно что на

00:32:33

каждую страницу нам не нужно будет

00:32:35

создавать отдельный файл потому что этих

00:32:36

постов в неограниченное количество

00:32:38

лишних меняется и нам как-то нужно

00:32:41

динамических обрабатывать давайте

00:32:44

посмотрим как это реализовано в тексте

00:32:46

то есть предположим что мы будем писать

00:32:49

какой-нибудь приложение которое

00:32:50

действительно будет показывать нам

00:32:52

список

00:32:53

постов и давайте отдельный пост мы

00:32:56

сможем открывать допустим по адресу эти

00:32:59

здесь не пришел если вот эту страницу мы

00:33:02

открываем по адресу слэш пост да потому

00:33:04

что файл называется пост то отдельный

00:33:07

пост я хочу открывать по адресу слэш

00:33:09

пост слэш допустим какой-то ядерник

00:33:16

соответственно нам нужно как-то

00:33:18

создать во первых вот эта турель адрес и

00:33:21

опять же у нас есть в данном случае один

00:33:24

путь а те покажу почему нет речь помимо

00:33:27

файлов я могу здесь создавать например

00:33:29

директория пост то есть я делаю

00:33:34

некоторую группу и дальше для того чтобы

00:33:38

указать на кс то что я здесь буду

00:33:40

использовать динамический параметр я

00:33:42

создаю отдельный файл который имеет

00:33:46

следующий шаблон название то есть мы

00:33:48

оборачиваем все это в квадратные скобки

00:33:49

. джесс и в квадратных скобках я

00:33:53

указываю название этого параметра

00:33:55

который потом я смогу читать

00:33:57

например айди естественно я могу

00:34:00

называть его по-разному скажем пост

00:34:02

айди давит на ваше усмотрение самое

00:34:06

простое назвать просто о еде и именно

00:34:09

таким синтаксисом мы обозначаем на x то

00:34:13

что здесь у нас будет какая-то динамика

00:34:15

давайте пока что мы будем

00:34:17

по дефолту экспортировать функцию

00:34:21

которая назовут опустим просто пост

00:34:25

давайте пока здесь просто вернем

00:34:31

какой-нибудь react код и тот же секс

00:34:34

допустим в заголовке h1 я вернусь здесь

00:34:37

пост и теперь давайте посмотрим

00:34:41

отображается в браузере то есть если я

00:34:44

щас одну страницу все равно будет ошибка

00:34:46

404 по той причине что мы сейчас заходим

00:34:49

на адрес пост если я уберу здесь с в

00:34:53

единственное число поставлю то как

00:34:56

видите мы здесь получаем уже нужной нам

00:34:58

страницу причем неважно как уедешь них

00:34:59

мы здесь укажем как видите все равно

00:35:01

открывается нужной нам страница dayan'ом

00:35:03

также происходит с сервер сайт

00:35:05

рендерингом однако как нам получить

00:35:10

данное значение

00:35:11

естественно мы сами это можем делал

00:35:13

распарсить но это не та же то хочет

00:35:16

разработчик использующий фреймворк нам

00:35:19

необходимо получить это едешь ник и уже

00:35:21

в зависимости от этого идти что-то нам

00:35:23

отображать в юзер интерфейса для этого

00:35:28

мы можем воспользоваться интересных

00:35:30

функций который называется

00:35:31

из роутер и функцию роутер она

00:35:36

импортируется не из какой-нибудь react

00:35:39

роутер дом она импортируется из next

00:35:43

роутер так как мы работаем с текстом ему

00:35:46

необходимо синхронизировать и серверные

00:35:49

параметры плюс клиентские параметры то

00:35:52

необходимо пользоваться этой функцией

00:35:54

давайте мы здесь помощь им объект

00:35:55

роутера с помощью функцию роутер и

00:35:59

посмотрим на то а что такое у нас

00:36:01

непосредственно сам роутер

00:36:03

обновлю страницу и интересный момент

00:36:08

заключается в том что первый console.log

00:36:10

мы получаем непосредственно на сервере

00:36:12

то есть мы получаем в консольки через

00:36:15

которую мы запускаем данный проект

00:36:17

если мы посмотрим что здесь находится

00:36:19

тут есть интересное параметры например

00:36:22

текущей road посмеем и так далее но и

00:36:27

так много чего интересного в принципе

00:36:30

хотя этим можно пользоваться чуть позже

00:36:31

я покажу как что более интересно на

00:36:34

клиенте мы получаем сейчас 2 консоль

00:36:39

блога и чуть позже мы избавимся от этих

00:36:41

двух

00:36:42

эти пока рассмотрим второй console.log и

00:36:45

мы увидим более обширный объект чем был

00:36:48

на сервере то есть здесь

00:36:51

из интересного что мы можем найти

00:36:52

например кита параметры которые содержат

00:36:55

себе вот название уже этого пути или

00:36:58

например объект к вере это объект где

00:37:02

ключ как раз таки совпадает с тем

00:37:04

названием которые мы определили название

00:37:06

файла то есть сейчас на самом деле

00:37:09

просто демонстрации ради если мы

00:37:12

поменяем название файла например на пост

00:37:18

айден его переименую я обновлю страницу

00:37:23

то сейчас в объекте к вере мы уже

00:37:26

получаем ключ

00:37:27

пост иди да то есть он берется и

00:37:29

название файла и здесь как раз таки

00:37:31

содержится то значение которые мы

00:37:33

обозначили в адресной строке то есть

00:37:35

если мы напишем 42 то соответственно мы

00:37:38

получаем здесь нам нужно и значение до

00:37:41

по этой причине мы можем вывести это в

00:37:43

шаблон и определить каким постом мы

00:37:45

работаем единственно что я здесь теперь

00:37:47

поменяю пастой дина все-таки нормальной

00:37:50

и короткие айди

00:37:52

давайте мы сюда выведем все то есть это

00:37:54

у нас будет роутер к вере я пойди-ка

00:38:02

кстати роутер делу концу и лоб на

00:38:05

сервере потому что мы генерируем react

00:38:09

компоненты в первую очередь на сервере

00:38:11

дай поэтому перед тем как запускать все

00:38:13

это на клиенте сервер который работает

00:38:18

со стороны ник джесс он также

00:38:20

обрабатывать данную функцию поэтому

00:38:22

console.log вызывается сейчас если мы

00:38:25

посмотрим то мы здесь получаем нужное

00:38:27

нам значение 42 например или другой

00:38:29

какой то едишь никто есть мы видим что

00:38:31

мы смогли определить

00:38:32

лить и чуть позже мы сможем уже делать

00:38:34

нужные нам запросы по этим ключам

00:38:37

а пока давайте вернемся еще к

00:38:40

непосредственно

00:38:41

роутинга еще покажу пару интересных

00:38:43

вещей помимо того что мы можем создавать

00:38:48

файлы

00:38:49

допустим about . джесс а если нам нужно

00:38:53

сделать какую-то группу то мы можем

00:38:55

создать эту страницу по-другому мы можем

00:38:57

стать папку эбаут и теперь давайте

00:39:03

перемещусь сюда файл about теперь у нас

00:39:08

получается вот такая структура что есть

00:39:10

папка и в ней находится файл бал . джесс

00:39:12

теперь странице эбаут у нас не доступно

00:39:15

да потому что она отсутствует но при

00:39:18

этом есть вот такой вот адрес

00:39:19

about about да и теперь мы открываем

00:39:22

нужно нам страницу чтобы два раза и

00:39:24

здесь не писать при этом мы остались в

00:39:27

рамках группы мы можем просто

00:39:29

переименовать данный файл кто нажал на 4

00:39:36

фактор ли name no index

00:39:39

да и тогда по умолчанию здесь также

00:39:44

нужно оставить эбаут по умолчанию когда

00:39:46

мы им заходить на

00:39:47

road эбаут мы будем открывать данный

00:39:49

файл то есть это специальное название и

00:39:51

соответственно сейчас этот адрес нам

00:39:54

недоступен но доступно просто странице эбаут то

00:39:57

есть мы можем по-разному это делать и

00:39:58

прелесть заключается в том что если

00:40:01

допустим нам нужен какой-нибудь здесь

00:40:03

другой road например автор . джесс

00:40:09

на давайте я скопирую здесь структура

00:40:17

то у нас есть определенная группа

00:40:20

который отвечает только за слэш about на

00:40:23

этим самым можно лучше структурировать

00:40:25

наши road и здесь нас все доступно новой

00:40:28

страницы автор до или здесь также по аналогии мы

00:40:32

можем использовать например различные

00:40:34

динамические параметры что тоже подойдет

00:40:37

для next для этого достаточно просто

00:40:39

написать все в квадратных скобках очень

00:40:43

хорошо теперь давайте разберем следующий

00:40:46

момент сейчас мы в принципе более-менее

00:40:48

разобрались как работает роутинг как

00:40:50

работает сервер сайт рендеринг снег 100

00:40:53

мг видите для этого нам вообще ничего не

00:40:55

пришлось сделать при этом технологии

00:40:57

относительно сложное там много за

00:40:58

кулисами происходит у нас есть теперь

00:41:01

немного другая проблема в том плане что

00:41:03

для того чтобы путешествовать между

00:41:05

страницами нам каждый раз необходимо

00:41:07

сделать такую неблагодарную работу в

00:41:10

адресной строке что-то вбивать и также

00:41:14

обратите внимание вот на эту иконку

00:41:15

перезагрузки страницы то есть сейчас я

00:41:18

нажму enter и видели как она поменяла

00:41:21

сейчас это означает что мы вышли из

00:41:26

режима single page приложение и каждый

00:41:28

раз обновляем страницу что не очень

00:41:30

круто хоть хочется все таки что когда мы

00:41:33

находимся на клиенте чтобы наше

00:41:35

приложение работало динамически и для

00:41:38

этого нам естественно нужно добавить

00:41:41

различные ссылки

00:41:42

давайте допустим попробуем с ними пойти

00:41:45

например в home пейдж то есть это наш

00:41:49

индекс . джесс файл мы добавим парочку

00:41:51

ссылок в параграфе допустим который

00:41:54

будет вести на адрес about

00:41:58

ну и пусть будет ссылка на страницу

00:42:01

posts

00:42:05

давайте сохраним не сохранилось

00:42:17

так и после перезагрузки страницы

00:42:19

все-таки браузер хаживал то есть мы

00:42:22

увидели изменения мы добавили наши

00:42:24

ссылки

00:42:26

допустим теперь если кликом на ссылку

00:42:29

about the конечно же переход случается

00:42:34

но мы никуда не избавились вот

00:42:37

перезагрузки страницы да то есть если

00:42:38

допустим мы сейчас перейдем на страницу

00:42:40

пост да вот смотрите на эту иконку

00:42:43

перезагрузки пост есть да она

00:42:45

прогружается все-таки и несмотря на то

00:42:47

что мы оказываемся на нужной странице

00:42:51

это не то поведение которое мы ожидаем

00:42:54

самом деле того чтобы в тексте корректно

00:42:59

использовать навигацию мы должны

00:43:01

воспользоваться специальным компонентом

00:43:02

который будет хорошо отрабатывать и на

00:43:05

сервере и на клиенте

00:43:06

то есть на сервере он будет правильно

00:43:08

генерить нужную ссылку а на клиенте он

00:43:10

соответственно будет отменять

00:43:12

дефолтное поведение ссылки и позволять

00:43:15

на xtu в динамическом режиме загружать

00:43:18

новую страницу значит для этого нам

00:43:21

необходимо импортировать объект

00:43:23

link is next слэш link и на самом деле

00:43:29

это просто react компонент который

00:43:31

позволит нам это осуществить дальше его

00:43:34

использование очень простое в том плане

00:43:36

что мы должны взять какую-нибудь ссылку

00:43:38

удалить не это шериф нам принципе это

00:43:41

больше не потребуется нам потребуется

00:43:44

именно вот так а

00:43:46

и его именно обернуть в компонент link

00:43:50

таким вот образом то же самое давайте

00:43:54

сделаем здесь единственное что здесь

00:43:56

открывающий так а здесь у нас будет

00:43:59

закрывающий так и дальше непосредственно

00:44:03

у компонента link это просто react

00:44:06

компонент мы можем передать параметр h 3

00:44:09

мы можем его обалдеть таким образом то

00:44:12

есть он нас должен вести на страницу

00:44:14

эбаут или здесь например указывать в

00:44:18

качестве строке так который будет вести

00:44:20

на страницу пост до в данном контексте

00:44:23

это одно и тоже

00:44:25

и если мы посмотрим то мы получили ровно

00:44:28

то же самое что и до этого более того

00:44:30

если мы проинспектируем по

00:44:31

здесь вообще нет никаких линков только

00:44:34

присутствуют так а до которой мы до

00:44:37

этого формировали

00:44:38

если мы посмотрим исходный код страницы

00:44:40

то где-нибудь здесь мы найдем обычные

00:44:43

ссылки на то есть на сервере не также

00:44:45

правильность генерировались но при этом

00:44:49

сейчас если я нажму на и bout to как

00:44:52

видите мы моментально получаем нужный

00:44:54

результат да то есть обращаем внимание на эту

00:44:56

иконку она у нас ни как не

00:44:59

взаимодействует то есть она как была

00:45:01

перезагрузить так и осталось это

00:45:03

означает что мы сейчас находимся в

00:45:05

режиме такое universe у applications do

00:45:09

когда мы динамически отображаем контент

00:45:12

очень хорошо

00:45:14

какие еще есть метод для того чтобы

00:45:16

делаете навигацию например программа

00:45:19

давайте это разберем допустим на

00:45:21

странице about да здесь пока нет

00:45:23

контента мы допустим захотим ее

00:45:25

поправить давайте всё вернём в

00:45:29

react фрагмент вы можете его

00:45:32

использовать таким образом либо же вы

00:45:35

можете использовать его так react .

00:45:37

фрагмент одно и то же единственное что

00:45:40

уже у для этого случая нам придется

00:45:42

импортировать react потому что он несет

00:45:44

в себе данный функционал react фрагмент он

00:45:50

создает нам просто пустую ноду

00:45:52

которая не будет почти маленьким самым и

00:45:54

меньше

00:45:55

нагружаем наш браузер и меньше создаем

00:45:59

бесполезных узлов и допустим у нас будет

00:46:02

ссылка а и давайте вообще и кнопка

00:46:04

сделаем чтобы отобразить именно вот

00:46:07

способ программы навигации и допустим

00:46:10

здесь я напишу gold bug духовно текст

00:46:16

часто использую английский язык хотя

00:46:18

вроде говорю на русском по нескольким

00:46:21

причинам первая причина

00:46:22

постоянно переключаться довольно-таки

00:46:24

сложно вторая причина здесь нет особого

00:46:26

смысла в использовании русского языка

00:46:28

чтобы не тратить время 3 причины то что

00:46:31

все равно так или иначе подавляющее

00:46:34

большинство технологии она использует

00:46:35

английский язык там тоже самый react

00:46:38

или остальные библиотеки фреймворке и

00:46:41

прочее поэтому качество разработчиков нам ну

00:46:44

просто по сути необходимо хотя бы

00:46:47

понимать на чтение что происходит в

00:46:50

английском языке и поэтому

00:46:51

дополнительная практика двое на касания

00:46:54

с английским это лишь только плюс да

00:46:56

поэтому вот по трем причинам я использую

00:46:58

английский но конечно первую очередь

00:47:01

что-то небольшая лично постоянно

00:47:02

переключаться соответственно как-то

00:47:07

кнопка поймет что нам необходимо

00:47:09

переходить на главную да потому что

00:47:11

сейчас есть мы на нее посмотрим то и

00:47:13

вообще здесь нет потому что опять тут

00:47:15

акаши росте нам нужно обновить

00:47:18

вот наша кнопка скорее всего она будет

00:47:21

выглядеть немного иначе у вас если у вас

00:47:22

снимок но тем ни менее значит в первую

00:47:26

очередь нам необходимо добавить для нее

00:47:28

обработчик события например тот же самый

00:47:31

onclick и естественно мы можем создавать

00:47:34

здесь допустим дополнительную функцию

00:47:36

например click the link клик хендлер

00:47:41

например дом у нас будет стрелочная

00:47:44

функция можно сюда передать либо мы

00:47:47

можем прямо онлайн написать добавлю

00:47:51

просто чтобы понимание да такую страшную

00:47:55

функцию и для того чтобы сделать

00:47:57

программу навигацию мы должны

00:47:58

импортировать следующий объект роутер из

00:48:02

только уже не реактор outer дом а next

00:48:05

слэш роутер и использовать данный класс

00:48:09

по сути он очень прост в использовании

00:48:11

то есть это объект у которого есть

00:48:14

различные методы например метод push

00:48:17

который позволяет нам перейти на

00:48:19

определенный юрл адрес ну данном случае

00:48:22

просто на flash давайте допустим

00:48:24

применяем ссылки чтобы не было

00:48:28

одинакового то есть здесь мы добавляем

00:48:30

также роутер push и на главную страницу

00:48:35

здесь допустим мы пойдем на страницу

00:48:36

постов то есть придем на пост

00:48:42

tak goo тулу

00:48:48

пост сохраняю вот мы получаем две кнопки

00:48:52

нажимаю да и мы снова оказываемся на

00:48:54

главной странице или на странице постов

00:48:57

что довольно таки круто как видите у нас

00:48:59

работает теперь программной навигация с

00:49:02

этим мы можем взаимодействовать

00:49:03

что еще уметь делать next но на самом

00:49:06

деле мы только начали с ним знакомиться

00:49:07

много чего умеет делать но следующая я

00:49:10

хочу показать

00:49:11

допустим что касается seo оптимизации

00:49:14

это работа с мета тегами например снегом

00:49:16

тайтл потому что то что мы видим сейчас

00:49:19

это просто вопрос 3000 и любой уважающий

00:49:22

себя робот если зайдет на такую страницу

00:49:25

он естественно не будет ее ранжировать

00:49:27

да поэтому нам нужно явно указать а что

00:49:29

вообще здесь происходит здесь

00:49:31

относительная проблемка в том плане что

00:49:33

у нас нет никакого и чтения и возникает

00:49:36

вопрос как нам редактировать теги ход

00:49:40

потому что у нас есть только страницы

00:49:44

давайте это рассмотрим на примере

00:49:46

главной странице для этого есть опять же

00:49:48

несколько вариантов то есть вот наша

00:49:52

главная страница индекс джесс здесь в

00:49:57

первую очередь я немного за его

00:49:58

форматирование чтобы было понятно что

00:50:00

происходит но просто возьму группы наш

00:50:02

же секс

00:50:08

вот этот контент он относится

00:50:10

непосредственно к тайгу body

00:50:13

да то есть он раскладывается в той базе

00:50:16

но в next присутствует и другой

00:50:18

компонент который можем импортировать

00:50:19

который называется head

00:50:21

и вы удивитесь но он импортируется из

00:50:24

next хит

00:50:27

данный компонент он является react

00:50:29

компонентом мы можем использовать как

00:50:31

нашей душе угодно то есть мы просто его

00:50:34

открываем в произвольном месте но обычно

00:50:37

это где-то наверху компонента и здесь мы

00:50:40

можем указывать кастомные то есть те

00:50:44

которые мы захотим теги

00:50:45

метод эти характерные для данной

00:50:48

странице ну например так toi tu чем бы

00:50:52

нет здесь допустим ему написать текст

00:50:55

сайта яндекс

00:50:57

хэллоу но вы сами можете придумать что

00:51:00

здесь написать этим я хочу подчеркнуть

00:51:02

что мы можем так вот свободно менять то

00:51:05

это у до данной страницы либо же по

00:51:09

аналогиям мы можем пойти допустим на

00:51:11

страницу постов тут как видите контента

00:51:14

пока не очень много мы это быстро

00:51:16

исправим давайте также возьмем фрагмент

00:51:25

и вставим сюда хет не забывайте его

00:51:28

импортировать в шторм это делает за меня

00:51:29

здесь мы напишем допустим это более

00:51:32

внятное пост space next

00:51:35

курс давайте посмотрим работает ли это

00:51:41

переходим на посты и как видите той тут

00:51:44

также динамически меняется и более того

00:51:46

если я в мою страницу и посмотрю код то

00:51:49

где-то здесь она вот он есть тайтл

00:51:52

до присутствует нужный нам тайну который

00:51:55

мы как раз таки показываем роботом

00:52:00

естественно в данном других от мы можем

00:52:03

использовать любые мета тэги которые

00:52:04

захотим то есть например для seo

00:52:06

оптимизации нам важны keywords и

00:52:08

description честно говоря не помню как

00:52:11

они записываются поэтому шум meta

00:52:13

keywords и наверняка кто-то мне быстро

00:52:16

подскажет куда собственно вот он так

00:52:22

метра давайте перейдем в допустим

00:52:25

главную страницу

00:52:26

мы можем свободно добавлять ну и здесь

00:52:30

какие-то ключевые слова скажем next

00:52:34

java script next джесс и акт и так далее

00:52:41

то же самое можно делать с description

00:52:45

description

00:52:46

опустим тэсс из youtube tutorial for

00:52:56

next

00:52:57

и так далее да мы можем указывать

00:53:00

допустим не только

00:53:03

meta keywords и description ну например

00:53:05

и кодировку по моему charset называется

00:53:12

это дело очень давно steam не работал до

00:53:16

meta keywords charset

00:53:18

обычно utf-8 ставится как более

00:53:20

универсальный и собственно говоря мы

00:53:23

также можем это указать то есть и в

00:53:25

данном случае мы это указываем

00:53:28

непосредственно для конкретно этой

00:53:30

странице здесь напишем charset

00:53:33

и как там было

00:53:37

можно просто скопировать только для

00:53:43

react а необходимо чтобы мы вот его

00:53:45

здесь закрывали

00:53:46

давайте проверим что у нас татр andreas

00:53:48

значит вот наша главная страница

00:53:52

посмотрим код вот так хоть тут какие-то

00:53:57

стили до которых мы доберемся чуть позже

00:54:00

viewport вот и наш charset utf-8 той the

00:54:04

keywords и description и так далее да

00:54:08

если мы перейдем на страницу допустим

00:54:10

about посмотрим код так складка не нужно

00:54:18

не то нажал мы видим что этих а

00:54:22

метатегов у нас больше нет то есть их мы

00:54:24

добавляли только для страницы

00:54:28

индекс при этом естественно у вас есть

00:54:31

возможность добавлять универсальные мета

00:54:35

теги для каждой страницы мы сейчас этим

00:54:39

разберемся на примере создания layout of

00:54:41

единственное что я в консоль обнаружил

00:54:44

небольшой морнинг когда действительно

00:54:47

charset

00:54:48

вписывается в реактор таким образом это

00:54:50

g секс не совсем react

00:54:52

да для того чтобы он просто понимал о

00:54:55

чем идет речь

00:54:56

многие что касается way out of что это

00:55:00

вообще такое да это специальные

00:55:02

компоненты в

00:55:03

react хотя на самом деле это концепт он

00:55:06

относится не только к реактору в

00:55:09

принципе для в приложений да не только в

00:55:12

приложении да и по сути это просто

00:55:13

некоторая структура которая позволяет

00:55:15

объединять и канта структурировать ваши

00:55:17

страницы в

00:55:19

react и конкретно в nx тела я у то

00:55:23

создаются крайне просто то есть я выхожу

00:55:25

на главный уровень на верхний уровень

00:55:27

приложения и здесь создаю какую-нибудь

00:55:30

новую папку которым зову например как я

00:55:32

захочу

00:55:33

например могу назвать его компонент

00:55:35

компании

00:55:39

либо я могу назвать это layout то есть

00:55:42

это абсолютно не принципиально для никто

00:55:45

принципиально чтобы папка пейдж была

00:55:46

названа пейджер остальное не имеет

00:55:48

значения пока что и в компонентах

00:55:52

например я могу создать новый

00:55:53

react компонент который назову main

00:55:56

пример layout .

00:55:58

джесс это у нас будет функция

00:56:03

я могу ее по дефолту экспортировать могу

00:56:06

экспортировать просто именован им

00:56:08

образом я люблю больше именованные

00:56:10

экспорт и поэтому здесь и буду из

00:56:12

портировать просто функцию main layout

00:56:14

дефолтный экспорт был важен именно вот

00:56:17

для опять же пейджер потому что их

00:56:20

сочитывает

00:56:21

next для того чтобы создать вы я вот

00:56:25

здесь я просто верну некоторые g секс и

00:56:28

давайте все верну в

00:56:31

фрагмент дальше могу придумать

00:56:35

какой-нибудь действительно интересное

00:56:37

layout для нашего приложения например у

00:56:39

нас будет секция навигация и дальше

00:56:42

например в секции main мы будем

00:56:45

показывать непосредственно контент уже

00:56:46

нужной странице как это сделать мы будем

00:56:49

выводить параметр просто чудра как там

00:56:54

получите утром в рио компоненте очень

00:56:56

просто у нас есть props откуда мы

00:56:58

забираем наши читали таким образом пойти

00:57:02

пока в навигации я напишу h1

00:57:04

navi ваш новейший

00:57:09

теперь этот layout использовать крайне

00:57:12

просто так как допустим для главной

00:57:14

странице мы хотим его применить и здесь

00:57:17

мы вместо нашего пустого фрагмента

00:57:19

используемый лайалл то есть мы

00:57:21

оборачиваем данную страницу way out

00:57:22

и давайте посмотрим что нам это дало а

00:57:26

дало нам это то что у нас теперь есть

00:57:28

блог навигация да и сути контент самой

00:57:32

страницы при этом на странице эбаут как

00:57:34

видите у нас нет никакого лейаута но мы

00:57:37

тоже можем это исправить если захотим

00:57:41

здесь вместо react фрагмента будем

00:57:45

использовать наш компонент моему я вот и

00:57:47

давайте тоже самое сделаем для постов

00:57:50

здесь также мы добавим моей out

00:57:52

естественно не забывайте это все дело

00:57:54

импортировать и для отдельного поста

00:57:57

также у нас будет the main layout знать

00:58:05

это все мы сгруппируем отформатируем

00:58:11

теперь очень красиво то есть теперь для

00:58:14

некоторых наших страниц мы получаем этот

00:58:16

вот общины гейшу который как бы и

00:58:20

является лайалл там если мы посмотрим на

00:58:22

структуру приложение в элементах то мы

00:58:27

увидим вот он main нам и так далее как

00:58:32

превратить вот допустим это видишь вы

00:58:35

что то более менее человеческая то мы

00:58:38

конечно же можем это сделать

00:58:39

непосредственно в нашем loyalty

00:58:42

давайте допустим здесь мы скажем будем

00:58:46

выводить просто набор ссылок

00:58:50

то есть мы уже будем пользоваться

00:58:52

компонентом link

00:58:54

давайте мы его импортируем и знак

00:58:56

сталинка

00:58:57

и здесь у нас будет ссылка допустим на

00:59:00

главную страницу

00:59:03

допустим страницу about и допустим на

00:59:06

страницу posts

00:59:08

здесь мы укажем а шериф который бы tasty

00:59:11

на главную страницу

00:59:12

здесь у нас будет аж лев который бы

00:59:14

tasty на страницу эбаут и то же самое со

00:59:17

страницы постов так теперь если мы

00:59:24

посмотрим то вот наши потрясающие ссылки

00:59:26

и теперь видеть гулять по нашему

00:59:28

приложению с того куда более приятные

00:59:29

комфортно единственное что со стилем

00:59:32

неси конечно полная беда потому что

00:59:34

здесь голову html

00:59:35

но в тексте опять же это очень легко

00:59:39

решается

00:59:40

если мы допустим хотим за стилизовать

00:59:42

данную навигацию то мы можем прямо вот

00:59:45

же сексе

00:59:46

добавить атрибут у нас учета компонент

00:59:50

доставил где мы укажем один атрибут g секс для

00:59:54

того чтобы сказать react у что сейчас мы

00:59:57

будем писать вообще в из x парвати

00:59:59

некоторые стиля

01:00:01

это не очень просто то есть мы здесь

01:00:03

учитывая что в сексе ставим фигурные

01:00:05

скобочки и дальше же ставим обратные

01:00:08

кавычки для того чтобы писать здесь

01:00:09

какой-то код ну и дальше мы просто в

01:00:13

строковом формате описываем себя со

01:00:15

стиля давайте допустим

01:00:18

что-нибудь затем наш навигация скажем

01:00:21

позиция fix

01:00:24

допустим х и у него будет 60 пикселей

01:00:29

лифт 0 райт 0 единственный конечно минус

01:00:36

у данного подхода в том что нет и мяты

01:00:38

или авто completo

01:00:39

а вот тем не менее я сейчас планируем

01:00:42

показать разные способы работы со

01:00:44

стилями поэтому стоит немного потерпеть

01:00:47

значит hit me so oft за для вы-то здесь

01:00:52

не нужен давайте допустим кого-нибудь бы

01:00:54

grown зададим background пусть будет

01:01:01

какой-нибудь dark bull

01:01:04

свет бесполезно задавать потому что мы

01:01:07

находимся в ссылках давайте здесь также

01:01:10

укажем параметр топ 0 чтобы навсегда бы

01:01:12

он ирригации наверху давайте проверим

01:01:15

вот уже но относительно неплохая

01:01:17

навигация давайте сразу сдадим ссылкам

01:01:21

необходимые цвета нафан коллаж белый

01:01:28

цвет да уже намного лучше и теперь

01:01:31

соответственно мы можем их выровнить как

01:01:35

мы хотим с помощью дисплей flex же steve

01:01:43

vai

01:01:47

контент здесь не центра давайте добавим

01:01:54

space раунд например и и соответственно

01:02:00

line айда мтс центр для того чтобы

01:02:05

выровнять все это дело по вертикали и на

01:02:07

выходе мы получаем вот такой вот класс

01:02:09

унификацию которое выйдет уже как кровь

01:02:12

почти работающая

01:02:13

давайте уберем здесь так decoration

01:02:16

только это мы уберем для непосредственно

01:02:19

наших ссылок decoration нам сохраним да

01:02:28

мне так много больше нравится

01:02:30

единственное что сейчас видите как

01:02:32

преподают у нас наш заголовок потому что

01:02:34

если мы посмотрим на мейн то начинается

01:02:36

непосредственно вот отсюда до где

01:02:38

находится наш навигации поэтому для тега

01:02:42

main мы можем добавить стиль например

01:02:46

марджан

01:02:49

топ который равняется 60 пикселям как

01:02:52

раз ровняю щиеся высоте данной навигация

01:02:56

вот и на выходе мы получаем вот уже

01:02:58

что-то более-менее внятное более того мы

01:03:01

можем добавить внутренние отступы

01:03:02

padding 1 м да и вот наши совсем

01:03:07

красивые приложению получается то есть

01:03:10

как видите навигация у нас одна теперь

01:03:12

дамы более того можем вынести и даже в

01:03:14

отдельный компонент если захотим и при

01:03:16

этом мы гуляем по нашему приложению где

01:03:19

все динамические

01:03:20

отрисовывается но мы-то уже знаем что

01:03:22

робот а теперь понимают что за контент у

01:03:24

нас тут есть теперь если говорить

01:03:27

немного простили то если мы посмотрим на

01:03:30

нашу навигацию как вообще все эти стили

01:03:32

применились то мы увидим что у нее есть

01:03:35

интересный класс gsx и дальше

01:03:38

сгенерированной айди если мы посмотрим

01:03:42

на этот айтишник то как раз таки

01:03:44

во-первых мы видим много чего полезного

01:03:45

например of the prefix и которые нам 2

01:03:48

лет next да по умолчанию хотя мы сами не

01:03:51

писали плюс это локализирован и исчез и

01:03:54

в стиле то есть они являются не

01:03:55

глобальными потому что мы как бы создаем

01:03:58

с уникальным и геем и они применяются

01:04:00

только внутри данного компонента то есть

01:04:02

вы можете не переживать за то что вы

01:04:05

используете здесь например так на что

01:04:10

где-то эти стили применится в другом

01:04:12

месте приложения потому что они будут

01:04:15

работать только в рамках данного

01:04:16

компонента как этого избавиться если вы

01:04:19

вдруг хотите писать глобальные стиля

01:04:20

мы добавляем еще один атрибут global и в

01:04:26

таком случае при обновлении страницы

01:04:31

несмотря на то что мы здесь добавляем

01:04:33

вот этот вот класс видите в css мы уже

01:04:36

добавляем этот глобальный стиль да вот у

01:04:39

нас наш просто если мы уберем globo

01:04:44

отсюда

01:04:49

зато теперь у нас идет он уже по классу

01:04:52

до что делать его локальным теперь из

01:04:55

плюсов например лейаута

01:04:58

в том что мы можем только здесь например

01:05:01

описать секцию head на давайте

01:05:05

импортируем heads хода и например мы

01:05:07

будем задавать также атрибут тайтл но

01:05:10

данный тайну мы будем понимать как

01:05:11

параметр и допустим помочь они им будет

01:05:14

равняться например next up

01:05:19

если мы вдруг его не передаем здесь мы

01:05:22

будем указывать toi tu

01:05:25

ну и строчку например next курс да то

01:05:31

есть здесь я не делаю никакой магии

01:05:33

просто обычный react g секс

01:05:35

да и теперь например у нас вот это вот

01:05:39

все мы тоже можем перенести в main

01:05:42

layout чтобы да не писать для каждой

01:05:44

странице по своему теперь у нас нет

01:05:48

смысла указывать head на каждой странице

01:05:51

мы можем просто например параметр

01:05:53

поэтому передавать в нашла я вот

01:05:55

например он печь здесь например мы можем

01:06:01

питать параметр той то

01:06:03

vaude space давайте сохраним и вот мы

01:06:10

получаем красивый то эту home page да

01:06:11

потому что мы находимся на главной

01:06:12

странице

01:06:13

переходим на about about пейдж ну и плюс

01:06:16

вот такой индекс курсу что на мой взгляд

01:06:19

наше приложение делают более солидно на

01:06:21

вид да пусть теперь можем гулять здесь

01:06:24

теперь я хочу показать как мы можем

01:06:27

подключать

01:06:28

сторонние скрипты или например css

01:06:30

библиотеки для этого давайте подключим

01:06:34

google phones мы или просто фанты

01:06:38

которые разберутся фонд google.com

01:06:41

допустим я хочу работа по классике

01:06:45

например вот пусть будет регулярный 400

01:06:49

select list фонд

01:06:53

по этот embed и допустим я хочу все это

01:06:57

сделать с помощью тега link само собой

01:07:01

мы это можем сделать непосредственно в

01:07:03

нашем loyalty но есть более удобный для

01:07:06

этого места которые давайте разберём для

01:07:09

этого я сразу перейду в документацию

01:07:11

next и сделаю есть поиск по вот такую

01:07:14

интересная конструкция нижнее

01:07:16

подчеркивание

01:07:17

документ кастом документ и здесь мы

01:07:24

можем почитать обще что это такое что

01:07:27

это специальный компонент в тексте

01:07:31

который позволяет нам переосмыслить или

01:07:33

переделать под себя структуру и чти м.л.

01:07:36

шаблон надо который как раз таки мы не

01:07:38

имели до этого доступа теперь мы можем с

01:07:40

этим взаимодействовать на самом деле

01:07:42

чтобы не писать много кода то я просто

01:07:45

скопирую то что есть на сайте дальше

01:07:49

перейду в папку patches это важно и

01:07:51

здесь я создаю специальный файл нижнее

01:07:54

подчеркивание документ .

01:07:57

джесс и вставляю сюда то что есть значит

01:08:01

давайте избавимся от всего лишнего то

01:08:03

есть нам не нужны никакие пока пропсы

01:08:06

здесь мы создаем допустим класс мой

01:08:09

документ можно его отдельно не

01:08:11

экспортировать а сразу же здесь написать

01:08:13

экспорт default класс им в методе рендер

01:08:19

да то есть мы наследуем ся от документа

01:08:21

а документ это как раз таки компонент

01:08:23

который идет на нас у next document

01:08:25

в методе рендер мы возвращаем обычный

01:08:28

gsx который состоит из следующих

01:08:30

компонентов это html и знак 100 head мы

01:08:34

уже его прошли

01:08:35

main который мы вставляем базе и next

01:08:39

скрипт то есть это те к скрипты которые

01:08:41

позволяют на xtu работать то есть у нас

01:08:45

есть базовая структура html шаблона

01:08:47

давайте мы немного расширим хоть до мы

01:08:51

можем так как бы класть то что нам нужно

01:08:54

дальше мы видим body то что в пати у нас

01:08:57

ждет main это как раз таки наши

01:08:59

компоненты которые в пиджак layout и и

01:09:01

так далее ну и next скрипт это то что

01:09:05

позволяет на xp

01:09:06

работать теперь суть в том что мы можем

01:09:09

добавлять еще более общие вещи для

01:09:12

нашего приложения то есть если до этого

01:09:15

мы работали в рамках layout а то сейчас

01:09:17

мы работаем уже в рамках всего

01:09:19

приложения а я вот как вы понимаете

01:09:21

может быть совершенно разные характерный

01:09:24

пример это например

01:09:26

админка и главная часть сайта на то есть

01:09:29

они обычно по-другому по-разному

01:09:30

выглядят

01:09:31

теперь я копирую ринг просто вставляю

01:09:34

вую секцию head для того чтобы это

01:09:37

работало мы должны учесть

01:09:39

правило gsx и закрыть наш так давайте

01:09:44

сохраним прием в браузер отдай им

01:09:47

страниц ничего пока не изменилось почему

01:09:49

потому что хоть мы и стилей и

01:09:51

импортировали

01:09:52

на мы наверняка сможем их найти в секции

01:09:54

хит есть хорошо поищем

01:10:09

так еще раз вот они появляются в sex их

01:10:12

это не подключено

01:10:13

при этом мы не как их еще не обозначили

01:10:16

как нам задать глобальный стиль который

01:10:19

будет применяться для всего приложения

01:10:21

для этого есть разные способы но еще

01:10:24

один способ я покажу со специальным

01:10:26

компонентом который называется нижнее

01:10:28

подчеркивание об кастом об тоже этим

01:10:31

тоже можете прочесть что есть вообще

01:10:32

происходит но например это глобальный

01:10:36

компонент отвечающий за все наше

01:10:38

приложение да и здесь мы можем делать

01:10:41

такие вещи например как от ловко

01:10:42

кастомных ошибках с помощью хука

01:10:45

компоненты ткач добавлять дополнительную

01:10:49

данные для наших страниц или добавлять

01:10:52

глобальный css довольно-таки полезная

01:10:55

вещь мы с ней чуть чуть позже поработаем

01:10:56

давайте пока посмотрим базовые и

01:10:59

применение

01:11:00

мы создаем файл нижнее подчеркивание об

01:11:03

. джесс

01:11:04

значит и по сути это по-моему просто

01:11:07

может быть функция да обычная который мы

01:11:10

должны по дефолту экспортировать экспорт

01:11:14

нет div почему-то

01:11:19

шторм у меня не хочет полно очень и

01:11:21

нормальная вещь делать экспорте фанкшн

01:11:24

системой об и данная функция данный

01:11:29

компонент как параметр будет принимать

01:11:32

себя компонент то есть тот компонент

01:11:35

или на самом деле та страница которую мы

01:11:37

отображаем зависимости от адреса и мы

01:11:41

параметр печь

01:11:42

props кстати сейчас я покажу откуда он

01:11:45

очень берется и по умолчанию мы здесь

01:11:48

возвращаем на самом деле ту структуру

01:11:50

которую захотим но для того чтобы все

01:11:54

работало мы из параметра компонент

01:11:57

делаем джесс x-компонент не в него

01:12:02

просто передаем все ph проб суда потому

01:12:04

что они могут быть разные я по сути

01:12:07

просто взял повторю то что написано

01:12:09

здесь значит не то я сохраняю но если мы

01:12:13

сохраним это в в шторме так и обновим

01:12:18

страницу то мы увидим что ничего не

01:12:20

изменилось

01:12:21

теперь прелесть заключается в том что мы

01:12:24

можем здесь допустим добавить глобальные

01:12:27

стиле как указано в документация глобусе

01:12:30

с с принципе увидеть что самые обычные

01:12:38

пример с использованием css мы можем

01:12:42

добавить style джесс x и допустим для

01:12:46

тега body я только не так да здесь мы

01:12:51

должны начали указать что мы работаем с

01:12:56

же сексом то есть указываем фигурные

01:12:58

скобки потом кавычки потом указываем

01:13:01

body

01:13:02

ну и здесь уже описываем нужны нам стиле

01:13:04

которые можем взять с сайта google

01:13:10

сохраним 1 устранить все видим что стиле

01:13:15

не применились по той причине что нам

01:13:17

необходимо сделать эти стили глобальными

01:13:20

краски здесь это все используется global

01:13:23

так если мы посмотрим сейчас в браузере

01:13:26

то вот мы получаем уже новые шрифты то

01:13:30

есть мы добавили какой-то глобальный

01:13:31

стиль для нашего оппа ну и как видите

01:13:33

здесь более приятные его отображения

01:13:37

где-то можем здесь найти что у нас

01:13:40

применяется работа кстати если говорить

01:13:44

про стиль это естественно как указано

01:13:46

также на официальном сайте мы можем не

01:13:48

только их в онлайне описывались например

01:13:51

в компоненте об мы можем их

01:13:56

импортировать как из какие-то css файлов

01:14:00

данный пример мы можем создать отдельную

01:14:04

папку для css в корне в приложении

01:14:07

например styles ну и например здесь я

01:14:10

создам файл скажу main .

01:14:13

css здесь я пишу те же самые стиле то

01:14:18

есть базе и font-family работа или

01:14:21

sans-serif

01:14:22

да и соответственно в об вместо того

01:14:25

чтобы добавлять онлайн стиля я могу

01:14:27

просто взять и импортировать нужный мне

01:14:30

css импорт

01:14:31

значит выхожу на верхний уровень стайлз

01:14:34

и например main css да и это будет одно

01:14:37

и то же обновляю страницу вот наши стили

01:14:41

применились сейчас я вам покажу еще один

01:14:44

способ работать со стилями

01:14:46

но давайте для этого мы разберем еще

01:14:48

одну интересную фишку когда мы можем

01:14:50

создавать кастомную страницу ошибка 404

01:14:54

ошибки и

01:14:55

в миксте это делается супер просто

01:14:58

в папке пейзаж мы просто создаем файл

01:15:01

404 .

01:15:03

джесс ну а перед тем как мы ее создадим

01:15:05

давайте допустим введем какой-нибудь

01:15:06

несуществующий адрес например about 1 2

01:15:11

3 так видите вот наша костаная страница

01:15:15

и пока что здесь нет никакого контента

01:15:18

но если мы создаем 404 . джесс

01:15:23

экспортируем по дефолту функцию которая

01:15:27

называется

01:15:29

пейдж да это у нас функциональный

01:15:32

компонент и вернуть здесь какой-нибудь

01:15:35

react шаблон например h1 р-р 404 и

01:15:45

давайте мы проведем пользователь теперь

01:15:48

на главную страницу стать прогрев феном

01:15:49

мы напишем lets go back to say fte

01:16:01

и давайте мы сделаем гол бег ссылкой то

01:16:07

есть мы превратим это все в компонент

01:16:10

линк и не забываем что нам нужно все это

01:16:16

обернуть вот так а давайте добавим

01:16:24

атрибута шрифт допустим он будет вести

01:16:26

на адрес на главную страницу почему нет

01:16:29

сохраняем обновляем страницу и у нас

01:16:32

есть какая-то здесь ошибка давайте

01:16:37

подумаем почему тут на описывают что-то

01:16:41

непосредственно next

01:16:43

а ленка знал define ну логично

01:16:46

нам же необходимо его импортировать так

01:16:49

как откуда он знает что такое link я уже

01:16:51

просто привык авто импорту и иногда могу

01:16:54

подзабыть обновляем страницу и вот мы

01:16:57

получаем нашу кастомную страницу да то

01:16:59

есть мы можем перейти обратно на главную

01:17:01

и как видите все это работает допустим

01:17:06

если перейду опять на несуществующую

01:17:07

страницу мы кстати можем это сделать и

01:17:11

через layout если захотим например да то

01:17:14

есть не просто gsx пустой можем layout

01:17:17

использовать и так не там естественно

01:17:22

здесь получаем уже полную навигацию

01:17:26

данную плюс сообщение об ошибке

01:17:27

но опять же выглядит на пока не очень

01:17:30

красиво и давайте посмотрим на то как

01:17:33

работаю с с модули теперь в данном

01:17:35

случае мы разобрались как работают

01:17:37

глобальные стиля на которую мы

01:17:40

импортируем и вот те стили которые мы

01:17:43

уже описали здесь main css да они

01:17:45

применяются в глобальной область

01:17:47

видимости если мы хотим допустим задать

01:17:52

какие-то стили только для страницы 404

01:17:56

при этом мы не хотим использовать онлайн

01:18:00

стиле что она достаточно создать

01:18:01

допустим отдельный файл css который

01:18:03

назвать

01:18:05

rh дальше .

01:18:09

модуль это очень важно . css

01:18:13

и учитывая что мы создали данный файл с

01:18:15

префиксом мадрид то здесь мы

01:18:16

соответственно можем писать кит

01:18:18

локализирован и и стили для нужного нам

01:18:20

модуля ну например нам нужно как-то

01:18:25

стилизовать заголовок h1 допустим в

01:18:27

красный цвет

01:18:28

да давайте мы назовем его допустим класс

01:18:31

р.р. и пусть в нем будет color red или

01:18:38

давайте назовем его лучше dark red

01:18:41

теперь в

01:18:42

страница 404 мы можем импортировать

01:18:47

какой-нибудь объект его назову например

01:18:49

класса который я заберу из папки стайлз и из

01:18:53

р-р модулю css и теперь у объекта класса

01:18:57

мы можем как раз таки забирать

01:18:59

необходимые нам класса

01:19:01

скажем в атрибут классным класса .

01:19:04

р да то есть . он берется как раз таки

01:19:08

из css а давайте сохраним и вот мы

01:19:13

получаем ну не самую красивую значит эра

01:19:15

страницу все таки мне кажется что проще

01:19:17

здесь просто красный цвет использовать

01:19:19

его очень здесь красную страницу но при

01:19:23

этом если мы ее проинспектируем то

01:19:25

учитывая что это модуль помимо

01:19:27

непосредственно на звание самого класса

01:19:30

к нему также добавляется еще и хэши

01:19:32

название модуля

01:19:33

а это означает что данный стиль он также

01:19:36

будет локализирован эй но при этом как

01:19:38

видите это все уже работает из коробки

01:19:40

то есть нам даже ничего не пришлось для

01:19:42

этого делать отлично также я хочу еще

01:19:48

показать вам что next

01:19:50

очень просто позволяет работать с при

01:19:52

процессоре например с процессором счас и

01:19:56

для того чтобы он нам у нас работал нам

01:19:59

достаточно просто установить

01:20:01

счас и дальше переименовать стиля либо в

01:20:08

. и css либо . в . счас давайте

01:20:12

продемонстрирую то есть мы просто

01:20:14

устанавливаем дополнительный пакет если

01:20:17

вы хотите работать со стайлсом например

01:20:19

или с лесом так видите здесь также есть

01:20:22

дополнительные пакеты

01:20:24

например next nest next стайлз и как их

01:20:28

вообще использовать

01:20:29

да но при этом мы не больше нравится с с

01:20:33

мы просто установить здесь счас для

01:20:38

данного проекта и дальше мы можем

01:20:39

переименовать

01:20:41

наши файлы допустим в сс-4 фактор при

01:20:50

ней css давайте проверим что тут у нас

01:20:54

поменялся импорт да . с css и

01:20:57

соответственно мы еще в api импортируем

01:21:01

. и css да мы можем проверить что это

01:21:04

действительно у нас счас если допустим

01:21:07

создадим переменную скажем color red

01:21:12

то есть мы будем использовать переменную

01:21:14

color давайте запустим командуем прям

01:21:17

рандов

01:21:28

да как видите у нас все работает успешно

01:21:31

то есть сесть или применяются теперь

01:21:36

давайте поговорим про

01:21:37

ещё более интересные концепты которые

01:21:40

есть в next и которые позволяют работать

01:21:42

с данными по той причине что сейчас мы

01:21:45

работаем исключительно со статикой мы в

01:21:47

принципе разобрались как это все

01:21:49

взаимодействует код работает как стиле

01:21:51

за vaio странице как их организовывать

01:21:57

почему-то я пытаюсь перейти на пост у

01:22:00

меня не переходит по какой причине это

01:22:02

происходит

01:22:09

перешел и давайте мы как раз таки

01:22:13

разберем следующий функционал на примере

01:22:15

страницы пост space но для этого нам

01:22:19

придется сделать некоторые манипуляции в

01:22:22

наш проект для того чтобы искусственно

01:22:25

создать backend нас которого мы сможем

01:22:28

забирать данные то есть создать

01:22:29

некоторый теперь есть классный пакет

01:22:33

который называется джейсон сервер от

01:22:40

репозитория type code и по сути этот

01:22:45

пакет довольно таки интересен тем что он

01:22:47

позволяет нам создавать

01:22:50

фейковые rest api причем с нулевым

01:22:54

количеством кодинга до меньше чем там за

01:22:56

30 секунд на самом деле действительно

01:22:58

крутой пакет который позволит нам

01:23:01

создать backend для прототипирования и 5

01:23:06

для начала нам необходимо установить

01:23:09

данный пакет то есть это м пьян

01:23:10

in 100 минус g джейсон сервер и учитывая

01:23:16

что я нахожусь на mac os то здесь мне

01:23:18

необходимо написать

01:23:19

суду дальше пишем пароль устанавливаем

01:23:22

пакет в глобальную область видимости

01:23:25

давайте дальше посмотрим на его

01:23:27

документацию то есть на самом деле и вот

01:23:30

как раз таки есть способ его установки и

01:23:32

дальше мы можем создать допустим файл

01:23:35

деби . джейсон то есть наша

01:23:37

импровизированная база данных

01:23:38

который действительно будет являться

01:23:40

локальной базы

01:23:42

создам ее в корне проекта зову и деби .

01:23:45

джейсон и давайте здесь я организую

01:23:48

какой-то объект у которую будет ключ

01:23:51

пост у нас будет массив состоящий из

01:23:55

некоторых элементов которых будет еде

01:23:58

допустим 1 все должны обращать кавычки

01:24:03

тайтон например давайте просто будет

01:24:10

java script пост допустим будет параметр

01:24:15

базе

01:24:17

тоже какой-нибудь текст очень скопирую

01:24:21

пример lorem ipsum тут наверняка даже

01:24:26

будет русский текст вот такой не будь

01:24:30

такой длины

01:24:32

мы просто пока заполняем контентом даёшь

01:24:36

принципе на смысловая нагрузка здесь не

01:24:39

так важно давайте рад что написано на

01:24:42

русском языке тоже написано на русском

01:24:44

пусть им пост о здоровье здесь у нас

01:24:48

будет соединить мир 2

01:24:51

значит и здесь напишем пост про java

01:24:58

script конечно же не знаю что вы

01:25:00

подумали и давайте будет на всякий

01:25:02

случай еще куни третий пост про отдых

01:25:07

отлично у нас теперь есть три поста в

01:25:10

нашей базе данных то есть пока что тут

01:25:14

нужно удалить запятую лишние у них

01:25:17

одинаковый текст мы естественно можем это заменить общем

01:25:20

давайте сделаем почему и нет просто

01:25:24

чтобы был уже удобнее с этим работать

01:25:28

такой текст и и например какой нибудь по

01:25:31

длине

01:25:41

теперь значит нашу базу данных мы

01:25:44

подготовили далее нам необходимо указать

01:25:49

чтобы вообще это джейсон сервер

01:25:51

правильно считываю эту базу данных для

01:25:53

этого в

01:25:56

джейсон точнее джейсон сервере да мы

01:26:00

можем увидеть команду которая позволяет

01:26:02

организовать вообще запуск данного

01:26:04

проекта джейсон сервер параметр минус в

01:26:07

и название файла давайте мы сразу же

01:26:10

добавим npm скрипт допустим я назову его мог

01:26:14

потому что это мог выпьем если буду

01:26:18

обращаться к глисон серверу и укажу

01:26:23

следующий параметр то есть минус в у нас

01:26:25

будет равняться тебе .

01:26:27

джейсон дальше давайте укажу порт пустим

01:26:33

4200 и параметр минус d укажу здесь

01:26:36

допустим 450 миллисекунд это у нас дела

01:26:40

и то есть задержка для того чтобы нам

01:26:42

чуть проще было понимать что вообще

01:26:45

происходит чтобы он нам не моментально

01:26:46

отвечал

01:26:47

если вы спросите про параметры откуда

01:26:50

про них знают а если вы ниже опуститесь

01:26:52

то здесь присутствуют вот такие вот

01:26:56

опции до которые говорят что минус п

01:26:58

этот порт минус в это watch и минус да

01:27:02

это дело и в миллисекундах то есть мы в

01:27:05

принципе все подготовили и от наиболее

01:27:07

простой способ

01:27:08

запуске запуска джейсон сервера

01:27:12

соответственно если мы напишем npm ран

01:27:14

мог запускается джейсон сервер на парту

01:27:19

4200 да мы можем у него перейти

01:27:22

о колхоз 4200 как видите тут ничего нет

01:27:27

но при этом если мы перейдем на пост то

01:27:30

вот как раз таки наши посты в формате

01:27:33

джейсон на потому что этот road

01:27:36

откликается также на название внутри

01:27:38

деби . джейсон то есть мы с этим будем

01:27:41

работать сейчас и будем пробовать их

01:27:44

вставлять в наш ей давайте все туда по

01:27:48

закрываюсь здесь

01:27:50

значит перейду в упи джаз и конечно же

01:27:54

мы будем работать с компонентом пост .

01:27:56

джесс как мы делаем запрос в react

01:28:00

приложениях для этого нам необходимо

01:28:03

импортировать

01:28:04

некоторые хуки особенно да если мы

01:28:06

работаем с функциональными компонентами

01:28:09

конкретно это юз стоит юз эффект пока

01:28:15

этого хватит давайте создадим базовый

01:28:20

стоит то есть то у нас будет you state

01:28:24

вначале по пустому массиву да потому что

01:28:27

по умолчанию массив пост будет пустой и

01:28:29

функция setpos она также получается из

01:28:34

данного кортежа

01:28:36

дальние давайте добавим простой список

01:28:40

цель и да перед этим естественно мы

01:28:45

должны загрузить эти посты то есть мы

01:28:46

используем ей эффект

01:28:47

сюда мы хотим callback 0 список

01:28:52

зависимостей и дальше нам необходимо

01:28:55

здесь грузить эти посты то есть давайте

01:28:58

я создам здесь

01:28:59

синхронную функцию лот которая будет

01:29:06

обращаться к нативном у печь и он будет

01:29:11

делать запрос по http

01:29:13

слэш локалхост слэш 4200 posts

01:29:20

давайте мы дождемся пока этот вещи

01:29:23

выполнится кэти на канале также

01:29:25

присутствует подробный ролик про вот эти

01:29:26

вот вещи поэтому в описании вы найдете

01:29:29

ссылку на то видео где вы сможете

01:29:35

прояснить возможна ситуация если вам не

01:29:37

понятно здесь мы получаем некоторые

01:29:39

response от фича дальше нам необходимо

01:29:45

получить непосредственно джейсон мы это

01:29:47

делаем с помощью response джейсон но нам

01:29:50

возвращает promise поэтому в этом мы его

01:29:54

парсим в обычный объект

01:29:57

и дожидаемся на самом деле а методом

01:29:59

intel сонмы парсим до в объект и дальше

01:30:03

когда все это загрузилась то нам

01:30:05

необходимо вызвать метод сет пост куда

01:30:07

необходимо просто передать уже набор

01:30:09

новых постов

01:30:10

он у нас хранится в джейсоне и дальше

01:30:13

давайте пока без о или а допустим в

01:30:16

итоге при

01:30:17

мы попробуем посмотреть на то а что

01:30:20

такое у нас посты только естественно нам

01:30:24

здесь функцию лот тоже не стоит забывать

01:30:27

вызывать давайте посмотрим на посты

01:30:31

выведем его с помощью джейсон стринги

01:30:35

фай пост знает наш state значит дальше

01:30:39

нам нужно загрузить

01:30:43

работу текста да потому что он сейчас не

01:30:46

запущен и тут есть проблема потому что

01:30:48

нам нужно запустить по сути сейчас два

01:30:50

скрипта естественно мы можем отдельно

01:30:52

запустить мог и отдельно запустить

01:30:54

например next но это неудобно давайте мы

01:30:58

создадим еще один скрипт который будет

01:31:00

одновременно нам все это делать для

01:31:02

этого я установлю еще один пакет npm

01:31:06

install минус d называется он con carne

01:31:18

где ты ошибся в написании

01:31:21

давайте мы его скопируем и посмотрим как

01:31:25

он пишется

01:31:26

а там две буквы r кантором длин давайте

01:31:32

просто скопируем так копирую и ставим

01:31:42

факт - да данный пакет он просто

01:31:46

позволяет нам одним скриптом запустить

01:31:48

она и количество других скриптов и

01:31:50

сейчас я покажу насколько это просто

01:31:52

то есть мы переходим в файл пекарь .

01:31:55

джейсон и здесь например я организую

01:31:58

скрипт surf который будет обращаться к

01:32:03

конкурент ли и дальше я должен

01:32:06

обозначить двойные кавычки

01:32:08

экранировать их для того чтобы вы

01:32:10

джейсоне все было нормально а дальше

01:32:12

просто описываю нужны несколько

01:32:13

запускаем pr on tv

01:32:15

и опять здесь экранируют эти вот скрипт

01:32:21

и ну и запускаю соответственно скрипт

01:32:24

мог omrоn мог то есть естественно в

01:32:29

реальных приложениях кстати мог то это

01:32:32

будет какой-то другой там open server

01:32:35

backend да но сейчас мы так изучаем next

01:32:40

то соответственно запускаем на его и

01:32:43

пишем здесь он п.м.

01:32:45

жан surf дает на запускается в начале

01:32:52

next на борту 3000 и потом запускается

01:32:56

ресурсы на порту 4200 теперь если мы

01:33:00

перейдем на страницу постов и обновим

01:33:04

страницу то на самом деле мы видим что

01:33:06

мы получаем здесь все вот эти вот посты

01:33:09

которые мы хотели получить так на

01:33:11

странице постов причем изначально это

01:33:14

был у нас пустой массив

01:33:15

но после этого мы здесь получаем то что

01:33:19

приходится сервера кстати мы можем это

01:33:22

более красиво вывести если есть напишем

01:33:24

ну и здесь укажем количество space

01:33:27

нужно сохранить уж не зря мы находимся в

01:33:30

теге при вот так более читаемым

01:33:33

получается и вот вы скажете что блин

01:33:37

круто мы загрузили данные значит вы все

01:33:39

работает прекрасно да но проблема

01:33:42

заключается здесь в том что если мы

01:33:44

посмотрим в network и обновим страницу

01:33:52

значит дальше я сделаю фильтр по x и шар

01:33:58

для того чтобы проще искать вот я вижу

01:34:01

запрос с фронтенда

01:34:04

если я на него посмотрел то вы превью

01:34:07

мне прилетает джейсон что плохого скажите вы все дело

01:34:11

в том что вот я захожу эту страницу и

01:34:13

дальше я пытаюсь посмотреть ее код здесь

01:34:19

у нас присутствуют уже стиле которые

01:34:21

прилетают сервера и вот что мы видим что

01:34:25

прилетает что увидит поисковый робот

01:34:28

например он и видит так прим но в нем

01:34:32

лежит пустой массив то есть вот тех

01:34:34

данных которые мы сейчас загрузили он

01:34:36

просто не видит потому что они

01:34:38

загружаются у нас в асинхронном режиме а

01:34:40

учитывая что мы хотим сохранить

01:34:42

функционал для того чтобы работала seo

01:34:45

оптимизации в том числе

01:34:46

нам необходимы эти данные загрузить на

01:34:48

сервер и то есть вот этот подход союза

01:34:51

эффектом он как бы работает но в рамках

01:34:53

сервер сайта рендеринга он бесполезен

01:34:56

позже мы конечно к этому вернемся как

01:34:59

скомбинировать два подхода да но суть

01:35:02

сводится к тому что пока что это не то

01:35:04

что мы хотим здесь пока мы можем вывести

01:35:09

просто пустой массив чтобы не было

01:35:12

ошибки соответственно как нам решить

01:35:14

данную задачу то есть как нам сделать

01:35:16

запрос на сервер для того чтобы эти

01:35:19

данные тренды листам и потом нам

01:35:21

вернулся уже готовый each темы в

01:35:24

документации мы можем написать такую

01:35:26

штуку как get и не шоу props

01:35:32

и здесь с этим если мы посмотрим то

01:35:36

безусловно из описание до данного метода

01:35:39

как его использовать но тут есть один

01:35:43

небольшой

01:35:44

warning to рекомендация что сейчас лучше

01:35:46

использовать например get static props

01:35:48

или get сервер сайт fraps взамен данного

01:35:52

места это уже нововведение но тем не

01:35:54

менее сейчас мы и поговорим про it

01:35:56

давайте пока все таки обратим внимание

01:35:59

на данный метод почему его все таки

01:36:02

возможно использовать и с ним все хорошо

01:36:06

в том что мы берем наш функциональный

01:36:11

компонент например и добавляем к нему

01:36:12

нового и статическое поле get низшего

01:36:15

props именно таким образом добавляется

01:36:17

статика дальше мы обозначаем это как

01:36:21

функция и уже мы здесь описываем серверный код

01:36:24

это я говорю к тому что мы как раз таки

01:36:26

комбинируем есть либо frontend либо

01:36:28

backend так вот это тот случай когда мы

01:36:30

уже должны писать не клиентский код а

01:36:32

именно серверный код давайте посмотрим

01:36:36

как это выглядит на практике то есть у

01:36:38

нас есть функция

01:36:40

пост до мы можем обратиться к ней и

01:36:44

дальше

01:36:45

определить у нее статический метод

01:36:46

который называется get и не шоу traps

01:36:51

это будет функция мы сразу же можем

01:36:54

сделать ее асинхронный потому что надо

01:36:56

понимает синтаксиса sing a weight это то

01:36:59

что будет выполняться на сервере сейчас

01:37:01

и здесь я могу просто скопировать то что

01:37:06

уже написал то есть здесь мы делаем

01:37:09

ровно то же самое что и делали до этого

01:37:10

мы обращаемся к методу fitch под капотом

01:37:15

next он естественно не имеет доступа к

01:37:17

браузер нам упечь но он использует пакет

01:37:20

который называется дезоморфин on which

01:37:32

по-моему его он использует раньше его

01:37:34

нужно было отдельно подключается а

01:37:35

сейчас по моему он сшит в сам

01:37:39

next вот но если у вас что-то друг не

01:37:42

работают если вы используете допустим

01:37:44

старой какую-то версию то можете

01:37:45

установить данный пакет и на бэг-энде у

01:37:48

вас будет доступен этот универсальный

01:37:49

метод печь здесь мы по сути получаем уже

01:37:53

не джейсон а посты и дальше нам нужно

01:37:57

просто что-то здесь вернуть вернуть

01:37:58

объект у которого допустим будет ключ

01:38:01

posts

01:38:02

то есть еще раз что здесь происходит мы

01:38:06

определяем статический метод который

01:38:08

будет выполняться на сервере

01:38:10

дальше мы сделаем тоже запрос к любому

01:38:13

in point у которому захотим парсим этот

01:38:15

запрос и очень важно чтобы мы вернулись

01:38:18

здесь объект который впоследствии мы

01:38:21

сможем обрабатывать уже на фронт энди

01:38:23

ключи мы выбираем самостоятельно но

01:38:26

здесь я опускаю значение потому что ключ

01:38:28

и значение одинаково да это тоже самое

01:38:30

надпись что и вот если бы я написал так

01:38:33

теперь мы знаем что здесь мы возвращаем

01:38:37

объект да но естественно этого

01:38:39

недостаточно

01:38:40

так как если мы перейдем на сайт то

01:38:43

ничего не изменилось можно кстати

01:38:45

закрыть все вкладки поэтому как нам

01:38:51

обработать это учитывая что мы знаем что

01:38:53

это называется пост то теперь как props

01:38:57

в данный компонент мы можем получить как

01:39:00

раз таки это свойство и теперь если мы

01:39:04

зарин dream его в наш обычный джейсон

01:39:07

стринги файл и 1-ым страницу

01:39:10

то мы увидим опять эти посты которые

01:39:12

видели до этого но теперь в чем разница

01:39:14

разница в том что если мы посмотрим

01:39:16

исходный код страницы то уже в том html

01:39:23

который нам сгенерировал сервер мы видим

01:39:25

эти данные то есть теперь роботы они

01:39:26

смогут увидеть данный контент из могут

01:39:28

проиндексировать наш сайт давайте

01:39:32

приведем это в что-то более-менее

01:39:34

внятное чем джейсон стринги фай

01:39:37

то есть удалю допустим у нас будет так у

01:39:41

эль

01:39:42

и дальше естественно учитывая что мы

01:39:44

работаем в реакции мы можем использовать

01:39:45

классическое использование методом epu

01:39:49

массива для того чтобы все это

01:39:51

преобразовать в нужный джей секс мы

01:39:55

получаем отдельный пост и возвращать мы

01:39:58

здесь будем так ли давайте не забудем

01:40:04

параметры ки

01:40:05

который будет равняться пастой де и

01:40:08

дальше мы здесь будем добавлять так link

01:40:13

компонент link до которые мы

01:40:15

импортировали который будет вести

01:40:20

пользуйтесь такими кавычками на

01:40:22

slash пост слэш пост

01:40:26

айди да и здесь мы напишем допустим пост

01:40:30

python все такой шаблон у нас будет

01:40:34

устанавливаем страницу тут мы получаем

01:40:39

ошибку вероятнее всего это ошибка из-за

01:40:43

того что здесь нам необходимо также

01:40:45

добавить так а давайте проверим 5 нет он

01:40:59

вот и мы получаем список наших постов

01:41:02

единственное что здесь знак доллара по

01:41:04

той причине что мы просто здесь

01:41:06

добавились здесь нет никаких строк нам

01:41:09

просто здесь нужно выводить

01:41:10

джей секс дату и смотрим вот пожалуйста

01:41:13

красивый список тех постов которые мы

01:41:15

хотели более того помните мы добавляли

01:41:18

страницу пост и и динамический айден так

01:41:22

вот мы уже провели сформировали нужную

01:41:24

нам ссылку да то есть мы можем по ней

01:41:25

перед тем но здесь мы увидели одну

01:41:29

небольшую проблему так как была

01:41:32

перезагрузка страницы

01:41:33

да то есть вот мы гуляем и страницы у

01:41:37

нас перезагружается что они очень

01:41:38

здорово почему на самом деле потому что

01:41:42

когда мы работаем с динамическими

01:41:44

параметрами в компоненте link to нам

01:41:48

нужно сделать немного иначе в

01:41:50

next во всяком случае в

01:41:54

а шериф нам необходимо явно указать он

01:41:57

на какую страницу мы идем то есть в этом

01:42:00

случае мы должны здесь написать каким-то

01:42:02

образом айди но естественно если мы

01:42:04

оставим таким образом то постов перейдем

01:42:09

то мы получаем соответствующий иди

01:42:11

дальше нам необходимо указать на что

01:42:14

данный шаблон то здесь мы указываем как

01:42:16

бы путь настоящий но нам также нужно

01:42:19

указать какие параметры

01:42:20

там есть здесь мы указываем параметры с

01:42:22

и тут уже мы указываем нормальный путь

01:42:25

пост слэш пост айди да это что касается

01:42:29

именно в динамических параметров в теге

01:42:32

link так теперь если мы сохраним

01:42:35

перейдем в посты обратно давайте

01:42:37

почитаем про здоровье

01:42:38

теперь у нас все нормально отображается

01:42:41

значит и

01:42:43

ну в принципе да то есть саму навигацию

01:42:47

мы сделали теперь хочется отобразить

01:42:49

нормальные эти данные на странице

01:42:50

постов и здесь я бы хотел чтобы вы

01:42:53

поставили на паузу и сделали это

01:42:56

самостоятельно как вообще это делать то

01:43:01

есть мы получаем

01:43:03

нужный нам айдишник в адресной строке и

01:43:05

в зависимости от нужного нам айди нам

01:43:08

необходимо загрузить нужный конкретный

01:43:11

пост и также отобразить его в html

01:43:14

естественно сделать это нужно с помощью

01:43:16

сервер сайт рендеринга да тут нужно

01:43:19

будет немножечко подумайте возможно даже

01:43:20

почитать документацию если вы хотите

01:43:24

узнать именно про and point to запрос

01:43:28

будет выглядеть именно таким вот образом

01:43:30

на читаете тебе локалхост 4200 пост

01:43:35

допустим мы хотим загрузить второй пост

01:43:38

до поэтому просто добавляем 2 и вот мы

01:43:40

получаем нужны нам пост нужно будет

01:43:42

немножечко

01:43:43

подумать как этот параметр добавить в

01:43:46

функцию гетто низшего props поэтому

01:43:49

предлагаю поставить на паузу и сделать

01:43:51

все таки меня не большие тренинги в

01:43:54

туториалы

01:43:55

но я надеюсь что вы поставили на паузу

01:43:57

кто хотел потренироваться это сделал

01:43:59

чтобы укрепить материал здесь же

01:44:01

я продолжу в первую очередь мы переходим

01:44:05

на страницу пост и делаем тоже самое

01:44:09

значит мы добавляем для нашего

01:44:12

компонента пост метод get и не шоу props

01:44:18

это будет асинхронная функция так к нам

01:44:21

потребуется сделать здесь асинхронный

01:44:23

запрос можно не указывать как встречную

01:44:26

функцию и тут мы принимаем некоторые

01:44:30

параметр контекст про контекст мы можем

01:44:34

почитать в документации вот тут есть

01:44:39

контекст в нем есть определенные данные

01:44:42

и вот ссылка как раз таки на

01:44:44

документацию по контекст объекта и какие

01:44:47

параметры у него в принципе есть у него

01:44:49

есть параметр под ней мк вере request

01:44:52

response to что касается серверных до

01:44:55

взаимодействий и объект ошибки то есть

01:44:57

по факту если мы воспользуемся посмотрим

01:44:59

на вообще что такое к вере

01:45:01

так сделаем выведем в консоль лог

01:45:05

контекст к вере и важно мы здесь должны

01:45:09

вернуть что-то вернуть объект учитывая

01:45:13

что это будет на сервере то нам

01:45:15

необходимо будет консоль проверять

01:45:16

именно на сервере

01:45:17

давайте вернемся на наше приложение

01:45:20

обновим страницу и мы видим что на самом

01:45:23

деле в контекст квари у нас находится

01:45:26

объект у которого есть в ключ айди

01:45:29

то есть по сути мы можем взять

01:45:31

скопировать всю эту логику

01:45:35

значит вставить сюда здесь мы будем

01:45:41

получать один пост и запрос мы делаем на

01:45:46

пост слэш эти можно добавить плюс либо

01:45:50

можем поменять на template string и

01:45:53

указать как динамический параметр

01:45:54

контекст к вере еде

01:46:03

возвращаем пост и дальше значит мы можем

01:46:07

этот пост получить непосредственно самом

01:46:10

компоненте как props пост и давайте

01:46:13

выведем его значение то есть роутер нам

01:46:15

здесь не нужно его закомментирую здесь

01:46:19

мы вводим toi tu здесь без

01:46:22

доллара пост тайтл ну и допустим в вы

01:46:28

здесь будет какой-нибудь вертикальная

01:46:30

точнее горизонтальная черта здесь мы

01:46:32

вводим пост

01:46:34

body чтобы почитать текст и можем

01:46:39

допустим добавить кнопочку давайте

01:46:43

все-таки будет ссылкой link

01:46:48

добавляем take a back to post factum

01:46:57

post допустим да и мы будем вести на

01:47:01

страницу pasts обратно чтобы мы могли

01:47:04

сделать внутреннюю навигацию значит

01:47:06

обновляем страницу и вот пожалуйста наш

01:47:09

пост про отдых

01:47:12

перемешку английский русский тем не

01:47:14

менее мы можем сейчас спокойно гулять по

01:47:17

вашим постам по нашему приложению и как

01:47:20

видите все это работает в динамическом

01:47:23

режиме и что я хотел еще показать то что

01:47:25

если мы посмотрим исходный год сейчас не

01:47:28

исходный код страницы да то как раз таки

01:47:33

здесь мы найдем тот текст который

01:47:38

роботы смогут прочитать кстати если вы

01:47:41

внимательно посмотрите допустим вот на

01:47:43

эту этот скрипт next дата то здесь

01:47:48

присутствует во первых тип на этом вас

01:47:53

applications джейсон это у нас действительно джейсон

01:47:56

где есть объект печь props который

01:47:58

содержит как раз таки вот параметры

01:48:00

которые изначально были загружены с

01:48:02

сервера то есть как это работает мы

01:48:04

загрузили на сервере какие-то данные

01:48:06

он сформировал отпуск скрипт next дата

01:48:10

сюда засунуть данные который получил на

01:48:12

сервере добавил еще какие-то поля типа роутер и

01:48:14

так далее

01:48:15

и после этого уже через механизмы

01:48:19

реактор он опустил это как параметры для

01:48:22

самой страницы через печь props apache

01:48:26

props на самом деле используется в нашем

01:48:28

об вот не печь props дату и

01:48:30

соответственно таким примерно вот

01:48:32

образом хитрым и работает next

01:48:34

да каким образом превращать превращает

01:48:36

бэкон данные во front-end

01:48:38

данные сейчас я хочу немножечко

01:48:41

поиграться еще с запросами на сервер

01:48:44

чтобы показать скажем так специфику до

01:48:47

работа с универсальными приложениями

01:48:49

давайте остановим процесс работы сервера

01:48:53

вернемся впг джейсон и допустим мы

01:48:56

добавим задержку уже не 450 миллисекунд

01:48:58

а например

01:49:00

1750 миллисекунд и заново запущен наш

01:49:03

проект

01:49:04

зачем затем чтобы мы дольше загрузили

01:49:07

страницы и осадили некоторые моменты

01:49:11

обновляю страницу она грузится уже чуть

01:49:14

дольше да потому что сервер пока не

01:49:16

ответит мы не загрузим не нарисуем

01:49:18

страницу

01:49:19

допустим делаем back to all posts и

01:49:21

видите как бы баг небольшой происходит

01:49:23

том плане что мы не сразу переходим на

01:49:26

страницу мы ждем и вот не понятно да как

01:49:28

бы что вообще нужно пользователю делать

01:49:33

то есть нашем случае полторы секунды там

01:49:35

если поставить три секунды то

01:49:36

пользователь будет нажимать на кнопку но

01:49:38

ничего не будет происходить

01:49:40

соответственно как мы можем решить

01:49:42

данную задачу но естественно сервер мы

01:49:45

не можем поправить в данном случае но

01:49:47

при этом юлай мы можем немножечко

01:49:49

изменить чтобы он был чтобы он

01:49:51

пользователям воспринимался лучше таким

01:49:54

образом значит давайте перейдем допустим

01:49:57

в наш пост роутер не нужно больше у нас

01:50:03

есть объект контекст здесь нам не

01:50:05

обязательно с забирать сразу весь

01:50:07

контекст мы можем забирать его

01:50:08

определенный поля сразу например к вере

01:50:14

помимо этого в документации если мы

01:50:16

посмотрим то тут присутствуют еще такие

01:50:21

вещи как например request

01:50:24

естественно при первоначальном

01:50:26

рендеринге когда мы делаем первый запрос

01:50:27

на сервер в эта штука выполняется на

01:50:29

сервере да и соответственно в нем

01:50:32

присутствует объект request да то есть

01:50:35

мы сможем с ним взаимодействовать на

01:50:37

сервере но если мы уже загрузили сайт и

01:50:41

делаем переход на новую страницу

01:50:43

то данный метод он будет вызываться уже

01:50:47

на фронт энди

01:50:48

да и соответственно объекты request у

01:50:52

нас не будет поэтому если мы находимся

01:50:56

внутри фронтенда то тогда мы можем

01:51:00

визуально отобразить что происходит

01:51:02

загрузка да и в гетто низшего проб с мы

01:51:05

можем записать следующим образом если не

01:51:06

объект request а то есть мы находимся на

01:51:11

фронт энди

01:51:12

то тогда мы можем вернуть здесь допустим

01:51:15

пост со значением ну давайте посмотрим

01:51:18

как мы это изменили перехожу на пост вот

01:51:24

обновляю страницу жду пока она

01:51:26

загрузится допустим пост про java script

01:51:29

нажимаю и мы получаем здесь ошибку

01:51:33

потому что мы естественно мы сделали его

01:51:38

ну лом но во всяком случае не было

01:51:41

никакой задержки

01:51:42

да потому что мы сразу уже перешли на

01:51:44

страницу и здесь мы можем уже

01:51:46

скомбинировать на самом деле

01:51:48

и front-end и back-end то есть дальше

01:51:50

например сказать что этот пост название

01:51:54

параметра мы можем засунуть переменную

01:51:57

например сервер пост до чтобы просто

01:52:01

понимать что на самом деле этот параметр

01:52:02

он приходит нам с сервером и дальше

01:52:06

воспользоваться опять же механизм мире

01:52:07

акта которые мы использовали конкретно

01:52:10

это хуки

01:52:11

мы их импортируем из реакцию состоит из

01:52:15

эффект

01:52:18

дальше мы создаем стоит вокальный из по

01:52:24

умолчанию будет равняться сервер пост да

01:52:26

и важно понимать что это может быть и ну

01:52:30

да здесь мы ставим переменный пост и

01:52:33

функцию сет пост

01:52:37

дальше мы работаем с из эффектов который

01:52:48

мы будем запускать при

01:52:49

маунти самого компонента да я здесь по

01:52:53

сути мы можем повторить все логику

01:52:55

то есть мы можем здесь создать

01:52:57

асинхронную функцию вот значит ставить

01:53:01

это значение и

01:53:07

значит давайте мы его назовём здесь

01:53:09

допустим да то чтобы не будет

01:53:12

пересечение здесь пост здесь пост был

01:53:14

дальше в сэд пост функцию да мы положим

01:53:18

эту дату

01:53:21

теперь функцию вот мы будем вызывать

01:53:24

только в том случае если в этот пост

01:53:26

равняется ну да если с сервера прилетел

01:53:29

нам ну то есть если не пост когда мы

01:53:33

вызываем функцию плод и теперь давайте

01:53:37

посмотрим на то что у нас получилось

01:53:40

единственное что тут лучше проверять не

01:53:42

самый пост а все-таки сервер поз то есть

01:53:45

мы точно знаем что сервер прилетел ну

01:53:47

тогда мы делаем загрузку на фронте и

01:53:50

дальше еще сделаю маленькую проверку что

01:53:53

если не пост то есть мы пока еще

01:53:55

грузится

01:53:56

то тогда мы можем в качестве g секса

01:53:59

вернуть здесь все тот же например main

01:54:02

layout но только здесь мы уже добавим

01:54:04

например там параграф п с текстом

01:54:09

lading то есть мы делаем процесс

01:54:12

загрузки теперь смотрите давайте

01:54:16

проверим вообще работает ли все то что

01:54:19

мы написали давайте перейдем на главную

01:54:23

страницу переходим на посты

01:54:28

подождали пока на сервер и все

01:54:29

загрузилось от рендерилось ну и теперь

01:54:31

допустим читаем за здоровье почти все

01:54:38

сработало кроме того что так вере is not

01:54:40

define да потому что мы делали это на

01:54:43

сервере нам теперь нужно делать это

01:54:44

знаком тенте то есть мы опять получаем

01:54:46

здесь роутер юз

01:54:48

роутер и здесь мы пишем роутер к вере

01:54:53

айди то есть таким образом мы получаем

01:54:55

frontend параметры и теперь смотрите

01:54:59

какая красота то есть если страница

01:55:02

постов нас открывается долго да и

01:55:04

пользователи не понимает что происходит

01:55:06

то например когда мы приходим на

01:55:08

конкретный пост

01:55:09

мы получаем loading и только после этого

01:55:12

мы уже получая нормальный пост при этом

01:55:14

если мы сразу загружаем страницу постов

01:55:16

то как видите никакого 1 га нет мы сразу

01:55:19

же получаем контент в качестве

01:55:21

упражнения вы можете тоже самое сделать

01:55:23

например для данной странице то есть тут

01:55:27

в принципе можно все написали

01:55:29

я предлагаю вам поставить на паузу

01:55:31

сделать это самостоятельно и теперь

01:55:35

давайте посмотрим как я бы это сделал ну

01:55:37

примерно то есть такая же идея здесь

01:55:39

сервер пост здесь мы начать по умолчанию

01:55:45

сервер пост сделаем как и не шел state

01:55:49

дальше если не сервер пост мы делаем

01:55:55

функцию лот значит пасты мы получили мы

01:55:59

допустим здесь нам также нужно получить

01:56:04

объект request a и спросить что если не

01:56:08

request

01:56:09

тогда мы вернем posts

01:56:12

ну здесь мы спрашиваем если не пост то

01:56:21

мы возвращаем другой g секс main layout

01:56:26

ну и параграф п

01:56:29

loading

01:56:31

то есть вот примерно такой код у вас

01:56:33

должен был получиться теперь когда мы

01:56:36

переходим на посты в frontend режиме то

01:56:38

видим мы получаем loading

01:56:41

да и все красиво работает при этом если

01:56:44

мы делаем и не шоу загрузку

01:56:46

то мы получаем нужный нам и чтим и сразу

01:56:50

из коробки посмотрим исходный код

01:56:53

проверяем что эти посты у нас

01:56:54

действительно есть да вот эта система

01:56:57

прекрасно я вам говорю что мы тут

01:57:02

почитали рекомендацию что лучше

01:57:04

использовать сейчас для сервиса и

01:57:06

загрузки например функцию get сервер

01:57:09

сайт fraps или например get static props

01:57:13

знаете начали посмотрим на функцию get

01:57:15

сервер сайт props по сути она делает

01:57:21

ровно то же самое что и мы сделали с

01:57:25

функцией где-то низшего props то есть

01:57:27

если мы даже посмотрим то здесь контекст

01:57:31

и параметры

01:57:32

точно такие же используется он

01:57:35

немножечко иначе то есть он просто

01:57:37

экспортируется как именно ванная функция

01:57:39

и давайте попробуем и 3 factory

01:57:42

что-нибудь например страницу иди пост

01:57:47

дату здесь вместо того чтобы у так

01:57:49

писать мы можем экспорт

01:57:59

асинхронная функция get сервер сайт

01:58:02

props дальше повторить по сути логику да

01:58:05

то есть мы получаем тетка верим и дальше

01:58:15

единственное что нам нужно поправить

01:58:17

печорин то здесь нам необходимо вернуть

01:58:19

объект props и уже у него должен быть

01:58:22

объект пост да для того чтобы все

01:58:24

работало эти проверим что most

01:58:27

отработана едим значит эта страничка

01:58:32

должна работать и как видите страница с

01:58:38

постом также отрабатывает да то есть но

01:58:40

по сути мы сделали здесь тоже самое

01:58:42

часто отличие заключается в том что во

01:58:44

первых но эти методы они более

01:58:47

современные и соответственно позволяют

01:58:50

более детально работать с бэк-энд

01:58:53

запросами

01:58:55

дальше главное отличие заключается в том

01:58:58

что вот эта вот функция оно вызывается

01:58:59

исключительно на серверной части то есть

01:59:03

она никогда не вызывается на клиентской

01:59:04

составляющей и

01:59:07

в данном контексте вот этот проверка она

01:59:09

будет вишня

01:59:10

но это нам дает определенную свободу в

01:59:13

том плане что например здесь мы можем

01:59:16

скажем если мы работаем с какой-то базы

01:59:18

данных то мы можем пример делать запросы

01:59:20

напрямую так моему и написано в

01:59:22

документация чего мы не можем сделать в

01:59:25

геты ниши вопрос потому что он в том

01:59:27

числе отрабатывает на фронт энди

01:59:29

да поэтому он если вам нужен только

01:59:32

сервер сайт рендеринг то вы можете

01:59:34

использовать эту функцию но если вам

01:59:36

нужно комбинировать

01:59:37

допустим front-end и back-end то лучше

01:59:40

использовать git и мешок props пойти на

01:59:44

ее страницу проверим что у нас ничего не

01:59:45

сломалось все работает весь lading есть

01:59:48

и так далее соответственно в

01:59:52

документации приведены примеры до того

01:59:53

когда использовать и также присутствуют

01:59:56

другой метод get 100 тег props

01:59:58

тоже можем посмотреть как он работает то

02:00:01

есть он очень похож на get сервер сайт

02:00:03

fraps

02:00:04

но данный метод он нужен если мы можем

02:00:08

допустим от тренда

02:00:09

а какой-то статический контент от

02:00:14

пользователей до который доступен в

02:00:17

заранее предложенном формате

02:00:19

это что касается статические дни раз и

02:00:21

сайт и поэтому не будем говорить в

02:00:23

данном видео потому что это более

02:00:24

продвинутая история до в рамках данного

02:00:27

видео я бы хотел затронуть еще некоторые

02:00:29

базовые вещи соответственно какие-то

02:00:33

каких вещах идет речь во первых так с

02:00:36

документации пока мы частично закончили

02:00:38

я нашел одну интересную статью которая

02:00:41

рассказывает как нам сделать loading

02:00:42

индикатор на самом деле loading

02:00:44

индикатор для сервер сайт рендеринга для

02:00:48

таких универсальных приложений вариантов

02:00:51

деле довольно таки много

02:00:52

я нашел просто статью где это легко

02:00:56

описывается как это сделать ссылку на

02:00:58

эту статью я привожу в описании также

02:01:00

данного ролика и

02:01:03

по сути вы можете ее прочесть и

02:01:05

посмотреть как вообще значит создается

02:01:10

свой компонент который показывает

02:01:12

индикатор загрузки и вообще процесс

02:01:15

загрузки данных для данной страницы для

02:01:18

ваших страниц которые вы открываете а то

02:01:20

здесь описано как мы можем сделать это

02:01:22

вручную с помощью пакета

02:01:24

in progress но при этом если мы не хотим

02:01:30

начать описывать дополнительный

02:01:32

компонент как-то его настраивать как-то

02:01:33

его стилизовать то мы можем скачать

02:01:36

очень удобный пакет который называется

02:01:38

next

02:01:39

джесс прогресс барр да и давайте

02:01:41

посмотрим на его использование

02:01:44

вот он находится на сайте м пнг с

02:01:48

копирую его установку дальше копируя в

02:01:57

клипах устанавливаю данный пакет

02:01:59

знаете посмотрим как его использовать

02:02:01

для этого нам необходим для того чтобы

02:02:08

его использовать нам необходимо его

02:02:10

добавить в компонент об так который как

02:02:13

раз таки позволяет нам взаимодействия

02:02:15

структуре всего приложения ну и

02:02:17

соответственно мы туда добавляем вот

02:02:19

такой вот компонент давайте мы его

02:02:21

импортируем для начала

02:02:24

реджис ап

02:02:31

да как обычный react компонент и дальше

02:02:35

используем его базовую настройку

02:02:39

добавляем его в же секс теперь если мы

02:02:43

запустим прям ранд surf то увидим

02:02:46

некоторые отличия по ведению нашего

02:02:48

приложения начнем с пока оно сбудется

02:02:59

итак при первой загрузке нет никаких

02:03:02

отличий но если мы допустим перейдем на

02:03:05

какой-нибудь пост то здесь мы быстренько

02:03:09

увидели логин в индикатор кредите когда

02:03:13

я перехожу вообще на какую-то страницу

02:03:14

где работает функция get и не шоу props

02:03:17

to

02:03:18

у нас появляется вот такой локинг

02:03:20

индикатор сейчас он отрабатывает очень

02:03:23

быстро по той причине что мы на самом

02:03:25

деле сам loading обрабатываем через

02:03:28

фронт-энд да через эффект и давайте

02:03:31

допустим для демонстрации сделаем

02:03:33

какую-нибудь тоже загрузку данных сна

02:03:37

стремится эбаут для того что просто

02:03:39

продемонстрировать что вообще происходит

02:03:42

значит переходим на эбаут пэйдж давайте

02:03:45

мы несколько параметр будем принимать

02:03:47

параметр тайтл

02:03:48

этот тайтл мы будем вводить в h1 и

02:03:53

добавим здесь

02:03:56

функцию get и не шоу props

02:04:00

пусть это будет тоже асинхронная функция

02:04:03

добавим сюда какой-нибудь искусственную

02:04:09

задержку да то есть например я могу это сделать с

02:04:12

помощью давайте мы это сделаем с помощью

02:04:15

нашей базы данных то есть добавить это

02:04:17

просто еще одно поле допустим about и

02:04:23

здесь мы будем возвращать объект который

02:04:25

будет полет тайтл где будет написано

02:04:28

страница про нас да то есть мы хотим

02:04:31

получить этот заголовок

02:04:32

очередной раз потренируемся

02:04:35

соответственно вызываем здесь метод

02:04:37

fitch теперь local host 4200 bout

02:04:48

давайте получим есть объект респон за

02:04:52

вид fitch дальше парсим response будет

02:04:56

data with response jison

02:05:00

и возвращаем здесь значит наш будет

02:05:05

поэтому да это объект data

02:05:10

можно его назвать как давайте пока все

02:05:14

таки это будет дата

02:05:15

посмотрим что на самом деле нам здесь

02:05:17

прилетает теперь обновляем страницу и

02:05:21

about видеть что она уже дольше

02:05:23

грузиться пока что react не может ее

02:05:26

отобразить давайте мы его вернем в

02:05:28

джейсон стринги fine посмотрим что

02:05:32

находится в тайным и нам тут прилетает

02:05:37

действительно объект у которого есть

02:05:40

ключ тайтл да то есть здесь можно писать дата тайтл

02:05:44

и тогда у нас не будет никаких проблем с

02:05:48

этим параметрам вот страница про нас да

02:05:56

мы знаем что мы получили ее с сервером в

02:05:59

чем фишка теперь допустим мы приходим на

02:06:01

посты loading индикатор у нас прошел

02:06:02

переходим обратно на эбаут где у нас нет

02:06:05

обработки front and loading загрузки то

02:06:08

приходим на эбаут там только серверная

02:06:11

загрузка вот наш loading идет тех пор

02:06:14

пока страница не отобразится то есть это

02:06:16

хотя бы как-то показывает пользователю

02:06:17

что вообще-то приложение не умерла она

02:06:20

думает и грузит данные а то есть именно

02:06:22

для это володенька диктатор не нужен и

02:06:24

естественно вы можете его по-разному

02:06:26

стилизовать то есть придавать различный

02:06:28

набор опций давайте допустим поменяем

02:06:30

цвет например на яву а почему нет где

02:06:40

такое очень пестрое приложение

02:06:47

так но я ловлю не читает а потому что

02:06:51

здесь хэш оставил home

02:06:55

да и вот у нас теперь есть синие и

02:06:57

желтые индикаторы то есть я думаю дальше

02:07:00

понятно как его настроить тут высота

02:07:02

можно передать двойку различные

02:07:05

стартовые позиции задержка и так далее

02:07:08

да ну это уже просто параметр с которой

02:07:09

можно поиграться так двигаемся дальше

02:07:14

помимо того что мы сейчас рассмотрели в

02:07:17

базе в никс также присутствует еще

02:07:19

классная возможность позволяющая нам

02:07:22

создавать свои собственные open end

02:07:23

point прямо на сервере и для этого мы

02:07:26

можем создать отдельную папку в папке

02:07:28

пиджак который называется и пьянь

02:07:31

в теперь мы создаем также отдельные

02:07:35

файлы допустим я хочу создать какой-нибудь on

02:07:38

point тестовый

02:07:40

например я его назову эко .

02:07:45

джесс здесь я экспортирую по дефолту

02:07:49

функцию которую также назову например it

02:07:51

can и по сути если вы работали с

02:07:55

экспрессом то это что-то вроде

02:07:56

маленького

02:07:59

контроллера данная функция она принимает

02:08:02

себя request и

02:08:04

response и тут запомните что мы работаем

02:08:07

уже на сервере то есть соответственно у

02:08:09

например response а мы можем обработать

02:08:12

статус код на примерно 200

02:08:17

мы можем например задавать хедер по

02:08:22

моему функции называется сет headers

02:08:27

только без это просто сет хедер

02:08:30

здесь допустим мы укажем что мы сюда

02:08:34

передаем applications

02:08:37

джейсон и это естественно у нас content

02:08:42

type мы давайте здесь вернем

02:08:44

какой-нибудь джейсон

02:08:46

то есть с помощью функции рсн

02:08:50

а что джейсон стринги фай допустим мы

02:08:52

будем просто обрабатывать то что нам

02:08:53

управляет сам пользователь только в

02:08:58

объекте у которого есть ключ например

02:09:00

message и эти значения мы можем получить

02:09:03

из request

02:09:05

к вере я вот допустим message а если его

02:09:11

нет можем такой поставить оператор

02:09:14

кстати если вы про него не знаете то так

02:09:17

же в описании есть ссылка на ролик где

02:09:21

рассказываю про самое последнее

02:09:22

нововведении операторы которые есть в

02:09:24

java script если его нет то да это будет

02:09:27

кто-нибудь bass массаж то есть вот такую

02:09:30

штуку мы добавили давайте посмотрим как

02:09:32

вообще это работает и зачем это нужно

02:09:35

переводим браузер и теперь у нас есть

02:09:39

свой собственный api который мы

02:09:41

естественно можем которым мы можем

02:09:43

работать например эко

02:09:45

если мы него переходим то в ответ мы

02:09:47

получаем базовый ответ моста через месяц

02:09:51

до но при этом если мы добавим

02:09:52

напульсник вере параметр массаж равно

02:09:55

хэллоу например та в ответ мы получаем

02:09:58

хэллоу и теперь под этому лаку у вас тут

02:10:01

3000 до где у нас доступен наш next мы

02:10:04

можем спокойно получать какие-то данные

02:10:07

более того если мы допустим хотим

02:10:10

получить какие-то динамические параметры

02:10:13

например то мы можем таким же образом вступить

02:10:16

как мы делаем с обычным роутинга создать

02:10:19

файл эко например дальше мы говорим что

02:10:22

мы хотим получить здесь какой-то один

02:10:28

пустим дед твой ай ди да request

02:10:32

response

02:10:34

response status code равно 200 response

02:10:43

set хитер тоже сделаем content type ли

02:10:53

кейт эллисон и возвращаем ответ здесь мы

02:10:58

пишем пусть request

02:11:02

к вере и для того чтобы получить

02:11:04

динамический параметр из названия файл

02:11:06

мы просто обращаемся как вере аиде

02:11:09

да теперь соответственно если мы

02:11:11

допустим хотим сделать запрос на

02:11:13

какой-то идиш них например 42 that мы

02:11:16

получаем здесь 42 кстати чтобы не писать

02:11:19

каждый раз status code with headers мы

02:11:22

можем поступить более элегантным

02:11:24

способом просто написав рис джейсон

02:11:27

ну и допустим ее

02:11:30

айди request

02:11:33

клэри айди да это тоже там

02:11:38

добавлены некоторые не dauer и для

02:11:42

соответственно vacant кода

02:11:43

вот мы получаем тоже новое значение до

02:11:47

соответственно формирование таких

02:11:48

компонентов позволяет нам по сути писать

02:11:50

полноценный backend monexy совместно с

02:11:52

фронтэнда мы детально этим управлять

02:11:57

сейчас мы сильно останавливаться на этом

02:11:59

не будем то есть я вам показал всю базу

02:12:01

который присутствует в тексте дальше уже

02:12:03

идет конкретная детализация того что

02:12:06

как работать там на практике с ним там

02:12:09

где всякие авторизация катя авторизация

02:12:12

показывает сейчас не буду но при этом

02:12:13

скажу что естественно авторизации там

02:12:16

через local storage работать не будет

02:12:18

потому что в первую очередь нам нужно

02:12:21

получать эти данные с сервера и для

02:12:24

этого нам использовать нужно kookie

02:12:25

cookie мы используем тогда когда

02:12:27

работаем с сервер сайт рендерингом что я

02:12:31

хочу показать сейчас это то как

02:12:33

использовать next совместно с typescript

02:12:36

и в качестве небольшой практики

02:12:37

предлагаю переписать весь наш проект

02:12:39

сейчас на той

02:12:40

скрипт для того чтобы понять как next

02:12:43

это дело это делали

02:12:44

делает он это очень удобно для начала

02:12:47

давайте остановим процесс работы нашего

02:12:49

сервера

02:12:50

next и по сути все что нам необходимо

02:12:54

сделать это сделать небольшой

02:12:56

рефакторинг самого проекта да если мы

02:12:59

посмотрим в документацию поиску

02:13:02

typescript the next нам предлагает

02:13:06

инструкцию как это делать из коробки так

02:13:11

как он все это поддерживает но давайте

02:13:13

попробуем сделать это самостоятельно

02:13:14

здесь я хочу обратить ваше внимание на

02:13:15

то что нам необходимо переименовать

02:13:17

файлы из . джесс в . tsx

02:13:20

давайте так и поступим то есть начнем

02:13:23

пожалуйста 404 сделаем три факта и

02:13:26

фактор при нем tsx дальше

02:13:34

переименовываем остальные файлы

02:13:39

это займет некоторое количество времени

02:13:42

причем нам не обязательно все

02:13:44

переименовывать в новое расширение но

02:13:47

при этом хорошей практике считается что

02:13:49

если у вас проект допустим написано на

02:13:51

typescript а в общем и все остальное вам

02:13:55

также нужно сделать на typescript

02:14:00

так поменяйтесь дополнительно мне еще

02:14:03

ридми

02:14:04

принципе ok

02:14:08

поэтому беру эту галочку чтобы он ничего

02:14:10

не меня змея дури фактор это нюансы в

02:14:18

шторм а если вы восходит то такого

02:14:21

скорее всего не будет так меняем посты

02:14:26

значит меняем авторы могу оставить в

02:14:29

принципе потому что мы сильно с ними

02:14:32

взаимодействуем в рамках данного курса

02:14:34

меняем яндекс секс

02:14:37

меняем посты на tsx

02:14:44

так и давайте поменяем layout также на

02:14:48

нем tsx

02:14:50

так друзья перед тем как мы сейчас

02:14:53

продолжим наш функционал хочу сказать

02:14:56

что во-первых

02:14:57

в описании также найдете два крутых

02:15:00

видео по typescript на моем канале

02:15:02

полный курс + продвинутые разработка на

02:15:05

typescript там про generique про

02:15:06

декораторы прочее

02:15:08

и также вы найдете третье видео про то

02:15:11

как работает реакция вместо z typescript

02:15:13

на примере приложения то есть тоже

02:15:15

посмотрите там довольно подробно и

02:15:17

интересно и сейчас я уже не буду

02:15:19

подробно останавливаться там на многих

02:15:21

из этих концептов теперь значит давайте

02:15:24

запустим наш проект

02:15:25

пишем npm ран surf отлично и мы получаем

02:15:32

ошибки мы и хотели их поучить потому что

02:15:36

здесь нам next сразу же пишет что

02:15:37

вообще-то для того чтобы использовать

02:15:39

typescript пожалуйста установи мне

02:15:41

следующие пакеты мы можем прямо отсюда и

02:15:44

скопировать то есть мы ставим здесь

02:15:46

typescript types react и types not то

02:15:50

есть у копирую останавливают процесс

02:15:52

очищаю консоль и просто вставляю

02:15:57

установку данных пакетов

02:16:00

значит в нашем приложении нам нужно

02:16:03

дождаться пока не у нас целиком

02:16:05

поставится то есть пакет types он служит

02:16:07

для того чтобы просто

02:16:09

в те библиотека то которые там

02:16:12

используют java script например на но

02:16:14

джесс мы могли использовать

02:16:16

и типы но и непосредственно сам

02:16:18

typescript

02:16:20

и теперь давайте пока без сервера

02:16:21

запустим приложение npm ран д для того

02:16:26

чтобы

02:16:29

typescript и вообще next

02:16:32

он нам создал специальный файл тест

02:16:34

конфиг . джейсон который как раз таки

02:16:36

будет настраивать typescript

02:16:37

если мы на него посмотрим кто тут как

02:16:40

раз таки присутствуют все базы в

02:16:42

компьютер общин с которые next считает

02:16:44

необходимыми плюс здесь мы еще видим

02:16:49

namespace да где описана некоторые

02:16:53

параметры для работы с текстом ну

02:16:55

например что вот это вот reference он

02:16:58

описывает что не нужно импортировать

02:17:00

react в те файлы где используется

02:17:04

typescript

02:17:05

используется g секс прошу прощения да

02:17:07

потому что иначе typescript она выдал

02:17:09

ошибку

02:17:10

да и мы видим что сейчас наш проект был

02:17:12

успешно запущен

02:17:13

теперь мы можем запустить его с помощью

02:17:15

командным пионером сервис для того чтобы

02:17:17

наш сервер также работал проверяю что мы

02:17:26

все переименовали так и давайте идем на

02:17:30

наш любимый локу хоз 3000 посмотрим

02:17:32

работает ли сайт сайт и сейчас работают

02:17:36

работают loading индикаторы работают

02:17:39

посты да то есть все корректно

02:17:44

отображается и нет никаких проблем

02:17:45

теперь как нам корректно три факта рить

02:17:49

вообще весь наш проект потому что

02:17:51

недостаточно просто переименовать да все

02:17:53

таки хочется получить какие-то профит с

02:17:55

typescript

02:17:56

например начнем с постов здесь мы явно

02:18:00

видим что мы можем описать

02:18:02

входящие свойства для данного поста и

02:18:05

для этого мы можем написать какой-нибудь

02:18:07

интерфейс например пост пейдж пробст

02:18:15

например это интерфейс для входящих

02:18:17

свойств делась будет ключ пост который

02:18:22

нам нужно также обернуть в тип да пока

02:18:26

это у нас тип ткани

02:18:27

но хочется все таки создать нормальную

02:18:30

описательную модель а непосредственно

02:18:32

а постов поэтому давайте я в корне

02:18:35

приложения создам папку интерфейса и

02:18:39

здесь я создам общий интерфейс для

02:18:42

нашего приложения допустим пост .

02:18:46

джесс здесь я буду экспортировать

02:18:51

интерфейс давайте назову я его на всякий

02:18:57

случай май

02:18:59

пост чтобы просто так здесь ошибки

02:19:03

потому что я назвал . джесс конечно же

02:19:06

нам нужно называть это т.с. мой пост

02:19:12

чтобы не будет пересечение допустим с

02:19:13

другими какими постами которые есть там

02:19:15

в экстренных мер и для поста у нас такие

02:19:19

поля айди string

02:19:21

можно или string или например намбер

02:19:25

тайтл то у нас string и у нас помню там

02:19:29

базе то есть тел поста тоже string

02:19:32

соответственно теперь у нас это не

02:19:34

просто типы не а это у нас массив из

02:19:38

объектов мой пост до который мы

02:19:41

импортируем и теперь вот эти входящие

02:19:46

свойства мы можем обозначить как

02:19:48

интерфейс пост пэйдж props теперь что

02:19:53

нам вообще это дает ну например если мы

02:19:56

случайно там

02:19:57

ошибемся например напишем здесь пост

02:19:59

вместо пост то как видите мы уже на

02:20:02

этапе разработки видим некоторую

02:20:04

проблему что вообще-то полем пост она

02:20:08

отсутствует в интерфейсе пост ph props

02:20:11

да тут присутствует

02:20:12

поле пост сы причем она подсвечивается

02:20:15

дальше там мы взаимодействуем

02:20:18

непосредственно с постами то мы теперь

02:20:21

точно знаем какие поля есть у нашего

02:20:23

поставит конкретно тайтово базе и айди

02:20:25

на то что мы получили благодаря

02:20:29

typescript да теперь мы точно знаем с

02:20:32

какими объектами мы работаем и как

02:20:35

соответственно здесь мы можем указать

02:20:37

явный тип что это у нас май

02:20:40

пост почему-то у нас массив и здесь мы

02:20:46

также можем описать необходимые типы

02:20:48

например вы помните что этот объект на

02:20:50

самом деле является объектом контекста в

02:20:53

тексте

02:20:54

у него есть специальный тип который

02:20:56

называется next

02:20:59

пейдж в контекст который импортируется

02:21:01

вот таким вот образом из самого текста

02:21:05

теперь благодаря тому что мы описали

02:21:08

здесь тип мы точно знаем какие поля

02:21:09

присутствует вообще в этом объекте

02:21:11

например поле к вере до если мы здесь

02:21:14

его использовали

02:21:15

или например объект request более того

02:21:18

мы точно знаем что в рик вести лежит на

02:21:21

вот все вот эти поля видите как

02:21:23

typescript он круто нам помогает что то

02:21:25

есть мы относительно гадали какие же там

02:21:27

поля есть и могли ошибиться то сейчас

02:21:29

ошибка происходит с наиболее меньшей

02:21:34

вероятностью и в принципе все то есть

02:21:36

эту часть мы а3 factory ли давай театре

02:21:39

фактором страницу поста

02:21:42

то есть во первых здесь также говорим

02:21:43

что это у нас тип next пейдж контекст

02:21:46

который мы импортируем вот это конкретно

02:21:49

у нас май

02:21:50

пост ну понятно да что здесь мы получаем

02:21:57

к вере по авто completo

02:21:59

однако тут есть один нюанс в том плане

02:22:02

что вот например сейчас мы обратимся к

02:22:05

объекту к вере и видите что у него нет

02:22:09

этого поля айди то есть на самом деле

02:22:11

айди это то что мы сами создаем до в

02:22:14

зависимости от названия файла при этом

02:22:16

хотелось бы каким-то образом все таки

02:22:18

чтобы мы тоже здесь не ошибались и

02:22:20

правильно прописать вот этот вот

02:22:22

интерфейс как это сделать для этого мы

02:22:26

можем создать отдельный интерфейс

02:22:28

давайте создаем интерфейс допустим пост

02:22:36

next пейдж контекст и данный интерфейс

02:22:41

он будет наследоваться от интерфейса

02:22:43

next page контекст и дальше мы допишем

02:22:46

свойства каверин

02:22:47

сюда то есть к вере мы будем говорить

02:22:50

что будет присутствовать полете который

02:22:52

будет равняться стринги

02:22:53

теперь если мы укажем здесь вот этот

02:22:56

интерфейс то смотрите благодаря в таком

02:22:59

плиту у объекта к вере теперь доступна

02:23:01

явно поле айден да и благодаря потому

02:23:04

что мы написали такую запись теперь мы

02:23:05

точно не ошибемся то есть отойди теперь

02:23:08

точно соответствует этому параметру нет

02:23:09

никакой магии окей теперь давайте опишем

02:23:14

интерфейс в пробках для данного

02:23:17

компонента значит у нас интерфейс пост

02:23:21

пейдж рапс

02:23:23

мы ожидаем здесь объект пост который

02:23:27

является типом мой пост ну и все мы

02:23:29

здесь можем его указать пост пэйдж props

02:23:34

опять же теперь благодаря этому у нас

02:23:36

есть четкое понимание что в посте

02:23:39

присутствуют такие поля как той the body

02:23:42

и так далее сохраняем сейчас все должно

02:23:46

работать как и прежде

02:23:48

круто значит что нам еще стоит поправить

02:23:52

здесь принципе у нас нет ничего

02:23:54

интересного пасты мы от 3 factory ля

02:23:57

что касается эбаут то я предлагаю вам

02:24:00

сделать это самостоятельно до чтобы

02:24:03

описать здесь типы потому что тут будет

02:24:06

ровно все по аналогии и

02:24:11

также я хочу показать как

02:24:12

взаимодействовать еще с айпи and

02:24:16

поинтами значит давайте мы его тоже а3

02:24:19

фактором в секс и вот у этих параметров

02:24:25

request response также в nexia свои типы

02:24:28

который называется next api

02:24:31

request и next

02:24:35

опек response to который мы явно можем

02:24:38

указать и теперь видеть что эти методы

02:24:41

которые там я раньше еще года он

02:24:42

описался от хэдер или headers теперь

02:24:44

явно обозначены да и теперь мы

02:24:49

можем спокойно вызвать у них метод

02:24:52

например с и здесь мы видим какие методы

02:24:55

у него есть то есть это благодаря

02:24:57

typescript

02:24:58

по аналогии здесь что касается к вере то

02:25:01

есть typescript знает что у request есть

02:25:04

поле к вере но при этом он не знаю что у

02:25:06

него есть поле масса что которое мы

02:25:10

ожидаем поэтому мы можем поступить таким

02:25:12

образом допустим создать интерфейс

02:25:15

message next api

02:25:21

request название выбираете

02:25:24

самостоятельно он наследует сотник стопе

02:25:28

request a и дальше мы говорим что поле

02:25:31

kaveri

02:25:32

она содержит в себе поле message

02:25:34

необязательное поле мы с типом string мы

02:25:39

меняем и теперь видите что массаж у нас

02:25:41

подсвечивается то есть тут можно писать

02:25:43

. массаж это благодаря также typescript

02:25:47

ну и здесь соответственно похожие

02:25:49

истории я предлагаю вам сделать это

02:25:50

самостоятельно то есть отель factory

02:25:54

титана typescript

02:25:55

давайте вместе только переименуем иван

02:25:59

секс

02:26:02

next

02:26:03

api это у нас request

02:26:06

а это у нас next api response да и вот

02:26:11

попробуйте здесь чтобы и r&d он также

02:26:14

отображался у нас в кавере айден хорошо

02:26:22

теперь в принципе это все что касалось

02:26:26

вот этого базового рефакторинга на

02:26:28

typescript а то есть теперь мы можем

02:26:29

спокойно использовать различные типы

02:26:31

настраивать стоит скрипт себя и все это

02:26:34

будет успешно подхватывается и самое

02:26:36

последнее что я вам покажу в рамках

02:26:38

данного курса это то как можно в

02:26:40

принципе использовать во первых n в

02:26:42

переменные blues next конфиг мы можем

02:26:46

спокойно найти никс компактного

02:26:48

документация то есть написав next конфиг

02:26:52

и по сути все что нам необходимо сделать

02:26:55

это создать в корне файл который

02:26:58

называется next конфликт . джесс

02:27:01

эти его создан мы здесь работаем в но

02:27:06

джесс поэтому есть спешу модуль экспорт

02:27:08

и

02:27:09

например здесь мы можем

02:27:11

взаимодействовать с н в переменными в

02:27:13

поле н.ф. зачем вообще это нужно а затем

02:27:19

что допустим вот сейчас в нашем

02:27:21

приложении мы делаем несколько api

02:27:24

запросов и каждый раз мы hard ходим его

02:27:27

то есть мы описываем

02:27:28

допустим в посте локалхост 4200 и так

02:27:32

далее если например мы поменяем адрес

02:27:37

нашего api сервера сама кого она

02:27:39

настоящие то тогда нам по всему коду

02:27:41

пьется ходить и менять значит это

02:27:43

значение это не круто для этого вот

02:27:47

наказ конфиге мы как раз таки описываем

02:27:49

переменные и здесь мы можем наносить

02:27:51

любые значения которые захотим допустим

02:27:54

bass и ирель или например api

02:27:57

юрий лучше сюда мы можем заносить любые

02:28:03

значения например в нашем случае мы просто можем

02:28:05

заходить написать здесь еще тебе

02:28:08

local пост 4200

02:28:12

и дальше использовать его в коде либо же

02:28:16

например эти значения мы можем забирать

02:28:19

из involvement переменных дают то есть

02:28:24

учитывая что мы работаем сейчас majesta

02:28:26

здесь мы могли бы написать выше

02:28:30

написать про сны например название этой

02:28:39

переменной который мы хотим задать

02:28:42

я чуть позже покажу давайте пока три

02:28:44

фактором наш проект чтобы бутон работу

02:28:46

папе юрл то есть

02:28:51

закрой все чтобы уже не путаться

02:28:53

значит здесь мы берем вот это вот

02:28:56

базовые копиры и меняем на процесс н .

02:29:02

а пёрл да и данную конструкцию мы теперь

02:29:05

должны занести также на страницу posts

02:29:14

только нам необходимо поменять это все

02:29:16

на template string и здесь убрать

02:29:19

экранирование иностранец

02:29:22

about меняем на template string и

02:29:27

убираем этот локу хост на то есть теперь

02:29:31

у нас данное значение описана в одной

02:29:33

переменной

02:29:34

запускаем npm ран серов

02:29:48

обновляем страницу до и как видите у нас

02:29:53

все работает как прежде то есть теперь

02:29:56

фишка в том что допустим если мы значит

02:29:58

по какой-то причине впк джес они

02:30:02

поменяли допустим там но локалхост 4300

02:30:04

и запустили серов

02:30:07

вот у нас сервак спустился на 4 300 на

02:30:15

сервере то есть когда мы рендерим react

02:30:18

мы получаем ошибку да потому что мы все

02:30:20

еще делаем запрос на 4200 но учитывая

02:30:23

что сейчас мы уже все это храним в

02:30:26

переменной мы можем просто изменить в

02:30:28

нас конфетки в одном месте заново

02:30:30

сделать in pm серов не как видите у нас

02:30:38

все успешно работает если вы хотите

02:30:42

более качественно работать допустим с

02:30:44

этими

02:30:45

and переменными то есть такой пакет

02:30:47

который называется dating dating and m

02:30:55

по сути мы его устанавливаем сейчас мы

02:30:59

покажу как это сделать и на этом

02:31:01

закончим то есть мы его устанавливаем

02:31:07

дальше в nx конфиге мы должны прописать

02:31:10

вот такую строчку чем раньше тем лучше

02:31:13

то есть обычно на самом верху идет и

02:31:17

теперь мы можем создать переменную .

02:31:21

n в переменную говорю значит файл . даже

02:31:30

если них определенные плагины обычно вот

02:31:32

эти вот файлу они создаются потом

02:31:34

вручную в на январе mente

02:31:36

вот и не летят в какую-нибудь систему

02:31:38

контроля версий гид для того чтобы ваше

02:31:41

приложение было защищенным и здесь также

02:31:43

мы указываем open you are r равно ищите

02:31:48

теперь local

02:31:51

хвост 4300 у нас уже и теперь

02:31:56

соответственно мы можем здесь вместо

02:31:58

того чтобы хардкоре что-то написать

02:32:00

process and open gl таким вот образом и

02:32:06

он будет забран из этого inf файл а то

02:32:09

есть теперь допустим если вам нужно

02:32:11

будет запустить на другом января минти с

02:32:14

другими appy appy ирель то вы просто

02:32:19

можете создать этот файл и все у вас

02:32:21

будет работать так устанавливать cheers

02:32:24

не буду

02:32:25

давайте запустим проверим что все

02:32:27

работает

02:32:40

да и как видите теперь наше приложение

02:32:42

она хоть и не изменилась внешне но при

02:32:46

этом мы знаем что внутри она стала более

02:32:48

универсальным и более поддерживаемым

02:32:51

друзья на этом я думаю что мы закончим

02:32:54

мы очень много поговорили про основа и

02:32:56

next джесс я надеюсь что теперь вам

02:32:58

стало более непонятно как вообще эта

02:33:00

технология работает что такое сервер

02:33:02

сайт рендеринг

02:33:04

как вы можете это применять на практике

02:33:05

вы увидите что в целом хотите есть

02:33:08

определенный нюанс но это не очень

02:33:11

сложно да и с этим спокойно можно

02:33:13

взаимодействовать немного на чем-то

02:33:14

тренировались на typescript создавали

02:33:17

своим point is телеса с локальной то

02:33:20

есть мы проговорили много чего

02:33:21

интересного

02:33:22

поэтому друзья если вам такой контент

02:33:25

полезен потому что он находится в

02:33:27

открытом доступе я хочу чтобы вы

02:33:31

поставили лайк и подписались на канал

02:33:33

поставили колокольчик чтобы поддержать и

02:33:36

распространять бесплатный

02:33:37

образовательный контент также напишите в

02:33:40

комментариях что вам еще было бы

02:33:42

интересно вот таком формате послушать

02:33:44

про какие технологии

02:33:45

только перед этим посмотрите что уже

02:33:47

есть на канале потому что здесь есть

02:33:48

большое количество различных курсов уже

02:33:50

готовых и на этом мы с вами прощаемся

02:33:54

кстати если вам так же еще интересен

02:33:57

react to в описании под этим роликом

02:33:58

есть ссылки на курс в том числе и на

02:34:00

react или на другие мои курсы тоже

02:34:02

можете ознакомиться на много полезного

02:34:04

качественного материала но на этом у

02:34:06

меня сейчас все увидимся в других видео

02:34:09

благодарю вас за внимание

Описание:

Дорожная карта и экосистема React 2024 - https://result.school/products/react-developer Исходный код тут: https://t.me/js_by_vladilen/207 Я в соц сетях: Telegram: https://t.me/js_by_vladilen VK: https://vk.com/vladilen.minin Instagram: https://www.facebook.com/unsupportedbrowser Roadmap по каналу: https://vladilen.notion.site/Roadmap-YouTube-0b917095c1ec424e9574c2ede36efab9 NextJS - Курс в одном видео по всем элементам в фреймворке (Server Side Rendering на React) React - https://www.youtube.com/watch?v=xJZa2_aldDs Node - https://www.youtube.com/watch?v=3aGSqasVPsI Nuxt - https://www.youtube.com/watch?v=lm9olMCRCIc ES6 - https://www.youtube.com/watch?v=Ti2Q4sQkNdU Webpack - https://www.youtube.com/watch?v=eSaF8NXeNsA fetch - https://www.youtube.com/watch?v=eKCD9djJQKc JS 2020 - https://www.youtube.com/watch?v=7TpAN4FISeI TypeScript - https://www.youtube.com/watch?v=nyIpDs2DJ_c TS Продвинутый - https://www.youtube.com/watch?v=7NU6K4170As React + TS - https://www.youtube.com/watch?v=OvLWWvjoi8s Статья из видео: https://medium.com/@apalshah/next-js-how-to-make-your-own-progress-bar-indicator-component-easily-445e58777473 Исходный код в Telegram Канале: https://t.me/js_by_vladilen/207 Таймкоды: 00:00 - Что такое SSR и Next 14:36 - Установка Next 20:40 - Начало работы 25:54 - Роутинг и навигация 49:15 - SEO + Meta 54:40 - Создание Layout 1:06:29 - Стили, модули, SASS 1:14:48 - Страница 404 1:22:14 - Создание API мок сервера 1:33:30 - Загрузка данных 1:57:05 - getServerSideProps 2:00:30 - Индикатор загрузки 2:07:15 - Создание API 2:13:00 - TypeScript 2:26:40 - Next Config 2:34:12 - Классные рекомендации

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "NextJS Быстрый Курс - SSR на React JS"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "NextJS Быстрый Курс - SSR на React JS" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "NextJS Быстрый Курс - SSR на React JS"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "NextJS Быстрый Курс - SSR на React JS" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "NextJS Быстрый Курс - SSR на React JS"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "NextJS Быстрый Курс - SSR на React JS"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.