NextJS Быстрый Курс - SSR на React JS

Sdílet
Vložit
  • čas přidán 27. 07. 2024
  • Дорожная карта и экосистема React 2024 - bit.ly/3NxXf7z
    Исходный код тут: t.me/js_by_vladilen/207
    Я в соц сетях:
    Telegram: t.me/js_by_vladilen
    VK: vladilen.minin
    Instagram: / vladilen.minin
    Roadmap по каналу:
    vladilen.notion.site/Roadmap-...
    NextJS - Курс в одном видео по всем элементам в фреймворке (Server Side Rendering на React)
    React - • React JS Быстрый Курс
    Node - • Node JS - Быстрый Курс...
    Nuxt - • Nuxt JS - Vue + SSR (б...
    ES6 - • JavaScript ES6 - Полны...
    Webpack - • Webpack - Полный курс ...
    fetch - • Урок 14. JavaScript. З...
    JS 2020 - • Video
    TypeScript - • TypeScript - Быстрый К...
    TS Продвинутый - • TypeScript для продвин...
    React + TS - • Video
    Статья из видео: / next-js-how-to-make-yo...
    Исходный код в Telegram Канале:
    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 - Классные рекомендации
    #react #ssr #nextjs

Komentáře • 399

  • @VladilenMinin
    @VladilenMinin  Před rokem +5

    Исходный код тут: t.me/js_by_vladilen/207
    Получить профессию Frontend разработчика - bit.ly/3bvCM3f

  • @user-lg4md8wm8y
    @user-lg4md8wm8y Před 4 lety +8

    Как обычно все шикарно!! Спасибо за такое большое количество полезной информации)))

  • @andriyfedorchenko7936
    @andriyfedorchenko7936 Před 4 lety +14

    Спасибо. Наконец-то. Долго ждал видоса по Next.js. Но все равно сам изучил, а тут послушал обьяснения и мнение спеца)))

  • @egorkurkin356
    @egorkurkin356 Před 2 lety +2

    Мне так нравится, когда Владилен упоминает на правах рекламы свои курсы на своём блоге) Уровень уважения к аудитории на пределе! Спасибо за уроки, они очень помогают разобраться в технологиях!

  • @ProfessoRGM
    @ProfessoRGM Před 4 lety +1

    Очень крутой интерактив. Делай побольше таких!
    Набрал 8/8, тест заставил задуматься и повспоминать некоторые ответы на вопросы.

  • @aleksandrgradov7859
    @aleksandrgradov7859 Před 4 lety

    спасибо огромное!!!! просто супер! много слышал про данный фрэймворк, но слышал что сложный и по сколку я новичок, то не решался его начинать осваивать. Благодаря Вам и Вашим трудам теперь сижу изучаю! Спасибо!!!!

  • @DEN-tg1yp
    @DEN-tg1yp Před 4 lety +11

    Спасибо за труды!!!
    По телеге:
    Было бы здорово увидеть в таком же формате что-то типа «вопросы к собеседованию для фронтенда» и «вопросы к собеседованию для бэкенда»

  • @astrofox7532
    @astrofox7532 Před 3 lety +27

    Хорошие у вас быстрые курсы Владилен, спасибо большое! Я уже шесть лет занимаюсь фронтендом и очень ценю грамотную подачу информации как у вас. Вы не торопливо, словно присели рядом за компьютером и объясняете, очень доходчиво объясняете) Смотрю ваши курсы просто для повторения, но не смотря на это очень много нового подчёркиваю)

  • @Andrey53283
    @Andrey53283 Před 4 lety

    Просто уважение тебе! Все рассказал что хотелось услышать. И TypeScript затронул и про лоадер рассказал. Просто маст хев! Действительно невероятно интересная и удобная технология, буду теперь пользоваться. Спасибо за труды!

  • @ensi.creator
    @ensi.creator Před 2 lety

    Отличная подача, кратко и без воды. Спасибо за ролик!

  • @anazkomult
    @anazkomult Před 4 lety

    Как всегда шикарная инфа. Спасибо, Владилен!

  • @ilindev
    @ilindev Před 4 lety

    Отлично изъяснил для тех кто не понимает! Ждал чего-то нового. Спасибо за работу!

  • @peg-legantoine7151
    @peg-legantoine7151 Před 3 lety

    Крутой курс! Владилен как всегда очень понятно объясняет. Жду еще про Gatsby)

  • @sea-lucky7143
    @sea-lucky7143 Před 4 lety +81

    Отличный видос, зашел на ура! Хотелось бы увидеть скажем Next JS Продвинутый курс, где можно было бы заюзать SSG, какую-то аутентификацию, возможно работу с кастомным сервером, или токенами. В общем порыться в нем еще больше. Однозначно лайк, колокольчик и коммент, спасибо за контент!

    • @user-tt4mg2jq2b
      @user-tt4mg2jq2b Před 4 lety

      +

    • @CharismaSound
      @CharismaSound Před 4 lety +1

      Спасибо за урок. Качество подачи на высоте. Так же интересует SSG, JWT аутентификацию и как быть с api middleware без кастомного сервера. Пока юзаю next-connect. Ещё раз спасибо!!!!!

    • @ianpaddington3187
      @ianpaddington3187 Před 3 lety

      +

    • @user-fj8cl3by5k
      @user-fj8cl3by5k Před 3 lety +1

      Какая чушь

  • @khumoyuninoyatov5553
    @khumoyuninoyatov5553 Před 3 lety +11

    Спасибо за контент СЭНСЭЙ, жду видео про Formik. Было бы круто посмотреть продолжение данного видео с авторизацией или же соединения приложения на Next с Redux + Redux-Saga. =)

  • @dmitriysnow2571
    @dmitriysnow2571 Před 4 lety +31

    почитав комментарии по понял что не один я набрал 7/8 , интересно на что не ответил ))
    Владилен, как всегда низкий поклон в твоих стараньях ! Спасибо от души !

    • @wmagnet4839
      @wmagnet4839 Před 4 lety +3

      2й или 5й)
      на 2м - d
      на 5м - с
      Хоть они не верные оба, исходя из доков)

  • @undefin_ed9611
    @undefin_ed9611 Před 4 lety

    Офигенно! Теперь я и next.js почти знаю!)) Спасибо большое!!! Осталось добить typescript...

  • @mistercat9997
    @mistercat9997 Před 3 lety

    Спасибо, это одно самых лучших твоих видео!!)

  • @maximshevchenko6202
    @maximshevchenko6202 Před 4 lety +1

    Половину вопросов увидел впервые, но уметь гуглить и понимать информацию полезно, плюс узнал, что то новое и где об этом почитать. Формат квиз - вопросов понравился.

  • @tedgregor
    @tedgregor Před rokem

    Спасибо! Лично мне пошаговое воспроизведение твоих крэш-курсов помогает хоть что-то представлять о том, как это работает. Раньше была иллюзия, что если сесть крепко почитатть, то будет понятно, но это ошибка и путь к депрессии. Если хотябы повторять несколько раз пошагово - уже приходит что-то в ум, а если почитывать доки в перерывах - получается эффективно. Это очень круто.

  • @toni4i696
    @toni4i696 Před 2 lety

    Спасибо за знакомство с фреймворком! Очень полезно, теперь буду изучать TS))

  • @shazplay8878
    @shazplay8878 Před 4 lety +2

    Недавно интересовался Next.js, а тут видосик:))) Спасибо!)

  • @alexmaster1982
    @alexmaster1982 Před 4 lety

    Спасибо за ваши труди Владилен, с тестом круто придумали

  • @alex.frontender
    @alex.frontender Před 4 lety

    Спасибо большое за видео) действительно интересный контент и я закрепил свои пробелы по NextJS
    Хотелось бы увидеть ролик по StoryBook и как его применять на практике)

  • @user-yb8zd6gj2f
    @user-yb8zd6gj2f Před 9 měsíci

    Владилен ,спасибо за твой труд ! отличнейшее видео , понял часть проблемных моментов , которые не понимал по документации .

  • @snd5543
    @snd5543 Před 4 lety

    спасибо, как всегда все четко и по делу, ничего лишнего👍

  • @darkdivaroom
    @darkdivaroom Před 4 lety

    Большое спасибо! Очень интересный курс и отличная работа.

  • @user-cr3yl3gq9d
    @user-cr3yl3gq9d Před 4 lety

    спасибо за видео, очень хорошо рассказали. Еще очень интересно было бы услышать в таком же формате про Gatsby js

  • @elementalhero9939
    @elementalhero9939 Před 2 lety

    Просто пушка курс. Владилен ты лучший. Смотрю с удовольствием.

  • @fedoskamcha3768
    @fedoskamcha3768 Před 4 lety

    друг! ты красавец! как же мне не хватало на моем проекте spa этих знаний хоть это и ssr )))))) большое человеческое спасиьо!) Мне дали тестовое на nextjs и как вводное видео это бомба!

  • @MegaMaxxon
    @MegaMaxxon Před 3 lety

    Супер! Отличный ролик по теме Next.js. Спасибо!

  • @eugenia9999
    @eugenia9999 Před 4 lety

    оооо, как же это прекрасно !!))) спасибо огромное !!)))

  • @user-gi7oc4hp9g
    @user-gi7oc4hp9g Před 3 lety

    Реально классно, а что интересно, все что надо, правда поверхностно, но главное что направление задано!)

  • @YellowManPsypeople
    @YellowManPsypeople Před 3 lety

    Благодарю. как обычно годный материал и подача. Смотрел правда на скорости 1.5. Благо, можно спокойно ускорять.. замедлять менее приятно получается.
    Пойду смотреть видос про новые операторы)).

  • @aysommer
    @aysommer Před 4 lety

    Все понятно и доступно. Как чувак с опытом - быстро влился в SSR, мне понравилось.

  • @user-ju1zv4bk3h
    @user-ju1zv4bk3h Před 2 lety

    Как всегда хорош, Владилен! Лайк)

  • @nodirayakubova6395
    @nodirayakubova6395 Před 3 lety

    Большое спасибо тебе,спасибо что ты есть,продолжай в том же духе))

  • @user-wy1bp6ty2c
    @user-wy1bp6ty2c Před 11 měsíci

    Качество топ, спасибо большое))

  • @user-hj4cw8st5i
    @user-hj4cw8st5i Před 2 lety

    Благодарю за труд! Вы очень многое делаете для нас

  • @kezukikezu3909
    @kezukikezu3909 Před 4 lety +1

    Интересный формат доступа к курсу)

  • @Kerimliful
    @Kerimliful Před 3 lety +2

    Хотел просто ознакомиться в течении 10 минут)))) , но блин настолько интересно и внятно информация передается что аж хочется смотреть и смотреть)) и так кстати просидел все 2:34:31))СПАСИБО!!!

  • @rebel6052
    @rebel6052 Před 4 lety +1

    Классно все объясняешь, спасибо!

  • @user-lq4ms6bk8n
    @user-lq4ms6bk8n Před rokem

    Как всегда качественный курс, спасибо!

  • @yaroslavdraha9251
    @yaroslavdraha9251 Před 4 lety +1

    Заценил фишку с телегой! Чувак, у тебе крутые и понятные видеоуроки!

  • @AndrewOBannon
    @AndrewOBannon Před 4 lety +2

    Я только начал изучать веб дев, подумал "ладно, зайду гляну просто что такое nextjs" и залип до конца видео. )) Спасибо.

  • @user-nd9rp5tn5v
    @user-nd9rp5tn5v Před 4 lety +1

    Шикарно, спасибо!

  • @istoric7221
    @istoric7221 Před 2 lety

    Спасибо! Браво Владлен Минин. NextJs

  • @Zadorozhniy39
    @Zadorozhniy39 Před 4 lety

    спасибо Владилен за работу )

  • @xxxJohn1955
    @xxxJohn1955 Před 2 lety

    Просто молодец, спасибо! Отличный курс

  • @DenisMikhalev
    @DenisMikhalev Před 3 lety

    Годнота подъехала) Спасибо!

  • @innabaikova929
    @innabaikova929 Před 3 lety +2

    Владилен, спасибо за курс! Как всегда четко и по делу) Для тех, кто будет смотреть курс и использовать версию 9.5.3 и выше - для динамических ссылок больше не нужно использовать декоратор as: nextjs.org/docs/api-reference/next/link

  • @123Den4ik123
    @123Den4ik123 Před 4 lety +2

    Как всегда шикарный курс, особенное спасибо за блок с typescript но очень хотелось бы дополнение с подключением Redux, потому как с Next js это уже не совсем тривиальная задача.

  • @user-xd1on3gr8q
    @user-xd1on3gr8q Před rokem

    Все понятно и четко обьяснили, хороший канал.

  • @vladimirv.myagdeev4221
    @vladimirv.myagdeev4221 Před 4 lety +1

    Спасибо за подарок на ДР)))

  • @gabblz480
    @gabblz480 Před 4 lety +2

    Спасибо за видео, как всегда очень полезно, есть вопрос к тебе, планируется ли когда-нибудь выпустить ролик про профилирование кода? Или сделать мини-курс поэтому

  • @sergk393
    @sergk393 Před 2 lety

    Спасибо, даже на ускоренном 2х видео все было понятно)

  • @user-qg4rg8zs5l
    @user-qg4rg8zs5l Před 4 lety

    Суперский курс, огромное спасибо!
    Был бы особо благодарен, если бы вы показали как создать такое же SSR приложение только на Express.

  • @rinatkhusainov5894
    @rinatkhusainov5894 Před 3 lety

    Спасибо! Перехожу с Nuxt на Next, потому что лучше хочу освоить React, jsx. Отличный ролик, советую для тех, кто хочет закрепить материал - пройти официальный tutorial. Там можно более детально прочитать насчет SSR, рендеринга во время build, отличие и использование. Отличие ролика Владилена от туториала - там говорится про getStaticPaths - пропс, передаваемый в динамический роут, где должны описываться все пути

  • @romangromov7606
    @romangromov7606 Před 2 měsíci

    Владилен, Вы хороший педагог. Сложные вещи объясняете простым языком. Спасибо!

  • @TheVirtyoz777
    @TheVirtyoz777 Před 3 lety

    Владилен поддержу того кто писал что ждем продвинутый next js + работа с реально бд, mongo например !

  • @mikhailanazarov
    @mikhailanazarov Před 3 lety

    Отличный курс! Спасибо.

  • @mikewazowski7526
    @mikewazowski7526 Před rokem

    Очень понравился курс, спасибо! Чётко, лакончино, подсветил возможные проблемы (например, почему не ок использовать useEffect)

  • @mikewazowski7526
    @mikewazowski7526 Před rokem

    Круто, что предложил поставить на паузу и подумать самим

  • @prorok888
    @prorok888 Před 4 lety +64

    формат с доступом через квиз - интересный +

  • @Pr0xytube
    @Pr0xytube Před 4 lety

    Спасибо за ролик. Было довольно полезно.

  • @dmitry9463
    @dmitry9463 Před 3 lety

    Супер классный урок по нексту. Хотелось бы еще увидеть продвинутый урок с использованием Redux, GraphQL, SSE...

  • @vadicus6534
    @vadicus6534 Před rokem

    Классный ролик. Спасибо, Владилен.

  • @osmon-11
    @osmon-11 Před 4 lety

    вот про эту тему по больше курсов пожалуйста, очень интересная тема

  • @annagardt2360
    @annagardt2360 Před 2 lety

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

  • @mixtronika
    @mixtronika Před rokem

    Спасибо, дорогой!
    Видео очень помогло 🙏🙏🙏

  • @robocip89
    @robocip89 Před 3 lety

    у тебя для всего есть быстрый курс) спасибо

  • @raufhashimov241
    @raufhashimov241 Před 4 lety +1

    Курс супер.Если сделаете в udemy полный курс по NextJS то я буду первым из тех кто купит его :). Спасибо огромное и удачи вам.

  • @GrOm_SG
    @GrOm_SG Před 4 lety

    Отличненько. Как раз недавно один мини-сайт сделал на Next.js, но чувствую что не использовал все что можно было.

  • @user-mi4ms5be1o
    @user-mi4ms5be1o Před 2 lety

    Спасибо, посмотрел на одном дыхании.

  • @linarau8006
    @linarau8006 Před 3 lety

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

  • @hamletmargaryan6764
    @hamletmargaryan6764 Před 4 lety

    Круто придумано!)

  • @user-hm9yv3qh2p
    @user-hm9yv3qh2p Před 2 lety +1

    Очень полезная информация и хорошо изложены основы. Был бы отдельно благодарен если бы осветили ситуацию когда нам нужно получить данные один раз для header или footer и сделать из доступными для всех страниц

  • @RewCSharp
    @RewCSharp Před 7 měsíci

    Спасибо за курс!

  • @B_G_V
    @B_G_V Před rokem +7

    Было бы круто увидеть такой же урок, но для 13 версии Next.
    13 версия, как я понял сильно отличается от предыдущих.
    А если бы там был еще TS и Recoil (стейт-менеджер), то цены бы не было такому уроку :)

  • @dmytrofiialo4818
    @dmytrofiialo4818 Před 3 lety

    Спасибо за работу!

  • @user-in9bh7xn7n
    @user-in9bh7xn7n Před 2 lety

    Спасибо большое, по работе очень помогает

  • @user-fo8zl6iw9u
    @user-fo8zl6iw9u Před 3 lety

    Хорошая и качественная работа. За час (на х2) можно понять что это за конь и как на нем ездить. Великолепно!

  • @user-sq1lc2sm3b
    @user-sq1lc2sm3b Před 4 lety +1

    Неистовый лайк тебе, человече!!! Деплой, расскажи про деплой, эта информация просто жизненно необходима. Не деплой на сервис типа Хероку, а на обычный кастомный сервер, чтоб совсем усложнить и развить идею - на IIS!!)))

  • @pannihto7588
    @pannihto7588 Před 3 lety

    Респект за качественный и полезный контент

  • @alex-kobrin
    @alex-kobrin Před 3 lety

    Спасибо, если посмотрел 40 минут и не выключил , одназначно досмотрю до конца. Понятно объясняешь.

  • @steelhead4590
    @steelhead4590 Před 3 lety

    спасибо, очень крутое видео. Посмотрел с удовольствием

  • @Maratreason
    @Maratreason Před 3 lety

    Афигенный курс!

  • @alsergio6506
    @alsergio6506 Před 4 lety

    Пока гуглил ответы для прохождения теста - уже прокачался)

  • @dan28012000
    @dan28012000 Před 4 lety

    Спасибо за классный курс!
    Очень понравилось, но хотелось бы поподробнее узнать о данной технологии, курс на udemy или Вашем сайте был бы идеальным вариантом ))
    Кому также было бы интересно 👍🏻

  • @BbooyWind
    @BbooyWind Před 2 lety

    Спасибо большое за обзор!

  • @user-ht9qb4fg6c
    @user-ht9qb4fg6c Před 3 lety

    Thanks, cool tutorial. Helped me understand next js

  • @user-je7ib6qe8y
    @user-je7ib6qe8y Před 3 lety +1

    что интересно? ещё про next!! всё огонь, но хочется ещё)) давай next2.0))

  • @MaximM999
    @MaximM999 Před 3 lety

    классный курс, спасибо!

  • @pargevsargsyan332
    @pargevsargsyan332 Před 4 lety +15

    спасибо
    Владилен за контент, огромная просьба можешь снять видео про овтаризацию с автоабнавлением токена на express ,jwc token и react

    • @graezzywormz1438
      @graezzywormz1438 Před 4 lety

      выкинь express используй Koa

    • @svk29
      @svk29 Před 3 lety

      @@graezzywormz1438 выкинь коа используй nest

  • @alexeikekin1848
    @alexeikekin1848 Před 4 lety +1

    Очень информативный и крутой ролик вышел! Благодарю тебя за твою работу и труд! По моему мнению - лучший русскоязычный контент, все доступно, понятно и полезно. Продолжай в том же духе! Спасибо!

  • @user-vw2mk3il9w
    @user-vw2mk3il9w Před 4 lety +1

    вышла новая версия некста!! фича решение проблоем с корсом!! Владилен, надо пилить продолжение)

  • @d9m0n21
    @d9m0n21 Před 4 lety

    Владилен, контент однозначно ТОП! Хотелось бы в твоем изложении посмотреть информацию про ВебСокеты на каком нибудь простеньком примере =) Спасибо =)

    • @VladilenMinin
      @VladilenMinin  Před 4 lety

      На канале есть плейлист с чатом)

  • @catherinesamurai2277
    @catherinesamurai2277 Před rokem

    спасибо, мужик. ты крутой!

  • @tigranovakyan4913
    @tigranovakyan4913 Před 2 lety

    Просто бомба)))

  • @URAGAN558
    @URAGAN558 Před 4 lety

    Спасибо огромное))