Курс по Next js 14 - Без воды за 40 минут! RED Essence
HTML-код
- Опубликовано: 9 июн 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
![Настройка, которая сделает WebStorm в 10 раз быстрее! [ Плагины / Снипеты / Хоткеи ]](/img/1.gif)
Поддержи видео лайком, 2000 лайков 👍 и я делаю новое видео данного формата!
Скачать 🖥 папку проекта - t.me/redgroupchannel
монтаж вау, а содержание еще лучше. ждем nest!)
Формат и подача - огонь. Спасибо большое.💪 Единственный из блогеров по фронту, кого смотрю не на х2 скорости (на х1.5 вполне ок). В отличии от англоязычных коллег - минимум сюсюкания, все по делу. За 40 минут - польза половины англ udemy курса на 40 часов. Еще и на русском. Еще и с мэмами. Это разъеб.🔥
ОНОООООООООООО!!!!!
снова полный курс вышел на новый уровень)
Очень крутой видос, и формат также. Все четко, коротко и ясно
спасибо за такое видео я учу next js и не понимал весь его функционал,а в интернете много воды. я на первых 17 минут видео узнал больше чем за неделю
Вообще огонь! Знаком с React но про Next js не слышал ничего. Теперь имею общее представление, респект что быстро и с нюансами всё рассказал
Спасибо большое за материал! Очень круто
Ура. Как раз минута в минуту уже хотел смотреть next 5 часов по англ
Не могу подобрать, чтобы выразить своё восхищение! Просто машина!
Ничего себе) недавно начал делать коммерческий проект для себя, решил попробовать на некст для сео, и за 40 минут ты закрыл абсолютно все вопросы которые у меня возникли)
просто на лайте на расслабоне посмотрел ролик, умеешь заинтересовать к покупке курса)))
отличный контент и монтаж! Спасибо!
Продолжай в том же духе, Макс!🔥🔥🔥🔥
Спасибо как раз хотел сделать фронтовую часть на нексте в первый раз, а тут такой материал пришелся
Спасибо, Макс, за крутой контент. Красавчик
Парни ответь на вечный вопрос, надо ли что-то менять в tsconfig?
Спасибо за видео!)) У меня вопрос про обработку 404 ошибки, в чем разница между not-found.jsx и error.jsx ?
Качество материала и его преподнесение - на высшем уровне. Кто за TypeScript, ставим лайк
спасибо за видео, теперь бы про nuxt послушать)
Спасибо, как раз надо некст чекнуть
Круто, спасибо
Привет, а можно объеденить react(в качестве фронтенда) и django(как бекенд)? Или если пишешь на реакт, то бек должен быть node js/express js?
Конечно можно. Не важен язык бэкэнда. Общение идет методом REST API или GraphQL
Можно объединить, используя drf и cors-headers, и ещё djangorestframework-simplejwt
@@REDGroup спасибо
@@malfinbeats спасибо
Спасибо огромное
Спасибо!
Здорово Макс, а как добавить мультиязычные настройки в эту структуру некста
Ты лучший просто бро 😎✊
то что надо спасибо огромное ждём теперь nast :>
Это точно бесплатное видео ? СУПЕР ! Столько полезной информации! Спасибо большое за огромную работу.
Хотелось бы ответить на один вопрос с видео: "Где нужно сократить что-то еще" - мое мнение: не нужно сокращать)
Спасибо за ролик
ляяяя, просто лучший. Продолжай в том же духе и превзойдёшь всех других ютуберов по фронту. Формат ахонь
Монтаж бомба, формат бомба!
Пушка!
Очередной крутой ролик! Респект Макс! Я заметил что у тебя ещё не было ни одного web3 проекта...Ты не думал сделать что-то на нексте + блокчейн
Эта тема мне не интересна
Что за тема иконок?
монтаж на уровне!
Спасибо за видео! Полезно, коротко и по сути! Просьба сделать видео где проект NEXTJS устанавливается не на Versel, на обычном хостинге. Есть ли в таких проектах трудности и особенности? Класным продолжением такой тематике будет разворачивание сайта на NEXTJS и NESTJS также на обычном хостипге. Пожелание сделать видео в таком же формате как и это видео. Дать готовый код и пройтись по основных моментах. Видео на 5 часов очень полезны однако на его создание идут огромные усилия. Может, стоит попробовать лайт вариант!
Так уже было видео, деплой пару видео назад. Оно просто не набрало просмотров, но то что надо
лайк авансом
Хотелось бы полный разбор неста)))
Макс, а вот возник вопрос. Используя 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 оптимизирует, где именно выполнять такие компоненты на основе их использования в приложении и текущих требований к производительности.
Привет. Ты же кодишь на VScode? Порекомендуй новичкам cursor - улучшенную версию VScode с ИИ. Я перешёл и так кайфую. Если есть какая-то монотонная работа копировать-вставить или что-то вырезать, он тебе облегчит задачу и ускорит процесс, не придётся вручную это делать. Рекомендую!
Чтоб изучить некст в каком порядке смотреть твои видео по нексту? или только это видео?
Только это видео
можете помочь составить роадмап для фуллстак разраба с 0 на базе ваших курсов? или интенсивы не для новичков?
Напишите в наш тг бот @red_support_bot
@@REDGroup написал но там тишина че то)
Да, ответ не быстрый. Так как отвечаю в основном сам, пока в команде нет человека на постоянной должности. Ожидайте
Крутой ролик, возник вопрос про Route handlers, их вообще когда надо юзать, и нужно ли их вообще юзать, если придерживаться концепции фронт и бэк раздельно?
Если концепция разделения, то в очень редких случаях. К примеру если работать с сессия
17:55 - middleware имеется ввиду? Как-то давно завис над похожей задачей (надо было slug получить, но оставить компоненту серверной) так и не получилось решить. Ну это pet проект, поэтому забил на время.
Можете дать пару идей как решить эту проблему? Использую next 14 на проекте
slug в сервер комопнентах получаєм через пропс params наприклад : const async Component = ({ params }: {params:{slug: any}}) => {}
@@andrsh9388 спасибо, на днях попробую 👍
очень познавательное видео, спасибо, Макс, за старания! Тему из видоса не нашел( Можно ссылку?
Это стандартная тема vs code
Привет, подкажи, что сначало надо изучить, курс по реакту и потом по next или наоборот? Спасибо
Конечно, сначала реакт
👍
Очень крутое видео Макс, просто бомба!!🔥 Как раз начал писать на next. Но у меня есть одна проблема, которую я долго не могу решить. Допустим я на клиенте сохраняю и получаю значение из localstorage и хочу менять контент в зависимости от него. Но у меня выходит ошибка, так как данные на сервере и на клиенте отличаются(вроде называется гидратацией). И как тогда быть в этой ситуации, может нужно заменить localstorage на что-нибудь другое ,если хочу что-то сохранить и чтобы оно после перезагрузки оставалось. Все это происходит на клиенте с использованием директивы "use client".
Нужно через useeffect работать
Есть ли смысл писать на React или эта библиотека является его полной заменой. Если же нет, то для каких конкретных случаев и задач она подходит лучше чем React
В видео есть тайм код на эту тему. Это продолжение реакта. Сначала учим реакт, потом некст
Ролик огонь, спору нет. Но если Вы собираетесь продолжать эту рубрику, то хотелось бы чуть менее быстрый темп речи! Очень сложно переваривать мысли, которые произносятся как скороговорка)
Это уже не исправить, такой у меня темп речи. Я около года занимался сценической речью и потом бросил, потому что теряется моя уникальность. А я этого не хочу.
Макс, привет! Можешь разобрать архитектуру feature-sliced-design и создать на неё основе проект на Next.js?
Привет, эта «архитектура» не стоит отдельного видео
Очень прикольно! Интересно бы посмотреть как обезопасить приложение имея сторонний бекенд с AuthJS v5. Например я передаю на бек логин и пароль (Credentials) получаю в ответ Access и Refresh Токены. Как их использовать для защиты страниц, и для запросов к бекенду в целом?
Эта тема была в мастер классе авторизация 2.0
FAST API + NEXT js. (like)
Однозначно NEST !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
NEST!
Привет, скажи пожалуйста, будет ли видео о graphql?
Пока не планируется
🐝
Чел, я тебя люблю.. Если вдруг случайно тебя встречу, можно подойти и обнять по братски? Контент божественен
🚀🚀🚀🚀🚀🚀🚀🚀🚀
Давай видео с использованием supabase
5-тый
А разве запрос на сервак next js это не тот же запрос, который может дорого стоить?
А где мы делаем запрос на сервер nextjs? Серверная часть в нексте это не сервер это немного другая прослойка которая называется edge
Отличный ролик , но вы слишком сократили этот ролик. Могли бы коснуться то чего вы хотели коснуться. Я с радостью посмотрел бы как вы пишете код и как вы пользуютесь внешними библиотеками
Пока щупаем форматы, хочется больше просмотров, поэтому и делаем более интересные видео для широкой аудитории
Сними видео про Grpc
no-cash не по-умолчанию. По умолчанию всегда статика.
Как называется болезнь когда ставишь лайк ещё не просмотрев видео?
Хорошее начало видео
умением оценить труд и огромные знание 🔥
рубрика очень крутая, но я считаю что лучше убрать ограничение по времени и оставить сухость подаваемого материала.
Спасибо за такой крутой видос!!!
Хочется делать на широкую аудиторию, а широкой аудитории не нравится смотреть по 2 часа материала. Так бы я с удовольствием бы делал, но нужны охваты и просмотры
Я думаю что можно сделать сериал) И разбирать по несколько блоков материала в каждом видео, в любом случае ты тут имеешь больше опыта, и решать тебе)))
сделал под ISR додал revalidate , сбилдил и в консольке показивает что (SSG) prerendered as static HTML (uses getStaticProps) что не так?
Это нормально, он и не будет показывать isr при сборке. Там нет такого пункта
го по vue js 3
как тебе Drizzle?
Хорошая тема, но сам еще не пробовал
Tailwind
Может ролик про интернациализацию? Раз сюда не поместилась.
Слабая тема для полноценного видео
@@REDGroup ну тут согласен. А если шорт? наверное будет мало времени😅
Хотя можно разбить на две части, то есть два шорта. И сделать как всегда супер выжимку по тайму 👍
Пока не понятно. Сейчас немного о другом мысли, о полной смене формата канала
у кого начальные компоненты nextjs поменялись?
coollllllllllllll
Redux please
Нужно по ангуляру
nest js
.
Все конечно хорошо объясняешь, но блин, быстро быстро и не успеваешь понять что и где ты пишешь. Скрыл навигацию по папкам и все, половину информации теряешь
Очень медленно поясняет
монтаж классный, как видео, крутой. Но next, как по-мне явно проигрывает vue, и явный лидер именно вьюшка, vue use, primevue, тонкие настройки реактивности, pinia, vite из коробки
Это ваше мнение, посмотрите наше видео про vue, где делали crm систему, мне вообще не понравился. Желания делать видео еще раз по нему нет, оно того не стоит. Для новичков да, поразвлекаться. Но тянуть в большие проекты я не понимаю как
vike крутая штука попробуй
.