ฝัง
- เผยแพร่เมื่อ 24 มิ.ย. 2024
- 🔥 Оформить премиум подписку - htmllessons.io/premium?...
⚡️ Забрать бесплатные ресурсы и 4000 бонусов от Cloud․ru можно на сайте: sc.link/y0nKE
Реклама. ООО «Облачные технологии». ИНН 7736279160. Erid - 2Vfnxwyr9SG
🔐 МК "Реализация оплаты от А до Я" (запись можно будет купить до конца недели) - t.me/pay_red_mk_3_bot
Подробнее о мастер классе - t.me/redgroupchannel/1533
🦋 Наш ТГ канал - t.me/redgroupchannel
Поддержи видео лайком, 2000 лайков 👍 и я делаю новое видео данного формата!
Скачать 🖥 папку проекта - t.me/redgroupchannel
В этом видео мы погрузимся в мир Next.js и разберем, когда лучше выбирать Next.js, а когда React. Освоите новый роутинг и его возможности, узнаете о хуках useRouter, usePathname, useSearchParams, научитесь работать с layout и оптимизировать SEO. Обсудим SSR, SSG, ISR и их применение, разберемся с клиентскими и серверными компонентами, middleware и многим другим.
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
🔐 МК по авторизации 2.0 (все исходники и запись доступны навсегда!) - t.me/pay_red_master_class_bot
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🍥 Тема в редактор/IDE - DEFAULT
✨Скачать настройку VS Code - get.redlinks.tech/s/7hEUp1j
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00 - Начало
00:30 - В этом видео
01:07 - Почему Next крутой?
04:16 - Установка проекта
06:22 - Структура и компоненты
08:33 - Роутинг
11:45 - layout
12:33 - Правильная структура
14:07 - Визуал
15:13 - Шрифты
15:43 - Страница 404
15:59 - Изображения
16:37 - Полезные хуки
20:03 - Клиентские vs серверные компоненты
23:55 - use client, use server
26:13 - Подгрузка данных разными способами
30:46 - SEO оптимизация
33:11 - middleware
35:33 - Полезные настройки конфига
37:03 - Оптимизация пакетов
37:47 - Очень быстрая статика MDX
39:30 - Сборка проекта
40:45 - Когда использовать Next.js?
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
#Next #Nextjs #Next_js #RedGroup
Поддержи видео лайком, 2000 лайков 👍 и я делаю новое видео данного формата!
Скачать 🖥 папку проекта - t.me/redgroupchannel
монтаж вау, а содержание еще лучше. ждем nest!)
Формат и подача - огонь. Спасибо большое.💪 Единственный из блогеров по фронту, кого смотрю не на х2 скорости (на х1.5 вполне ок). В отличии от англоязычных коллег - минимум сюсюкания, все по делу. За 40 минут - польза половины англ udemy курса на 40 часов. Еще и на русском. Еще и с мэмами. Это разъеб.🔥
спасибо, пощупал next немного))
формат понравился, особенно что информация идет как концентрат, то есть минимум воды, но такую тему как next в 40 минут уместить тяжело
для таких крупных тем возможно можно и увеличить хронометраж, с учетом такого хорошего сжатого монтажа
роста каналу) лайк)
ОНОООООООООООО!!!!!
снова полный курс вышел на новый уровень)
владею инглишем, но у тебя вышел курс во всех смыслах более качественный чем я встречал среди всех западных
Очень крутой видос, и формат также. Все четко, коротко и ясно
Вообще огонь! Знаком с React но про Next js не слышал ничего. Теперь имею общее представление, респект что быстро и с нюансами всё рассказал
Ничего себе) недавно начал делать коммерческий проект для себя, решил попробовать на некст для сео, и за 40 минут ты закрыл абсолютно все вопросы которые у меня возникли)
спасибо за такое видео я учу next js и не понимал весь его функционал,а в интернете много воды. я на первых 17 минут видео узнал больше чем за неделю
Ура. Как раз минута в минуту уже хотел смотреть next 5 часов по англ
Спасибо большое за материал! Очень круто
Не могу подобрать, чтобы выразить своё восхищение! Просто машина!
отличный контент и монтаж! Спасибо!
Продолжай в том же духе, Макс!🔥🔥🔥🔥
просто на лайте на расслабоне посмотрел ролик, умеешь заинтересовать к покупке курса)))
Спасибо как раз хотел сделать фронтовую часть на нексте в первый раз, а тут такой материал пришелся
Спасибо, Макс, за крутой контент. Красавчик
спасибо Макс!
подача супер, все очень информативно
Круто, спасибо
спасибо за видео, теперь бы про nuxt послушать)
Ты лучший просто бро 😎✊
Спасибо за видео!)) У меня вопрос про обработку 404 ошибки, в чем разница между not-found.jsx и error.jsx ?
Это точно бесплатное видео ? СУПЕР ! Столько полезной информации! Спасибо большое за огромную работу.
Хотелось бы ответить на один вопрос с видео: "Где нужно сократить что-то еще" - мое мнение: не нужно сокращать)
Качество материала и его преподнесение - на высшем уровне. Кто за TypeScript, ставим лайк
Ред груп, попрошу в след таких уроках в файлах указывать их названия, а то не всегда все понятно. Спасибо!
Спасибо, как раз надо некст чекнуть
Парни ответь на вечный вопрос, надо ли что-то менять в tsconfig?
Спасибо огромное
Привет, а можно объеденить react(в качестве фронтенда) и django(как бекенд)? Или если пишешь на реакт, то бек должен быть node js/express js?
Конечно можно. Не важен язык бэкэнда. Общение идет методом REST API или GraphQL
Можно объединить, используя drf и cors-headers, и ещё djangorestframework-simplejwt
@@REDGroup спасибо
@@malfinbeats спасибо
Спасибо за видео! Полезно, коротко и по сути! Просьба сделать видео где проект NEXTJS устанавливается не на Versel, на обычном хостинге. Есть ли в таких проектах трудности и особенности? Класным продолжением такой тематике будет разворачивание сайта на NEXTJS и NESTJS также на обычном хостипге. Пожелание сделать видео в таком же формате как и это видео. Дать готовый код и пройтись по основных моментах. Видео на 5 часов очень полезны однако на его создание идут огромные усилия. Может, стоит попробовать лайт вариант!
Так уже было видео, деплой пару видео назад. Оно просто не набрало просмотров, но то что надо
то что надо спасибо огромное ждём теперь nast :>
Спасибо!
Привет. Ты же кодишь на VScode? Порекомендуй новичкам cursor - улучшенную версию VScode с ИИ. Я перешёл и так кайфую. Если есть какая-то монотонная работа копировать-вставить или что-то вырезать, он тебе облегчит задачу и ускорит процесс, не придётся вручную это делать. Рекомендую!
ляяяя, просто лучший. Продолжай в том же духе и превзойдёшь всех других ютуберов по фронту. Формат ахонь
Очередной крутой ролик! Респект Макс! Я заметил что у тебя ещё не было ни одного web3 проекта...Ты не думал сделать что-то на нексте + блокчейн
Эта тема мне не интересна
Пушка!
Спасибо за ролик
Здорово Макс, а как добавить мультиязычные настройки в эту структуру некста
Видео очень классное, я как человек ебавший голову с языками от сишки до явы, и твой видос дал силы разобраться с Ява скриптом, он хотя бы не так страшно выглядит для меня чем ява, наверное стоит видосы с большей базой для новичков юниоров бахнуть, но мб у тебя уже на канале есть такие, если есть то по возможности скинь пожалуйста какие видео ты бы рекомендовал к просмотрю новичку в жс и некстжс
Монтаж бомба, формат бомба!
спасибо!
Крутой ролик, возник вопрос про Route handlers, их вообще когда надо юзать, и нужно ли их вообще юзать, если придерживаться концепции фронт и бэк раздельно?
Если концепция разделения, то в очень редких случаях. К примеру если работать с сессия
лайк авансом
Что за тема иконок?
Очень крутое видео Макс, просто бомба!!🔥 Как раз начал писать на next. Но у меня есть одна проблема, которую я долго не могу решить. Допустим я на клиенте сохраняю и получаю значение из localstorage и хочу менять контент в зависимости от него. Но у меня выходит ошибка, так как данные на сервере и на клиенте отличаются(вроде называется гидратацией). И как тогда быть в этой ситуации, может нужно заменить localstorage на что-нибудь другое ,если хочу что-то сохранить и чтобы оно после перезагрузки оставалось. Все это происходит на клиенте с использованием директивы "use client".
Нужно через useeffect работать
Очень прикольно! Интересно бы посмотреть как обезопасить приложение имея сторонний бекенд с AuthJS v5. Например я передаю на бек логин и пароль (Credentials) получаю в ответ Access и Refresh Токены. Как их использовать для защиты страниц, и для запросов к бекенду в целом?
Эта тема была в мастер классе авторизация 2.0
монтаж на уровне!
очень познавательное видео, спасибо, Макс, за старания! Тему из видоса не нашел( Можно ссылку?
Это стандартная тема vs code
17:55 - middleware имеется ввиду? Как-то давно завис над похожей задачей (надо было slug получить, но оставить компоненту серверной) так и не получилось решить. Ну это pet проект, поэтому забил на время.
Можете дать пару идей как решить эту проблему? Использую next 14 на проекте
slug в сервер комопнентах получаєм через пропс params наприклад : const async Component = ({ params }: {params:{slug: any}}) => {}
@@andrsh9388 спасибо, на днях попробую 👍
можете помочь составить роадмап для фуллстак разраба с 0 на базе ваших курсов? или интенсивы не для новичков?
Напишите в наш тг бот @red_support_bot
@@REDGroup написал но там тишина че то)
Да, ответ не быстрый. Так как отвечаю в основном сам, пока в команде нет человека на постоянной должности. Ожидайте
Макс, привет! Можешь разобрать архитектуру feature-sliced-design и создать на неё основе проект на Next.js?
Привет, эта «архитектура» не стоит отдельного видео
Макс, а вот возник вопрос. Используя redux toolkit мы оборачиваем layout в провайдер, то есть логично что все компоненты становятся клиентскими, как этого можно избежать?
А зачем, если внутри лейаутов будет ui? Опиши конкретнее твой вопрос
Нет, оборачивая весь проект в Providers где 'use client' это не значит что все компоненты будут клиентскими! Будет только конкретно этот клиентским, а внутри проекта так-же можно использовать и северные и северный-статик
@@whoooooo а как можно явно указать какой будет серверным к примеру?
@@user-lb6lq5yh5q для этого есть
'use client' - Выполняется на клиенте, но может быть пред загружен на сервере если он статический. В этом случае он (static)
'use server' - Это как раз северный компонент. По умолчанию если ничего не указать то nextjs будет автоматический его определять как северный.
@@user-lb6lq5yh5q не знаю почему прошлый комент куда-то пропал :)
Вот нашел вырезку хорошо поясняющею
use server: Компоненты, отмеченные как use server, выполняются исключительно на сервере. Это может быть полезно для задач, требующих обработки данных на сервере, таких как обращения к базам данных, обработка конфиденциальной информации или операции, которые не должны быть видны или доступны на клиентской стороне. Компоненты, отмеченные как use server, не посылают свой JavaScript-код в браузер, что сокращает объем передаваемых данных и ускоряет загрузку страницы.
use client: Компоненты, работающие с этой меткой, выполняются исключительно в браузере пользователя. Это полезно для динамических интерактивных элементов интерфейса, которые требуют быстрого ответа без повторного обращения к серверу, например, анимации или обработка ввода пользователя в реальном времени.
Отсутствие обеих меток: Если компонент Next.js не помечен ни как use server, ни как use client, он по умолчанию обрабатывается как универсальный компонент. Это означает, что он может исполняться как на сервере, так и на клиенте. Next.js оптимизирует, где именно выполнять такие компоненты на основе их использования в приложении и текущих требований к производительности.
Привет, подкажи, что сначало надо изучить, курс по реакту и потом по next или наоборот? Спасибо
Конечно, сначала реакт
Есть ли смысл писать на React или эта библиотека является его полной заменой. Если же нет, то для каких конкретных случаев и задач она подходит лучше чем React
В видео есть тайм код на эту тему. Это продолжение реакта. Сначала учим реакт, потом некст
Хотелось бы полный разбор неста)))
Привет, посмотрел на одном дыхании видео. Есть вопрос.
Что делать, если у меня приложении на NEXT.js, но backend пишется на Laravel
Исходя из видоса сложилось ощущение, что NEXT -- это история про то, как все делать внутри него. Но наверняка же он нормально существует в рамках концепции микросервисов
Привет, это обман из-за мнения большинства блогеров. Я так не считаю, я наоборот разделяю и некст использую только для фронта
огонь
Чтоб изучить некст в каком порядке смотреть твои видео по нексту? или только это видео?
Только это видео
Привет, скажи пожалуйста, будет ли видео о graphql?
Пока не планируется
пасибо
Отличный ролик , но вы слишком сократили этот ролик. Могли бы коснуться то чего вы хотели коснуться. Я с радостью посмотрел бы как вы пишете код и как вы пользуютесь внешними библиотеками
Пока щупаем форматы, хочется больше просмотров, поэтому и делаем более интересные видео для широкой аудитории
Как называется болезнь когда ставишь лайк ещё не просмотрев видео?
Хорошее начало видео
умением оценить труд и огромные знание 🔥
👍
Однозначно NEST !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Чел, я тебя люблю.. Если вдруг случайно тебя встречу, можно подойти и обнять по братски? Контент божественен
Ролик огонь, спору нет. Но если Вы собираетесь продолжать эту рубрику, то хотелось бы чуть менее быстрый темп речи! Очень сложно переваривать мысли, которые произносятся как скороговорка)
Это уже не исправить, такой у меня темп речи. Я около года занимался сценической речью и потом бросил, потому что теряется моя уникальность. А я этого не хочу.
Давай видео с использованием supabase
Сними видео про Grpc
5-тый
🚀🚀🚀🚀🚀🚀🚀🚀🚀
🐝
как тебе Drizzle?
Хорошая тема, но сам еще не пробовал
рубрика очень крутая, но я считаю что лучше убрать ограничение по времени и оставить сухость подаваемого материала.
Спасибо за такой крутой видос!!!
Хочется делать на широкую аудиторию, а широкой аудитории не нравится смотреть по 2 часа материала. Так бы я с удовольствием бы делал, но нужны охваты и просмотры
Я думаю что можно сделать сериал) И разбирать по несколько блоков материала в каждом видео, в любом случае ты тут имеешь больше опыта, и решать тебе)))
го по vue js 3
NEST!
FAST API + NEXT js. (like)
no-cash не по-умолчанию. По умолчанию всегда статика.
А разве запрос на сервак next js это не тот же запрос, который может дорого стоить?
А где мы делаем запрос на сервер nextjs? Серверная часть в нексте это не сервер это немного другая прослойка которая называется edge
Может ролик про интернациализацию? Раз сюда не поместилась.
Слабая тема для полноценного видео
@@REDGroup ну тут согласен. А если шорт? наверное будет мало времени😅
Хотя можно разбить на две части, то есть два шорта. И сделать как всегда супер выжимку по тайму 👍
Пока не понятно. Сейчас немного о другом мысли, о полной смене формата канала
Tailwind
у кого начальные компоненты nextjs поменялись?
coollllllllllllll
Нужно по ангуляру
nest js
Redux please
.
Все конечно хорошо объясняешь, но блин, быстро быстро и не успеваешь понять что и где ты пишешь. Скрыл навигацию по папкам и все, половину информации теряешь
монтаж классный, как видео, крутой. Но next, как по-мне явно проигрывает vue, и явный лидер именно вьюшка, vue use, primevue, тонкие настройки реактивности, pinia, vite из коробки
Это ваше мнение, посмотрите наше видео про vue, где делали crm систему, мне вообще не понравился. Желания делать видео еще раз по нему нет, оно того не стоит. Для новичков да, поразвлекаться. Но тянуть в большие проекты я не понимаю как
Очень медленно поясняет
сделал под ISR додал revalidate , сбилдил и в консольке показивает что (SSG) prerendered as static HTML (uses getStaticProps) что не так?
Это нормально, он и не будет показывать isr при сборке. Там нет такого пункта
vike крутая штука попробуй
.