NextJS 13. Быстрый старт

Поділитися
Вставка
  • Опубліковано 4 сер 2024
  • Знакомимся с NextJS - главным фреймворком для React. Разбираемся с базовыми возможностями: роутингом, SEO настройками, SSR с серверными компонентами, получение данных на сервере.
    Тайм-коды:
    00:00 Анонс темы
    02:04 Создание next приложения
    04:07 Создание страниц
    05:10 Включение Turbopack
    05:56 Обзор дефолтного содержимого
    07:09 Разбор корневого layout
    08:57 Meta-данные
    09:55 Создание шапки с меню и подвала
    12:18 Файловый роутинг
    15:56 Дополнительные layout
    18:28 Добавление meta для новых страниц
    19:33 SEO данные для динамических страниц
    20:53 Серверные компоненты
    23:13 Получение данных на сервере и кэширование
    29:54 Серверные логи
    30:55 Файлы loading и error
    34:55 Итоги проекта
    35:51 Публикация на Vercel
    Мои курсы по вебу с купонами:
    ✅ mishanep.com/
    📢 Поддержка канала:
    / mishanep
    www.tinkoff.ru/rm/nepomnyasch...
    paypal.me/mishanep
  • Наука та технологія

КОМЕНТАРІ • 290

  • @user-nk6ih7uh1h
    @user-nk6ih7uh1h Рік тому +124

    Next JS - это просто топ. Надеюсь, контента по нексту будет побольше
    Большое спасибо за видео!

  • @MrAlexVelik
    @MrAlexVelik Рік тому +49

    Миша, шикарное знакомство с Next JS, спасибо тебе большое! Было бы здорово увидеть ещё контент по Нексту)

  • @yurisorokin8016
    @yurisorokin8016 Рік тому +1

    Замечательная подача материала, спасибо. Очень интересная технология. Жду продолжения!

  • @user-pi1vr6rf1k
    @user-pi1vr6rf1k Рік тому

    Как обычно великолепная подача материала. Максимально доступно и понятно. При этом никакой воды 👍

  • @IgorWolf
    @IgorWolf Рік тому +7

    Спасибо за Ваш труд, Михаил. Как обычно все лаконично, все по теме, без лишней воды. Жду продолжения.

  • @artyomnazarov8518
    @artyomnazarov8518 Рік тому +1

    Супер! Шикарный обзор по Next JS. Ждем больше видео на эту тему)

  • @anton7p704
    @anton7p704 Рік тому +26

    Михаил, большое спасибо, было бы здорово увидеть еще видео по next js

  • @abilitydrafter
    @abilitydrafter Рік тому +3

    Спасибо за Ваш труд! Надеюсь цикл видео по NextJS продолжится

  • @artmus9687
    @artmus9687 Рік тому

    Самый понятный и интересный урок по Next JS, спасибо за работу!

  • @helloglobalme9689
    @helloglobalme9689 Рік тому +1

    Прям на одном дыхании пересмотрел эти 40 минут, очень много полезной информации

  • @adamburke4496
    @adamburke4496 Рік тому

    Михаил, даже в отрыве от темы, Вас приятно слушать 👌

  • @max_livi
    @max_livi Рік тому

    Огонь. Это лучший вводник по Next 13 который я видел. Очень жду больше такого контента по этой технологии. Спасибо огромное автору!!!

  • @eduardgrigoryan6052
    @eduardgrigoryan6052 Рік тому +4

    Спасибо спасибо большое, люблю когда все четко и понятно хоть и на простых проектах

  • @victormog
    @victormog Рік тому +13

    Отличное вводное видео!
    Продолжение было бы крайне желательно!!!

  • @IT-Svyatoslav
    @IT-Svyatoslav Рік тому

    Михаил благодарю 🙏 за обзор NextJS! Прошу вас ещё контент на эту тему! Жду с нетерпением!😊

  • @adamarturov6361
    @adamarturov6361 Рік тому

    Хотелось бы продолжения! Очень понравилось видео ,как всегда максимально кратко и качественно объясняете

  • @styxrus
    @styxrus Рік тому +2

    Спасибо, Михаил! Очень актуально. Будет здорово если продолжишь по next'у материал делать.

  • @vyacheslavtoshchev9437
    @vyacheslavtoshchev9437 Рік тому +5

    В интернете много контента на данную тему, но только тут я понял тонкости, которые мне помогли справиться с задачей над которой я бился 3 дня! Круто!

  • @sozdanie-saytov
    @sozdanie-saytov Рік тому

    Пожалуй лучшее видео по Next на данный момент. Подписался. Жду продолжения )))

  • @artemalekseevich4656
    @artemalekseevich4656 Рік тому

    Михаил, спасибо вам огромное, отличное вводное видео, как всегда очень доступное для понимания объяснения!

  • @dada1990cleo
    @dada1990cleo Рік тому +1

    Михаил, это пушка! Спасибо огромное за работу!

  • @nikolaysmolov8031
    @nikolaysmolov8031 Рік тому +27

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

  • @UCmdrhccjVM95UidL5idZw2Q
    @UCmdrhccjVM95UidL5idZw2Q 9 місяців тому +2

    Супер! Единственный нормальный ролик в ру-сегменте про Nextjs13

  • @kotegav7798
    @kotegav7798 7 місяців тому

    Класс! Большое спасибо за курс! Очень качественная подача. погнали next! в клиентские компоненты)

  • @vladimirkusakin
    @vladimirkusakin 11 місяців тому

    Михаил. 👍 Благодарю вас за очень крутой урок по Next-y! 🙏

  • @zeevnadiv8778
    @zeevnadiv8778 Місяць тому

    очень актуальная тема, доступно и подробно объясняешь!!! Благодаря за очень качественную работу!!!

  • @visionxpro6956
    @visionxpro6956 Рік тому +5

    Мужик, ты реально крут, ты снимаешь видео с лайв кодингом без мэканий/бэканий - не каждый так может!!!!!!! Без воды, без запинок

  • @user-uk5tj3qn5q
    @user-uk5tj3qn5q Рік тому +3

    Спасибо за твои видео. Жду продолжения по nextjs

  • @Bondarev_Igor
    @Bondarev_Igor Рік тому

    Спасибо за видео! Было бы здорово увидеть продолжение по Next JS.

  • @BenjaminSergushin
    @BenjaminSergushin Рік тому

    Finally!! Долгожданный обзор next js от Михаила. Ещё контента про Next js ждём

  • @sairexes2443
    @sairexes2443 8 місяців тому

    Отличный фреймворк, как раз для моих задач. Спасибо за доступное объяснение!

  • @DevAccount-rq4ni
    @DevAccount-rq4ni Рік тому

    Михаил, как всегда все понятно, подробно, жирный лайк и благодарность!

  • @alexanderkomanov4151
    @alexanderkomanov4151 Рік тому +1

    Наконец то! Спасибо! Ждём видео с большим проектом!

  • @user-rx1dg3tk8c
    @user-rx1dg3tk8c Рік тому +1

    Миша, шикарно объясняешь и голос приятный. Подписка однозначно

  • @AndranikArshakyan
    @AndranikArshakyan 10 місяців тому

    Гениально и просто, у Вас талант объяснять людям

  • @Gombo_Batuev
    @Gombo_Batuev Місяць тому

    Настолько все грамотно подано, одно удовольствие смотреть!

  • @polarpando
    @polarpando Рік тому

    Спасибо за видео, уже имел с ним дело однажды, но посмотрел, упорядочил знания и увидел что в нем изменилось )

  • @walhix2269
    @walhix2269 Рік тому

    Огромная благодарность за ваш материал, ждем еще видео по next

  • @artemkamyshenkov3492
    @artemkamyshenkov3492 10 місяців тому

    Спасибо! Ваше объяснение гораздо приятнее, чем официальная дока

  • @vadicus6534
    @vadicus6534 Рік тому +1

    Отличный урок, спасибо Михаил.

  • @Anonym-li8eb
    @Anonym-li8eb 11 місяців тому

    Отличный старт в изучении NextJS, спасибо!

  • @sozdanie-saytov
    @sozdanie-saytov Рік тому +2

    Пересматриваю уже 5 раз - все самое основное просто и понятно, такая видео шпаргалка, а вот последующие уроки чуток сложнее

  • @protonys
    @protonys Рік тому +1

    Спасибо, очень интересно, особенно то, что пользователь не видит JS исходников и секретных данных. Хотелось бы продолжения 😌

  • @biLLie_wiLLie
    @biLLie_wiLLie Рік тому

    Очень актуальная тема. Благодарю, Михаил!

  • @gregdmitriev2784
    @gregdmitriev2784 11 місяців тому

    Вау. После Redux прям восторг какой-то от NextJS. Спасибо, Миша 👍

  • @user-wp3ng9du9f
    @user-wp3ng9du9f Рік тому

    Спасибо! Круто, понятно, своевременно, хорошая подача.

  • @andrejgoryachev1988
    @andrejgoryachev1988 Рік тому

    Видео отличное, нравится ваша подача, очень понятно, спасибо большое

  • @slavkapiyavka
    @slavkapiyavka 4 місяці тому

    Отличное видео для ознакомления с next. Спасибо, Михаил!

  • @user-sc4eo2ts9n
    @user-sc4eo2ts9n Рік тому

    Отличное видео! продолжайте выпускать и дальше видео в таком направлении! Спасибо большое Вам.

  • @sharkman6434
    @sharkman6434 Рік тому +2

    Михаил спасибо за видео, блестящий труд, на 12:42 очень похоже что они взяли идею названия и размещения файлов из FSD архитектуры которая на сегодня вроде как считаеться самым передовым и технологичным решением для фронта ) По этом у них страницы page.tsx в каждой папке, в FSD как раз такое применяется в кратце: философия FSD максимально обособить и сделать независимыми компоненты друг от друга, предлагается даже сервисы не выносить в отдельный файл а в каждой компоненте иметь свой сервис )) На первый взгляд дичь но в итоге можем вырезать и заменить не переписывая пол фронта. Получаеться компонент в себе замыкает все для своей работы.

  • @bagga_lev
    @bagga_lev Рік тому

    Михаил спасибо большое за видео! Очень познавательно) мы как раз сейчас на 13 перешли, правда по старому конфигу, без app папки. Буду знать, сколько удобных вещей

  • @TheKykp
    @TheKykp Рік тому +1

    Привет Миш, ты меня научил реакту, я теперь на работу хожу, сейчас работаю с реактом + графкуель, и есть еще проект на Nextе, как раз подучусь еще у тебя и нексту, спасибо =)

  • @user-ds4ik5zu9n
    @user-ds4ik5zu9n 11 місяців тому

    Миша огромное спасибо! твое видео просто отличное, все стало понятно. До этого десяток пересмотрел ничерта не понял.

  • @argeninho
    @argeninho 11 місяців тому

    Показал все, чего не мог найти у других, однозначно лайк 👍

  • @unlimitedgames8357
    @unlimitedgames8357 Рік тому

    Огонь, хочется больше контента по NEXTJS!

  • @vlasdv6472
    @vlasdv6472 Рік тому

    Отличное видео, огромное спасибо! Да интерес к next 13 огромный сделай ещё пару обучающих видео

  • @alexles5003
    @alexles5003 6 місяців тому

    Прекрасный урок. Как раз надо обновить знания перед собесом. Расставить все по местам

  • @user-ze8mg2kb7l
    @user-ze8mg2kb7l 11 місяців тому +1

    Учусь по вашему видео, все по полочкам, спасибо. Пожелание - css тоже учитывать в обучении, потому что глаз режет на сколько разные стили в дефолтном примере и какой у Вас, хочется Ваш стиль использовать, чтобы видеть полное соответствие как выполняется учебный пример.

  • @user-si1fw9tr1z
    @user-si1fw9tr1z Рік тому +1

    Спасибо за видео! Ждём продолжения

  • @annettabel
    @annettabel Рік тому

    Спасибо за видео. Как раз делаю первый проект на nextjs.

  • @Sylar7773
    @Sylar7773 Рік тому +4

    Просто пушка, спасибо огромное!!!

  • @melodystic
    @melodystic Рік тому

    Огромное спасибо за видео. Next невероятно крут)))

  • @user-rm7oz4xu3k
    @user-rm7oz4xu3k Рік тому

    Спасибо за контент, продолжайте тему по Нексту!)

  • @vallraven
    @vallraven 8 місяців тому

    Как же круто всё объяснил!

  • @SwaidiSwaidi
    @SwaidiSwaidi 11 місяців тому

    Красава! Классное и полезное видео, больше контента по Next.js!

  • @andrewsam224
    @andrewsam224 5 місяців тому +1

    Огонь!!!! Cупер!!! Рекомендую к просмотру!!

  • @isaacjon
    @isaacjon Рік тому +3

    Побольше бы про Некст бро🔥🔥🔥

  • @dreamer_vi905
    @dreamer_vi905 6 місяців тому

    Браво. Спасибо за очень качественный контент.

  • @unknown.6914
    @unknown.6914 4 місяці тому

    Прекрасное объяснение, спасибо Михаил!

  • @Skvdev
    @Skvdev Рік тому

    Очень качественно! Подписался, лайк поставил

  • @user-fn2ud8ec3i
    @user-fn2ud8ec3i Рік тому +1

    Михаил отличные видосы!

  • @idrisveliev
    @idrisveliev 8 днів тому

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

  • @sergeykondratev5721
    @sergeykondratev5721 Рік тому +1

    Кратко и лаконично, спасибо)

  • @user-um9ex8jn5n
    @user-um9ex8jn5n Рік тому

    Супер! С нетерпением жду продолжение!))

  • @nataliak6347
    @nataliak6347 Рік тому

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

  • @TarasovFrontDev
    @TarasovFrontDev 9 місяців тому

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

  • @hibiride
    @hibiride 5 місяців тому

    Моё почтение! шикарный ролик! 🚀

  • @Kirdaro
    @Kirdaro 7 місяців тому

    Спасибо большое, очень интересный урок.

  • @EugeneChe-81
    @EugeneChe-81 Рік тому

    Ждем от вас новых материалов по Next)

  • @ValentinProtasevich
    @ValentinProtasevich Рік тому

    Михаил, огромное спасибо!
    ждем еще видео)

  • @sys9975
    @sys9975 Рік тому

    Вот это кайф контент, спасибо огромное за гайд

  • @artyomtaranenko2267
    @artyomtaranenko2267 Рік тому

    Я последние полгода на нём работал, мне оч зашло) Хотелось бы больше узнать про мидвары

  • @Leon-rv2zm
    @Leon-rv2zm Рік тому

    Кайф, спасибо большое за обзорный видос по нексту 13

  • @Mr.Bellamy
    @Mr.Bellamy Рік тому +1

    Это не контент, это контентищееееее (с) Нагиев
    Буду смотреть все по нексту)

  • @user-sq5fr5su3t
    @user-sq5fr5su3t Рік тому +3

    Просто супер, спасибо! Хотелось бы ещё узнать нюансы использования redux, redux-persist или альтернатив в 13й версии Next без hydration error! 🙂

  • @pixelwinner
    @pixelwinner 11 місяців тому

    Крайне полезное видео, спасибо!

  • @jullpic
    @jullpic 10 місяців тому

    Прекрасный урок. Я уже разрабатывал на Next, но это видео открыло для меня другой подход. Видимо до этого я использовал старый метод, без App routing.

  • @user-pj8mz9yb9v
    @user-pj8mz9yb9v Рік тому

    было бы здорово увидеть еще видео по next js

  • @Lotpite
    @Lotpite Рік тому

    Вообще четко и просто ❤

  • @kaber6400
    @kaber6400 Рік тому

    Отлично) Жду следующее видео

  • @user-tt3bc7yk8r
    @user-tt3bc7yk8r Рік тому

    спасибо. очень полезно, жду про NextAuth

  • @romantrutnev9467
    @romantrutnev9467 Рік тому

    Самая приятная подача)

  • @ViktorHugo-je6rq
    @ViktorHugo-je6rq Рік тому +4

    Спасибо Миша!!!

  • @user-np6fx3vq2s
    @user-np6fx3vq2s Рік тому

    Отличное объяснение👍

  • @user-df2sw9sg4j
    @user-df2sw9sg4j Рік тому

    Спасибо за видео, хороший обзор.

  • @aleksandrzelenskiy4000
    @aleksandrzelenskiy4000 9 місяців тому

    Очень интересно и понятно, спасибо

  • @user-ff3lc1et3u
    @user-ff3lc1et3u 9 місяців тому

    Спасибо за отличный контент

  • @i_l_y_a
    @i_l_y_a Рік тому

    Нужно продолжать серию видео про Nextjs !!!!

  • @andranikhambardzumyan6264
    @andranikhambardzumyan6264 9 місяців тому

    Кратко и лаконично, спасибо

  • @mer4672
    @mer4672 10 місяців тому

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