Next.js 13 App Router #1 - Знакомство с Next.js. Роутинг
2024 ж. 22 Мам.
19 139 Рет қаралды
#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
Класс! Однозначно продолжай, ты для меня единственный русскоязычный блогер, который уже рассказывает про Next 13.4+ )) И, что важнее, очень понятно объясняешь!
Спасибо! Стараемся идти в ногу с прогрессом))
Дружище, это прекрасно, всё понятно и ясно, объясняешь так, что прям совсем тупые как я понимают, спасибо за труд, заслуживаешь намного больше подписчиков и просмотров) Удачи!))
Твои видео не только учат но и убаюкивают из за голоса и спокойствия))
Спасибо за видео! Очень круто подаешь материал! Жду новых видео!)
Достойной уровень. Речевой аппарат в полном порядке, такое не часто встретишь )))
Большой спасибо, очень крутой урок!
Превосходное объяснение материала, очень просто и доступно! Спасибо!
А ведь и правда - очень классно объяснены всякие getЧто-тоТамProps функции, благодарю, easydev)
спасибо за урок! очень информативно, уверен что наберется много просмотров)
Спасибо за видео, учусь Next надеюсь стану опытнее
спасибо огромное очень полезно, буду ждать новых видео
Автору - супер респект, спасибо за контент. Отличный материал и подача.
Настолько четко и все по полочкам, понятно. Хорошая интонация, произношение. Очень круто. Спасибо!
Красавчик. Понятная и структурированная подача материала. Единственный, кто наглядно показал различие старой и новой директорий. Продолжай в том же духе
Крутая подача! Спасибо за курс, странно что у такого отличного автора так мало подписчиков.
Все дуже круто. Класно що ти пояснюєш фундаментальні речі.
Спасибо! Всё так понятно и методично объяснил. Очень понравился урок. Да и монтаж, голос, прям хорошо всё.
Отлично объяснено, спасибо! :)
Браво!понятно и доступно
Супер контент, продолжай!
Лучший Максимально подробно и понятно
Отличный курс, наткнулся на тебя случайно. Посмотрел только первое видео из плейлиста. Было бы отлично, если бы ты разобрал моменты, связанные с серверной авторизацией в Next
Один из лучших курсов
Большое спасибо за урок
Дуже крутий урок! Сподобалось порівняння старого підходу і нового, корисно для тих хто тільки почав вивчати Next.js. З нетерпінням чекаю наступний урок
вот такие должны быть обучающие каналы
круто! случайно посмотрел. Лайк Подписка. Автор учитель от бога! Next.js, App Router
Спасибо! Очень искал такое видео. Так как есть каша из-за разных версий
Блин сегодня пересмотрел почти 30-40 видосов на английском, на немецком и на русском про 13 -й NextJs. Скажу честно, этот самый лучший. Ты просто молодец братан🤙
Спасибо!)
Спасибо большое. Вот почти уверен, что автор записывал видео в момент когда уложил маленьких детей спать) Голос именно такой, тихий и спокойный. А по сути очень классное видео. До собеса у меня 30 минут, видео дает все то с чем можно туда идти
Спасибо)
Очень крутой урок для новачка. все по полкам
Очень полезный ролик. ВСЕМ ТЕМ КТО ХОЧЕТ РАБОТАТЬ НА НОВОЙ ВЕРСИИ NEXT с использованием нового АПП роутинга
Easydev - спасибо тебе. Очень крутой ролик! И ты сам очень крутой! Ты мега супер гипер крутой чувак. Очень хорошо объясняешь! Еще раз спасибо!
Спасибо)
спасибо
Оо обожаю! Подписался посмотрим
спасибо за урок, как часто планируешь выпускать новые видео ? Планируешь ли сделать курс по разработке приложения на NextJs без бекенда ? Удачи тебе парень !
Спасибо! Новые видео по возможности, не люблю что-то обещать и не выполнять. Работа, личные дела и тд. много всего. Приложение на next - да планирую. В рамках текущего курса.
Этот комментарий создан в знак уважения к автору, его трудам и для продвижения его канала.
Секундочку, а не могли ли бы объяснить почему при параллельных роутах тексты Мар и Rules выводятся на главной странице но не выводятся на страницах about и contacts? Вроде же должны выводиться как и, например, текст Меню на всех страницах
на 30:55 у меня что то map и rules не отображаются. Ошибок нет, перепроверял 100500 раз. Странно однако, писал точь в точь как на видео единственное что отличается это версия. У меня самая новая т.е 13.4.13. Может что поменяли в версии, как думаете? изменено: Перезагрузил сервер и сработало.
Подскажите пожалуйста, после сборки проекта создаются страницы. И если ввести неверный url то я получаю ошибку 500 Internal Server Error. Нужно ли ее как-то обрабатывать ? Если да, то как ?
У меня отсутствует корневой элемент div=""__next""
А почему нету корневого элемента в next.js а он раньше был
Спасибо, отличный ролик !Вы помогли мне разобраться в данной теме, только есть один вопрос, прошу дайте на него ответ. Я правильно понимаю, что если использовать generateStaticParams, он сам создаст столько страниц ,сколько придет из API ? Просто при разработке я ввожу в адресную строку измененный url и он его принимает и не выдает ошибку 404.
Спасибо за комментарий. Да, количество страниц будет определяться количеством записей на сервере. Сначала нужно запустить генерацию страниц: npm run build. Потом на их основе запустить проект: npm run start
@@easydev1205 спасибо за ответ
37:30 не пойму, как без запроса на сервер мы получаем страницу? эта же страница не лежит у нас в браузере у нас в состоянии приложения.. она лежит где-то на сервере.. мы вводим url адрес чтоб её получить.. должен же быть запрос на сервер чтоб получить страницу.. кото может объяснить? Благодарю
Здесь под сервером я имел ввиду сервер API. Возможно нужно было уточнить( То есть данные из API сразу встроились в страницу при сборке. А отдалась она как html уже. Ну и конечно с сервера где расположен наш сайт. То есть не происходит fetch/XHR запроса именно как видно в панели
Не могу понять, проблемка возникла, делаю все по уроку, когда пытаюсь перейти на post/12 выдает страницу 404 ошибки, никто не сталкивался?
Скорее всего опечатка где-то
а если у нас будет 10 000 названий фильмов, все эти 10 000 страниц сгенерируются при билде ?
Ну да...
С динамическими роутами, думаю, лучше использовать SSR. Во - первых, их может быть просто очень много. Во - вторых, при добавлении новых фильмов, придется ребилдить проект, чтобы сгенерить новые страницы. Конечно, можно использовать ISR, но это не решит проблемы. Будет интересно от автора услышать мнение
Почему ISR не решит проблемы? Именно для этого оно и разработано. Кажется прекрасно решает эту проблему
@@dmitriyqwe9512 SSR каждый раз генерирует страницу для каждого пользователя. Представьте какой будет нагрузка на сервер например при 20 000+ пользователей. Для этого и существует ISR, который, проще говоря, является SSG с ревалидацией.
Начиная с 18 минуты пытаюсь создать все как на видео на версии 13.4.12 не работает роут. Я новичок тапками не бросайте :)
Турбопак включен?
скорее всего какая-нибудь банальная опечатка. Здесь показан базовый функционал, должен работать во всех версиях
@@---Maksim--- сначала включал, а потом выключил
@@easydev1205 спасибо, попробую еще раз внимательнее, о результате напишу
мне стыдно! использовал путь /app/pages/и тут такая невнимательность в построении архитектуры, теперь моя ошибка дает объяснение в том что нужно больше отдыхать и тогда спустя время видны ошибки :) я фигачил с малым количеством времени отдыха, и много наделал не так, буду продолжать смотреть твои ролики и внедрять большинство классных моментов, радует что хоть тебя понимаю - стараешься объясеять простыми словами! респект тебе! я бы и платную подписку оформил на твой тг канал или что-то подобное если есть такое сообщи
Сложна
От уровня зависит. Начинать изучение веб разработки с next конечно не стоит. Сначала лучше с основами познакомиться
@@easydev1205 Да я делаю проджект на 12 некст но как то обяснения сложно идут
Ну бывает) некоторые продвинутые моменты можно на потом оставить - они опциональны
Правильно ли я понял, что с помощью next.js можно писать бэк и это альтернатива ноде?
Да, можно писать бэк. Но зависит от проекта. Особо богатую логику на бэке только лишь на next.js вряд ли получится построить.
@@easydev1205 да все получится, не переживай
@@user-cr2ig3xv4y удачи