Next.js 13 App Router #1 - Знакомство с Next.js. Роутинг

Поділитися
Вставка
  • Опубліковано 1 чер 2024
  • #nextjs13 #javascript #typescript
    00:00 Знакомство с Next.js
    4:35 Как было раньше. Директория /pages
    10:04 Установка Next.js
    13:37 Пробуем работать с /pages
    16:25 Именование файлов в /app
    19:39 Файл layout
    23:06 Структура роутов
    24:47 Группы роутов
    26:23 Динамические роуты
    29:35 Параллельные роуты
    31:21 generateStaticParams
    38:30 Структура проектов на Next.js

КОМЕНТАРІ • 74

  • @holygeradot
    @holygeradot Рік тому +21

    Класс! Однозначно продолжай, ты для меня единственный русскоязычный блогер, который уже рассказывает про Next 13.4+ )) И, что важнее, очень понятно объясняешь!

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

      Спасибо! Стараемся идти в ногу с прогрессом))

  • @dmitry_st
    @dmitry_st 4 місяці тому +4

    Автору - супер респект, спасибо за контент. Отличный материал и подача.

  • @Light-xb6in
    @Light-xb6in Місяць тому +1

    Дружище, это прекрасно, всё понятно и ясно, объясняешь так, что прям совсем тупые как я понимают, спасибо за труд, заслуживаешь намного больше подписчиков и просмотров) Удачи!))

    • @Light-xb6in
      @Light-xb6in Місяць тому

      Твои видео не только учат но и убаюкивают из за голоса и спокойствия))

  • @nedoff8231
    @nedoff8231 11 місяців тому +5

    Большой спасибо, очень крутой урок!

  • @RamaRama-qv3jo
    @RamaRama-qv3jo 9 місяців тому

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

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

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

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

    Настолько четко и все по полочкам, понятно. Хорошая интонация, произношение. Очень круто. Спасибо!

  • @TheLevius
    @TheLevius 5 місяців тому +2

    Достойной уровень. Речевой аппарат в полном порядке, такое не часто встретишь )))

  • @andreievvv
    @andreievvv 11 місяців тому +1

    Спасибо за видео! Очень круто подаешь материал! Жду новых видео!)

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

    Спасибо! Всё так понятно и методично объяснил. Очень понравился урок. Да и монтаж, голос, прям хорошо всё.

  • @developer-rizvan
    @developer-rizvan 8 місяців тому +1

    Блин сегодня пересмотрел почти 30-40 видосов на английском, на немецком и на русском про 13 -й NextJs. Скажу честно, этот самый лучший. Ты просто молодец братан🤙

  • @nikitaukrainec948
    @nikitaukrainec948 11 місяців тому +1

    Все дуже круто. Класно що ти пояснюєш фундаментальні речі.

  • @user-qh5ok1ks3o
    @user-qh5ok1ks3o 7 місяців тому

    Крутая подача! Спасибо за курс, странно что у такого отличного автора так мало подписчиков.

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

    Спасибо за видео, учусь Next надеюсь стану опытнее

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

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

  • @Kensus
    @Kensus 3 місяці тому

    А ведь и правда - очень классно объяснены всякие getЧто-тоТамProps функции, благодарю, easydev)

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

    Дуже крутий урок! Сподобалось порівняння старого підходу і нового, корисно для тих хто тільки почав вивчати Next.js. З нетерпінням чекаю наступний урок

  • @st.serhio_
    @st.serhio_ 10 місяців тому

    спасибо за урок! очень информативно, уверен что наберется много просмотров)

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

    Отличный курс, наткнулся на тебя случайно. Посмотрел только первое видео из плейлиста. Было бы отлично, если бы ты разобрал моменты, связанные с серверной авторизацией в Next

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

    Браво!понятно и доступно

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

    Лучший
    Максимально подробно и понятно

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

    Отлично объяснено, спасибо! :)

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

    Большое спасибо за урок

  • @KinoTrip_Sub
    @KinoTrip_Sub 2 місяці тому

    Один из лучших курсов

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

    Супер контент, продолжай!

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

    круто! случайно посмотрел. Лайк Подписка. Автор учитель от бога! Next.js, App Router

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

    Спасибо! Очень искал такое видео. Так как есть каша из-за разных версий

  • @theoty-js-react
    @theoty-js-react 10 місяців тому

    Очень полезный ролик. ВСЕМ ТЕМ КТО ХОЧЕТ РАБОТАТЬ НА НОВОЙ ВЕРСИИ NEXT с использованием нового АПП роутинга

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

    Спасибо большое. Вот почти уверен, что автор записывал видео в момент когда уложил маленьких детей спать) Голос именно такой, тихий и спокойный.
    А по сути очень классное видео. До собеса у меня 30 минут, видео дает все то с чем можно туда идти

  • @user-zk6tw7rj1t
    @user-zk6tw7rj1t 5 місяців тому

    вот такие должны быть обучающие каналы

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

    Очень крутой урок для новачка. все по полкам

  • @arinqwerty
    @arinqwerty 2 місяці тому

    спасибо

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

    Easydev - спасибо тебе. Очень крутой ролик! И ты сам очень крутой! Ты мега супер гипер крутой чувак. Очень хорошо объясняешь! Еще раз спасибо!

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

    Оо обожаю! Подписался посмотрим

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

    Секундочку, а не могли ли бы объяснить почему при параллельных роутах тексты Мар и Rules выводятся на главной странице но не выводятся на страницах about и contacts? Вроде же должны выводиться как и, например, текст Меню на всех страницах

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

    на 30:55 у меня что то map и rules не отображаются. Ошибок нет, перепроверял 100500 раз. Странно однако, писал точь в точь как на видео единственное что отличается это версия. У меня самая новая т.е 13.4.13. Может что поменяли в версии, как думаете?
    изменено: Перезагрузил сервер и сработало.

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

    Подскажите пожалуйста, после сборки проекта создаются страницы. И если ввести неверный url то я получаю ошибку 500 Internal Server Error. Нужно ли ее как-то обрабатывать ? Если да, то как ?

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

    спасибо за урок, как часто планируешь выпускать новые видео ?
    Планируешь ли сделать курс по разработке приложения на NextJs без бекенда ?
    Удачи тебе парень !

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

      Спасибо! Новые видео по возможности, не люблю что-то обещать и не выполнять. Работа, личные дела и тд. много всего. Приложение на next - да планирую. В рамках текущего курса.

  • @perstj5746
    @perstj5746 10 місяців тому +1

    У меня отсутствует корневой элемент div=""__next""

  • @gyglejid
    @gyglejid 3 місяці тому

    Этот комментарий создан в знак уважения к автору, его трудам и для продвижения его канала.

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

    А почему нету корневого элемента в next.js а он раньше был

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

    Спасибо, отличный ролик !Вы помогли мне разобраться в данной теме, только есть один вопрос, прошу дайте на него ответ. Я правильно понимаю, что если использовать generateStaticParams, он сам создаст столько страниц ,сколько придет из API ? Просто при разработке я ввожу в адресную строку измененный url и он его принимает и не выдает ошибку 404.

    • @easydev1205
      @easydev1205  8 місяців тому +1

      Спасибо за комментарий. Да, количество страниц будет определяться количеством записей на сервере. Сначала нужно запустить генерацию страниц: npm run build. Потом на их основе запустить проект: npm run start

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

      @@easydev1205 спасибо за ответ

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

    37:30 не пойму, как без запроса на сервер мы получаем страницу? эта же страница не лежит у нас в браузере у нас в состоянии приложения.. она лежит где-то на сервере.. мы вводим url адрес чтоб её получить.. должен же быть запрос на сервер чтоб получить страницу.. кото может объяснить? Благодарю

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

      Здесь под сервером я имел ввиду сервер API. Возможно нужно было уточнить( То есть данные из API сразу встроились в страницу при сборке. А отдалась она как html уже. Ну и конечно с сервера где расположен наш сайт.
      То есть не происходит fetch/XHR запроса именно как видно в панели

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

    Не могу понять, проблемка возникла, делаю все по уроку, когда пытаюсь перейти на post/12 выдает страницу 404 ошибки, никто не сталкивался?

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

      Скорее всего опечатка где-то

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

    а если у нас будет 10 000 названий фильмов, все эти 10 000 страниц сгенерируются при билде ?

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

      Ну да...

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

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

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

      Почему ISR не решит проблемы? Именно для этого оно и разработано. Кажется прекрасно решает эту проблему

    • @ZombaK-sg5bw
      @ZombaK-sg5bw 10 місяців тому

      @@dmitriyqwe9512 SSR каждый раз генерирует страницу для каждого пользователя. Представьте какой будет нагрузка на сервер например при 20 000+ пользователей. Для этого и существует ISR, который, проще говоря, является SSG с ревалидацией.

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

    Начиная с 18 минуты пытаюсь создать все как на видео на версии 13.4.12 не работает роут. Я новичок тапками не бросайте :)

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

      Турбопак включен?

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

      скорее всего какая-нибудь банальная опечатка. Здесь показан базовый функционал, должен работать во всех версиях

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

      @@---Maksim--- сначала включал, а потом выключил

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

      @@easydev1205 спасибо, попробую еще раз внимательнее, о результате напишу

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

      мне стыдно! использовал путь /app/pages/и тут такая невнимательность в построении архитектуры, теперь моя ошибка дает объяснение в том что нужно больше отдыхать и тогда спустя время видны ошибки :) я фигачил с малым количеством времени отдыха, и много наделал не так, буду продолжать смотреть твои ролики и внедрять большинство классных моментов, радует что хоть тебя понимаю - стараешься объясеять простыми словами! респект тебе! я бы и платную подписку оформил на твой тг канал или что-то подобное если есть такое сообщи

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

    Сложна

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

      От уровня зависит. Начинать изучение веб разработки с next конечно не стоит. Сначала лучше с основами познакомиться

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

      @@easydev1205 Да я делаю проджект на 12 некст но как то обяснения сложно идут

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

      Ну бывает) некоторые продвинутые моменты можно на потом оставить - они опциональны

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

    Правильно ли я понял, что с помощью next.js можно писать бэк и это альтернатива ноде?

    • @easydev1205
      @easydev1205  10 місяців тому +1

      Да, можно писать бэк. Но зависит от проекта. Особо богатую логику на бэке только лишь на next.js вряд ли получится построить.

    • @user-cr2ig3xv4y
      @user-cr2ig3xv4y 10 місяців тому

      @@easydev1205 да все получится, не переживай

    • @easydev1205
      @easydev1205  10 місяців тому +1

      @@user-cr2ig3xv4y удачи