Next JS быстрый курс SSR на React JS с нуля до деплоя

  Переглядів 140,325

Ulbi TV

Ulbi TV

День тому

В этом курсе мы на практике рассмотрим фреймворк для SSR на React, который называется Next js. Рассмотрим основные возможности и сделаем deploy на Vercel.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на исходный код - github.com/utimur/next-course
Таймкоды:
00:00 - Теория
01:12 - Настраиваем проект
02:00 - Роутинг и постраничная навигация
05:37 - Динамическая маршрутизация
08:20 - useRouter
09:20 - Файл _app.js. Глобальные стили
11:20 - Стили для отдельных компонентов. [name].module.css
13:57 - Подключаем препроцессор SASS\SCSS
15:00 - Запросы на сервер. getStaticProps и getServerSideProps
20:40 - SEO оптимизация. META теги
22:00 - Контейнеры компонентов
24:56 - 404 Кастомная страница с ошибкой
25:40 - Деплой на хостинг
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

КОМЕНТАРІ: 348
@dmitrykorenko9033
@dmitrykorenko9033 3 роки тому
Целую минуту потратил на вступление.... Можно было бы за это время ещё один проект сделать хД
@UlbiTV
@UlbiTV 3 роки тому
Не люблю лить воду 😂😂
@hutoryanin
@hutoryanin 3 роки тому
😁
@qwekle456
@qwekle456 3 роки тому
Не могу нарадоваться что есть такие люди, столько инфы и без воды, да ещё и за пол часа Нравится =)
@maksrygaev3900
@maksrygaev3900 2 роки тому
Все как обычно, один из лучших учителей по разработке в рунете, спасибо чувак!
@l_Chunga_l
@l_Chunga_l Рік тому
Не могу передать ту величену моей благодарности за все ваши труды! Огромное спасибо!
@whyareyou6072
@whyareyou6072 Рік тому
Я обычно не оставляю комментарии , но этот видео заставило меня сделать обратное. Этот человек прекрасно объясняет весь материал, отличная структура видео, нет никакой лишней информации, всё кратко и понятно. Желаю автору видео процветание. Спасибо за ваш контент!
@kirillshapovalov495
@kirillshapovalov495 3 роки тому
Невероятно огромное спасибо тебе за этот и все остальные курсы! Все четко, ясно и без воды. Успехов тебе в твоей деятельности!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо, Кирилл! Стараюсь! И тебе успехов!
@gritsienkooleg3447
@gritsienkooleg3447 Рік тому
Господи, Тимур, спасибо! Оказывается те технологии, которые я только сейчас для себя открываю, ты уже так шикарно отснял! Спасибо ))
@irinamyskoooo
@irinamyskoooo 2 роки тому
Как всегда- лучшая подача и объяснение👏🏻
@lastink444
@lastink444 2 роки тому
Просто лучший. Настолько концентрированный и "сухой" контент. Как всегда топ. Огромное спасибо!
@mrWiled
@mrWiled Рік тому
Я. Просто. В восторге! Как же круто подан материал. Это то что мне сейчас было нужно - сжатая, ёмкая, структурированная инфа по nextJS. Спасибо!
@myroadtodream
@myroadtodream 2 роки тому
Захожу на канал и сразу ставлю лайки за качество и доступность. Спасибо, добрый друг тебе!
@user-hk3qj9bd1h
@user-hk3qj9bd1h 2 роки тому
Очень крутое и быстрое погружение! Моя благодарность!
@cseedrvr6627
@cseedrvr6627 3 роки тому
Ты прям штампуешь контент в новом году, респект, как раз сср начал изучать
@UlbiTV
@UlbiTV 3 роки тому
Стараюсь, спасибо!)
@user-hy7uu2yf9z
@user-hy7uu2yf9z 2 роки тому
Отличный ролик, всё коротко и по существу, спасибо) :3
@NikolayKrishtopa
@NikolayKrishtopa Рік тому
Это просто великолепно. За полчаса просто тонна информации, и при этом все доходчиво. Спасибо!
@Art-M
@Art-M Рік тому
Огромное спасибо, за вашу работу! Успехов и процветания!
@romanr5843
@romanr5843 Рік тому
очень круто! спасибо! смотрю после фундаментального курса по react и type script.
@innaponomareva
@innaponomareva 2 роки тому
Спасибо, Тимур!!! Как всегда коротко и по делу! 🌟🌟🌟🌟🌟
@69hp_pubg
@69hp_pubg 3 роки тому
Ооо спасибо, отличный подарок на новый год. Успехов тебе
@UlbiTV
@UlbiTV 3 роки тому
Спасибо Арман!) И тебе успехов!)
@anastasya2399
@anastasya2399 2 роки тому
Спасибо за урок! Очень понятно и без лишней воды!
@mishamad
@mishamad 2 роки тому
как всегда супер! не останавливайся пожалуйста))
@djgrownsbeats4324
@djgrownsbeats4324 Рік тому
Просто огромное спасибо! Очень профессионально сделано! Изучил аж две новых технологии!)
@excusememuar
@excusememuar Рік тому
прекрасный урок, за полчаса очень много полезной информации даже для уровня middle
@user-lh8th3hm9j
@user-lh8th3hm9j 2 роки тому
Молодец, кратко, быстро, доступно. _app.js также как и _document.js не будут автоматом подхватываться из-за нижнего подчеркивания снизу.
@MrNamed
@MrNamed 2 роки тому
Классное начало, огромное спасибо за понятное изложение.
@user-jh6oc2gi6c
@user-jh6oc2gi6c 3 роки тому
ты лучший) спасибо за то что помогаешь войти в ИТ сферу)
@justlikemusic7534
@justlikemusic7534 Рік тому
Спасибо за ролик Только начал знакомство с Next , вы очень помогли
@ipa_stor
@ipa_stor 3 роки тому
Воу воу воу, полегче!!! Ничего себе ты разогнался:) жара🤩 Кстати, я понял, ты решил наделать суперконцентраты, а потом просто в плейлист: "всё веб-программирование за 2 недели"🤣🤣🤣
@UlbiTV
@UlbiTV 3 роки тому
Ахах)) Ну честно сказать почти такой план и есть, я хочу сделать по большинству тем веб разработки подобные ролики, чтобы человек мог зайти на мой канал и найти все, что ему необходимо!)
@ipa_stor
@ipa_stor 3 роки тому
@@UlbiTV да, я понимаю, просто интересно потом понять, за какое реально время можно будет просмотреть блок роликов(марафоном) в отличие от "купите 3-х месячный экспресс-курс по css" или типа того, я вот уже напоролся на это, взял почти 4х часовое видео по ui/ux, а получил оттуда ровным счетом 4 потраченных часа жизни:)))))
@user-yv4tn5ll9z
@user-yv4tn5ll9z 2 роки тому
Самая искреннея благодарность. Спасибо! Выжимка мего крутая.
@greennmrtnm3342
@greennmrtnm3342 Рік тому
Супер полезный курс! Думаю, самый лучший канал по обучению программированию! Спасибо большое за труд!
@user-uz7ok7vl2j
@user-uz7ok7vl2j 2 роки тому
Четко, ясно, коротко, без воды!!! Оч круто!!! Спасибо!!!
@alexeybiryukov2961
@alexeybiryukov2961 9 місяців тому
Спасибо! Без воды и то, что нужно, чтобы быстро вникнуть в технологию.
@PieceOfInternet
@PieceOfInternet 2 місяці тому
Спасибо за отличный курс!! Как всегда круто
@user-hj4cw8st5i
@user-hj4cw8st5i 2 роки тому
Благодарю за труд! Вы очень многое делаете для нас
@SvitlanaYudina
@SvitlanaYudina Рік тому
Спасибо!)) Когда нужно быстро что-то понять, сразу иду на этот канал) Ты - лучший!)
@user-hb4vd1ld4s
@user-hb4vd1ld4s 3 роки тому
Супер! Молодец! Очень понравилось то, что действительно все по существу и без ненужных пауз. И только возник вопрос, как тут же или чуть позже ты это показываешь. Реально круто. С удовольствием посмотрел. Без обычной тямоготины как это бывает у других.
@UlbiTV
@UlbiTV 3 роки тому
Спасибо огромное, очень мотивируют такие коменты, а насчет тягомотины, я просто озвучку делаю после записи ролика, вырезаю все лишнее, поэтому они получаются гораздо короче, чем у остальных
@user-hb4vd1ld4s
@user-hb4vd1ld4s 3 роки тому
@@UlbiTV вангую, что в скором времени твой канал наберёт большую популярность, я уже порекомендовал своим коллегам канал и они высоко его оценили. Аналогов по такому качеству подачи, структурированности и таймингу просто нет. По началу я, смотря сначала на длительность твоих видео, сомневался, что там будет подробно и качественно подаваться материал, но теперь меня это постоянно радует. У остальных авторов большая длительность очень пугает и не зря, т.к. много лишнего в виде отвлеченной информации, сопения, попердывания и прочего. Я так и подумал, что ты озвучивашь ролики после записи и это у тебя получается очень органично без какого-то унылого зачитывания текста, а с неким присутствием в процессе здесь и сейчас. Желаю процветания тебе и каналу!!!
@user-bc5he2ng3i
@user-bc5he2ng3i 5 місяців тому
Спасибо тебе огромное, Тимур! Быстро и понятно) Продолжай, пожалуйста)
@user-wy9gh3lw3q
@user-wy9gh3lw3q 3 роки тому
Отличный урок! Огромное спасибо)
@SemenAlexndrovich
@SemenAlexndrovich 2 роки тому
Классный материал. Самую главную инфу рассказал. Спасибо!
@fairy-tale-composer
@fairy-tale-composer 2 роки тому
Удобно, что и бекенд-проекты можно выложить на бесплатный хостинг. Урок как всегда на высоте! Доступно, понятно и затягивает)
@mykhailostepanishchev6472
@mykhailostepanishchev6472 3 роки тому
очень инетерсно и доступно,спасибо !
@damirtokkuzhin2872
@damirtokkuzhin2872 3 роки тому
Автор нереальный молодец и трудяга!) Как ты поднимал знания?)
@UlbiTV
@UlbiTV 3 роки тому
Спасибо большое!) что то с универа, что то с книг, что то с документации, что то с видео роликов, всего понемногу!) главное практиковать
@user-sj4oy1el5y
@user-sj4oy1el5y 3 роки тому
@@UlbiTV а сколько лет в общем ты уже занимаешься?
@meta_verse_mastery
@meta_verse_mastery 2 роки тому
Вообще просто и понятно, без соплей, красава.
@user-mn2po8ns2z
@user-mn2po8ns2z 2 роки тому
крч досмотрел, как всегда очень крутой, один из лучший каналов по js!
@devorer77
@devorer77 2 роки тому
Спасибо, дружище! У меня на новом проекте как раз next. Уже работаю - отличный туториал!
@ArtiomNeganov
@ArtiomNeganov 2 роки тому
Отличный ролик, просто пять баллов! Сжато, по теме, наглядно. Подписка! Давно хожу вокруг Next.js, но ни разу не удосужился что-то про него узнать. Теперь имею представление, хотя, конечно, осталось много вопросов, правда, выходящих за рамки этого видео. Есть один лендинг, который я давно хочу сделать, наверное использую для него Next.js.
@user-nl1qk9rm5e
@user-nl1qk9rm5e 3 роки тому
Очень и очень круто, больше спасибо!!!
@free_Belarus_free_Ukraine
@free_Belarus_free_Ukraine 6 місяців тому
Спасибо огромное. До интервью мне остается чуть больше часа, на скорости 1.75 подчерпнул основные моменты и готов к интервью по азам технологии. Конспект по видео под рукой
@error-md1sh
@error-md1sh 3 роки тому
Спасибо за контент. Познакомился с Next'ом
@UlbiTV
@UlbiTV 3 роки тому
Спасибо!)
@ma1abakiev
@ma1abakiev Рік тому
ЛУЧШИЙ УЧИТЕЛЬ! ПРОШУ ТЕБЯ, НЕ ОСТАНАВЛИВАЙСЯ
@serg1221
@serg1221 3 роки тому
Респектище! Четко именно про то, чем славится Next, без всякой левой ерунды
@UlbiTV
@UlbiTV 3 роки тому
Старался, спасибо!)
@gkhdscjud
@gkhdscjud Рік тому
Самый крутой курс 🔥 Спасибо!
@theabyssofmythink6522
@theabyssofmythink6522 Рік тому
Просто лучший! Спасибо за качественный контент!!
@a.osethkin55
@a.osethkin55 3 роки тому
Шикарно! Спасибо!
@AlexRudOy4ik
@AlexRudOy4ik 3 роки тому
шикарное видео, без воды и по делу. респект!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо дружище)
@Ramosok
@Ramosok 11 місяців тому
Супер, как всегда всё коротко чётко и по делу.
@barbatage5078
@barbatage5078 3 роки тому
Класс) и кто же этот чел, который на такую годноту ставит дизлайк?!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо!) очень приятно получать такие комментарии!)
@user-xr4rd3pm1v
@user-xr4rd3pm1v Рік тому
Спасибо за шикарный видос Всё чётко и понятно !!!
@vikalindeman9315
@vikalindeman9315 2 роки тому
Очень полезно, как раз дали тестовое недавно, по твоему видео быстро разобралась где у меня что не получалось
@neckalas5759
@neckalas5759 3 роки тому
Спасибо.Интересно будет посмотреть на electronjs + react
@UlbiTV
@UlbiTV 3 роки тому
Спасибо за отзыв!) електрон будет, но когда пока не скажу, с тайм менеджментом беда)
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 роки тому
Спасибо за видео! Еще один проект в очередь для практики.
@UlbiTV
@UlbiTV 3 роки тому
Спасибо за отзыв!) да, попрактиковать стоит!)
@user-rm7oz4xu3k
@user-rm7oz4xu3k Рік тому
Бомба, отличный материал что бы вкатиться в происходящее)
@user-ie7md3mm6x
@user-ie7md3mm6x 2 роки тому
Просто ахеренно полезный ролик, спасибо огромное, кайф!)
@yaroslavzef7267
@yaroslavzef7267 4 місяці тому
Спасибо ! Как раз надо было решить вопрос с SSP. Помог мне)
@user-dw4pi5gy7t
@user-dw4pi5gy7t 5 місяців тому
Большое спасибо! кайфовые ролики.
@margokomilfo4428
@margokomilfo4428 3 роки тому
Спасибо за полезняху!!! Мне очень помог этот видос! Крут! :) успехов!!!!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо вам!) На канале много интересного, рекомендую
@omnomnom1323
@omnomnom1323 2 роки тому
Спасибо:) минимум воды и самое полезное для старта👏
@kolyabokov88
@kolyabokov88 3 роки тому
Все знал таки в общих чертах, но все ровно как на одном духу до конца глянул)
@UlbiTV
@UlbiTV 3 роки тому
Спасибо!)
@user-ve2yl5gy3v
@user-ve2yl5gy3v 2 роки тому
Спасибо тебе, все по делу, без воды. Если у тебя к видео еще будет пару задач для практики, вообще будет пушка! (Но это уже дополнение)
@EvilGazz
@EvilGazz 2 роки тому
Огонь!!!! Офигенный курс!!!!
@Valeryi07
@Valeryi07 3 роки тому
Молодца!! Как всегда полезный контент!!👍
@UlbiTV
@UlbiTV 3 роки тому
Спасибо!)
@user-kz8il6ft3e
@user-kz8il6ft3e Рік тому
очень круто, спасибо за такие видосы!
@omg-go4vf
@omg-go4vf Рік тому
вовремя же я нашел next.js и тебя! Спасибо.
@user-su1xy9vu7l
@user-su1xy9vu7l 4 місяці тому
Огромное спасибо! То что нужно.
@Sergey-mr6be
@Sergey-mr6be 7 днів тому
Просто замечательно. Содержательнее не бывает.
@evamaria9142
@evamaria9142 2 роки тому
огонь спасибо
@user-gj4mn3rg4l
@user-gj4mn3rg4l 3 роки тому
мужик ты крут!! удачи тебе! и роста каналу!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо огромное, поддержка колосальная!)
@rosxpyct1132
@rosxpyct1132 2 роки тому
годно, спору нет
@arturmusienko397
@arturmusienko397 2 роки тому
Мааааксимально крутой и познавательный ролик!!!
@focusedzed
@focusedzed 2 місяці тому
Очень быстро и подробно, спасибо!
@DevBer
@DevBer 2 роки тому
Как всегда пушка! Спасибо!
@lazys7151
@lazys7151 Рік тому
Спасибо! Суперполезный видос как всегда
@user-rd8uh2ym3c
@user-rd8uh2ym3c 2 роки тому
Кратко и по существу. Молодец
@saimanXYZ
@saimanXYZ 3 роки тому
Мне как backend LEMP, LAMP, было довольно полезно и эффективно, молодец, без воды и прочего. Четко и по делу!
@UlbiTV
@UlbiTV 3 роки тому
Круто, спасибо!)
@HTMLHarbor
@HTMLHarbor 3 роки тому
Спасибо за замечательную работу 🚀🚀🚀
@UlbiTV
@UlbiTV 3 роки тому
Спасибо вам!
@vladyslavfx3892
@vladyslavfx3892 3 роки тому
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
@user-hc9cs4wp3c
@user-hc9cs4wp3c 3 роки тому
Самый лучший блогер
@UlbiTV
@UlbiTV 3 роки тому
Спасибо ☺️
@wardog4244
@wardog4244 3 роки тому
Топчик! Уже не удивляюсь, каждьій вьіпуск в десятку, а теперь еще ит ТС пошел, бомба!
@disconnect355
@disconnect355 3 роки тому
Интересно и полезно. Автор молодец. Спасибо!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо за поддержку!)
@user-iw7wr5yk1d
@user-iw7wr5yk1d 3 місяці тому
спасибо за урок всё чётка и ясно за пол часа
@user-pd9no5ye5g
@user-pd9no5ye5g 3 роки тому
Как всегда воды 0, концентрация полезной инфы зашкаливает, подача на высшем уровне, рекомендую всем твой канал, спасибо (контент настолько годный что из 2х колокольчиков на всех подписках 1 у тебя)))
@UlbiTV
@UlbiTV 3 роки тому
За колокольчик отдельное спасибо))
@rtodi4367
@rtodi4367 2 роки тому
Качественный контент. Лайк и подписка
@user-yf1to3lf1d
@user-yf1to3lf1d Рік тому
Классный материал, спасибо!
@user-st2fi5fj1h
@user-st2fi5fj1h 3 роки тому
отличный канал, все быстро, четко и по делу
@UlbiTV
@UlbiTV 3 роки тому
Спасибо друг!) очень рад слышать
@jeanmarcgourier
@jeanmarcgourier 2 роки тому
Спасибо за курс
@iGotton
@iGotton 3 роки тому
Кому слишком быстро и сжато - идите к Минину, там тажа инфа, но на 2 часа больше.) Я посмотрел сначала его, потом добил этим и закрепилось как надо.)
@UlbiTV
@UlbiTV 3 роки тому
Старался сделать быстрый курс с основами) Чтобы не затягивать!) спасибо)
@virtual_mary
@virtual_mary 2 роки тому
@@UlbiTV ценю тебя за это
@thefotongames1626
@thefotongames1626 8 місяців тому
Ты вообще красава, давай удачи, целую обнимаю❤
@sarxanabdullayev6440
@sarxanabdullayev6440 3 місяці тому
Спасибо за урок!
@user-rj1eg8jw2x
@user-rj1eg8jw2x 2 роки тому
Очень полезный ролик🔥
@Dika777
@Dika777 Рік тому
Молодец! и спасибо 1000 раз!
NextJS 13. Быстрый старт
40:12
Михаил Непомнящий
Переглядів 101 тис.
Анита просто на химии, поэтому такая сильная
00:21
Женя Лизогуб SHORTS
Переглядів 2,8 млн
Помилка,  яку зробило військове керівництво 🙄
01:00
Радіо Байрактар
Переглядів 412 тис.
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 8 млн
Все виды Server-side рендеринга в NextJS: SSR, CSR, SSG, ISR
14:39
Веб-разработка - DevMagazine
Переглядів 19 тис.
NextJS Tutorial - All 12 Concepts You Need to Know
44:38
ByteGrad
Переглядів 204 тис.
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Переглядів 40 тис.
NestJS Быстрый Курс. Express на максималках
1:14:36
Владилен Минин
Переглядів 168 тис.
ИГРОВОЙ ПК от DEXP за 37 тысяч рублей из DNS
27:53
Ремонтяш
Переглядів 393 тис.
НЕ ПОКУПАЙТЕ НОВЫЙ СМАРТФОН, ПОКА НЕ ВЫШЕЛ ЭТОТ [2024]
13:25
Thebox - о технике и гаджетах
Переглядів 59 тис.
Это новые российские SSD! Ну почти… 🙂
1:00
iPhone - телефон для нищебродов?!
0:53
ÉЖИ АКСЁНОВ
Переглядів 3,7 млн