Курс по Next js 14 - Без воды за 40 минут! RED Essence

🔥 Оформить премиум подписку - 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

[@REDGroup]

Поддержи видео лайком, 2000 лайков 👍 и я делаю новое видео данного формата! Скачать 🖥 папку проекта - t.me/redgroupchannel

[@user-in8ge3ff4r]

монтаж вау, а содержание еще лучше. ждем nest!)

[@user-dg7ri8yr7s]

ОНОООООООООООО!!!!! снова полный курс вышел на новый уровень)

[@k3nx750]

Очень крутой видос, и формат также. Все четко, коротко и ясно

[@lobastov361054]

Формат и подача - огонь. Спасибо большое.💪 Единственный из блогеров по фронту, кого смотрю не на х2 скорости (на х1.5 вполне ок). В отличии от англоязычных коллег - минимум сюсюкания, все по делу. За 40 минут - польза половины англ udemy курса на 40 часов. Еще и на русском. Еще и с мэмами. Это разъеб.🔥

[@user-iw2ne1ek2u]

отличный контент и монтаж! Спасибо!

[@jacktwinn]

Ничего себе) недавно начал делать коммерческий проект для себя, решил попробовать на некст для сео, и за 40 минут ты закрыл абсолютно все вопросы которые у меня возникли)

[@RIdlsan]

Вообще огонь! Знаком с React но про Next js не слышал ничего. Теперь имею общее представление, респект что быстро и с нюансами всё рассказал

[@kohanokhrin]

Спасибо большое за материал! Очень круто

[@user-np5zk1ru5e]

спасибо за такое видео я учу next js и не понимал весь его функционал,а в интернете много воды. я на первых 17 минут видео узнал больше чем за неделю

[@freepeopleworldtv6138]

Ура. Как раз минута в минуту уже хотел смотреть next 5 часов по англ

[@user-wk4em3pd3g]

Продолжай в том же духе, Макс!🔥🔥🔥🔥

[@Atikan37]

Не могу подобрать, чтобы выразить своё восхищение! Просто машина!

[@polinaigrushkina4489]

Спасибо за видео!)) У меня вопрос про обработку 404 ошибки, в чем разница между not-found.jsx и error.jsx ?

[@DifficultPhil]

просто на лайте на расслабоне посмотрел ролик, умеешь заинтересовать к покупке курса)))

[@alexeysvetlenko2217]

Круто, спасибо

[@fanurkhusainov6542]

Спасибо как раз хотел сделать фронтовую часть на нексте в первый раз, а тут такой материал пришелся

[@KralinRuslan]

Спасибо, Макс, за крутой контент. Красавчик

[@user-fb5xr4jv6g]

Ты лучший просто бро 😎✊

[@user-yg1dy3uf8e]

Парни ответь на вечный вопрос, надо ли что-то менять в tsconfig?

[@VitalikLomakin-bt9oe]

Спасибо, как раз надо некст чекнуть

[@ProgIv]

Привет, а можно объеденить react(в качестве фронтенда) и django(как бекенд)? Или если пишешь на реакт, то бек должен быть node js/express js?

[@REDGroup]

Конечно можно. Не важен язык бэкэнда. Общение идет методом REST API или GraphQL

[@malfinbeats]

Можно объединить, используя drf и cors-headers, и ещё djangorestframework-simplejwt

[@ProgIv]

@@REDGroup спасибо

[@ProgIv]

@@malfinbeats спасибо

[@johna6436]

Спасибо!

[@GARLEENBEATS]

спасибо за видео, теперь бы про nuxt послушать)

[@creese85]

Спасибо огромное

[@alex_vande]

Это точно бесплатное видео ? СУПЕР ! Столько полезной информации! Спасибо большое за огромную работу. Хотелось бы ответить на один вопрос с видео: "Где нужно сократить что-то еще" - мое мнение: не нужно сокращать)

[@sanmarchen]

Монтаж бомба, формат бомба!

[@user-gk3zk5yk9i]

Спасибо за ролик

[@user-fc3qx5fi2m]

то что надо спасибо огромное ждём теперь nast :>

[@user-ki6sz4nz3l]

Качество материала и его преподнесение - на высшем уровне. Кто за TypeScript, ставим лайк

[@vadimknabaev8597]

Здорово Макс, а как добавить мультиязычные настройки в эту структуру некста

[@user-yg1dy3uf8e]

Пушка!

[@user-ug2dm3cj5q]

Привет. Ты же кодишь на VScode? Порекомендуй новичкам cursor - улучшенную версию VScode с ИИ. Я перешёл и так кайфую. Если есть какая-то монотонная работа копировать-вставить или что-то вырезать, он тебе облегчит задачу и ускорит процесс, не придётся вручную это делать. Рекомендую!

[@user-lb6lq5yh5q]

Макс, а вот возник вопрос. Используя redux toolkit мы оборачиваем layout в провайдер, то есть логично что все компоненты становятся клиентскими, как этого можно избежать?

[@rimi4014]

А зачем, если внутри лейаутов будет ui? Опиши конкретнее твой вопрос

[@whoooooo]

Нет, оборачивая весь проект в Providers где 'use client' это не значит что все компоненты будут клиентскими! Будет только конкретно этот клиентским, а внутри проекта так-же можно использовать и северные и северный-статик

[@user-lb6lq5yh5q]

@@whoooooo а как можно явно указать какой будет серверным к примеру?

[@whoooooo]

@@user-lb6lq5yh5q для этого есть 'use client' - Выполняется на клиенте, но может быть пред загружен на сервере если он статический. В этом случае он (static) 'use server' - Это как раз северный компонент. По умолчанию если ничего не указать то nextjs будет автоматический его определять как северный.

[@whoooooo]

@@user-lb6lq5yh5q не знаю почему прошлый комент куда-то пропал :) Вот нашел вырезку хорошо поясняющею use server: Компоненты, отмеченные как use server, выполняются исключительно на сервере. Это может быть полезно для задач, требующих обработки данных на сервере, таких как обращения к базам данных, обработка конфиденциальной информации или операции, которые не должны быть видны или доступны на клиентской стороне. Компоненты, отмеченные как use server, не посылают свой JavaScript-код в браузер, что сокращает объем передаваемых данных и ускоряет загрузку страницы. use client: Компоненты, работающие с этой меткой, выполняются исключительно в браузере пользователя. Это полезно для динамических интерактивных элементов интерфейса, которые требуют быстрого ответа без повторного обращения к серверу, например, анимации или обработка ввода пользователя в реальном времени. Отсутствие обеих меток: Если компонент Next.js не помечен ни как use server, ни как use client, он по умолчанию обрабатывается как универсальный компонент. Это означает, что он может исполняться как на сервере, так и на клиенте. Next.js оптимизирует, где именно выполнять такие компоненты на основе их использования в приложении и текущих требований к производительности.

[@user-wm2ze6im3x]

лайк авансом

[@user-wt5cr7xr1r]

17:55 - middleware имеется ввиду? Как-то давно завис над похожей задачей (надо было slug получить, но оставить компоненту серверной) так и не получилось решить. Ну это pet проект, поэтому забил на время. Можете дать пару идей как решить эту проблему? Использую next 14 на проекте

[@andrsh9388]

slug в сервер комопнентах получаєм через пропс params наприклад : const async Component = ({ params }: {params:{slug: any}}) => {}

[@user-wt5cr7xr1r]

@@andrsh9388 спасибо, на днях попробую 👍

[@AlexeyRiched]

можете помочь составить роадмап для фуллстак разраба с 0 на базе ваших курсов? или интенсивы не для новичков?

[@REDGroup]

Напишите в наш тг бот @red_support_bot

[@AlexeyRiched]

@@REDGroup написал но там тишина че то)

[@REDGroup]

Да, ответ не быстрый. Так как отвечаю в основном сам, пока в команде нет человека на постоянной должности. Ожидайте

[@MrTopolevsky]

Спасибо за видео! Полезно, коротко и по сути! Просьба сделать видео где проект NEXTJS устанавливается не на Versel, на обычном хостинге. Есть ли в таких проектах трудности и особенности? Класным продолжением такой тематике будет разворачивание сайта на NEXTJS и NESTJS также на обычном хостипге. Пожелание сделать видео в таком же формате как и это видео. Дать готовый код и пройтись по основных моментах. Видео на 5 часов очень полезны однако на его создание идут огромные усилия. Может, стоит попробовать лайт вариант!

[@REDGroup]

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

[@ma1abakiev]

ляяяя, просто лучший. Продолжай в том же духе и превзойдёшь всех других ютуберов по фронту. Формат ахонь

[@domikpriklyocheniu3611]

Чтоб изучить некст в каком порядке смотреть твои видео по нексту? или только это видео?

[@REDGroup]

Только это видео

[@closedall8764]

Есть ли смысл писать на React или эта библиотека является его полной заменой. Если же нет, то для каких конкретных случаев и задач она подходит лучше чем React

[@REDGroup]

В видео есть тайм код на эту тему. Это продолжение реакта. Сначала учим реакт, потом некст

[@andriystadnik7453]

Привет, подкажи, что сначало надо изучить, курс по реакту и потом по next или наоборот? Спасибо

[@REDGroup]

Конечно, сначала реакт

[@user-ie5pz6iw5s]

Крутой ролик, возник вопрос про Route handlers, их вообще когда надо юзать, и нужно ли их вообще юзать, если придерживаться концепции фронт и бэк раздельно?

[@REDGroup]

Если концепция разделения, то в очень редких случаях. К примеру если работать с сессия

[@Igor-uz3vn]

Очередной крутой ролик! Респект Макс! Я заметил что у тебя ещё не было ни одного web3 проекта...Ты не думал сделать что-то на нексте + блокчейн

[@REDGroup]

Эта тема мне не интересна

[@domikpriklyocheniu3611]

Что за тема иконок?

[@APMApm-xx9qk]

Очень крутое видео Макс, просто бомба!!🔥 Как раз начал писать на next. Но у меня есть одна проблема, которую я долго не могу решить. Допустим я на клиенте сохраняю и получаю значение из localstorage и хочу менять контент в зависимости от него. Но у меня выходит ошибка, так как данные на сервере и на клиенте отличаются(вроде называется гидратацией). И как тогда быть в этой ситуации, может нужно заменить localstorage на что-нибудь другое ,если хочу что-то сохранить и чтобы оно после перезагрузки оставалось. Все это происходит на клиенте с использованием директивы "use client".

[@REDGroup]

Нужно через useeffect работать

[@kiz0r]

очень познавательное видео, спасибо, Макс, за старания! Тему из видоса не нашел( Можно ссылку?

[@REDGroup]

Это стандартная тема vs code

[@spitfire4725]

Хотелось бы полный разбор неста)))

[@tymurkr]

👍

[@frk_91]

Однозначно NEST !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@kh4ff]

Ждём обновлённый курс по Tailwind

[@user-pk5fl8zp5z]

Привет, скажи пожалуйста, будет ли видео о graphql?

[@REDGroup]

Пока не планируется

[@YonchiMolnar]

Очень прикольно! Интересно бы посмотреть как обезопасить приложение имея сторонний бекенд с AuthJS v5. Например я передаю на бек логин и пароль (Credentials) получаю в ответ Access и Refresh Токены. Как их использовать для защиты страниц, и для запросов к бекенду в целом?

[@REDGroup]

Эта тема была в мастер классе авторизация 2.0

[@IlyaBesprozvannykh]

Макс, привет! Можешь разобрать архитектуру feature-sliced-design и создать на неё основе проект на Next.js?

[@REDGroup]

Привет, эта «архитектура» не стоит отдельного видео

[@azittoo4362]

🐝

[@user-qr1mx9ze9t]

🚀🚀🚀🚀🚀🚀🚀🚀🚀

[@STiGMA85X]

NEST!

[@aiki5487]

Ролик огонь, спору нет. Но если Вы собираетесь продолжать эту рубрику, то хотелось бы чуть менее быстрый темп речи! Очень сложно переваривать мысли, которые произносятся как скороговорка)

[@REDGroup]

Это уже не исправить, такой у меня темп речи. Я около года занимался сценической речью и потом бросил, потому что теряется моя уникальность. А я этого не хочу.

[@crafters2454]

5-тый

[@romanFactsPedia]

FAST API + NEXT js. (like)

[@ilyatemnikov9624]

Чел, я тебя люблю.. Если вдруг случайно тебя встречу, можно подойти и обнять по братски? Контент божественен

[@user-ju3ce2ty9m]

А разве запрос на сервак next js это не тот же запрос, который может дорого стоить?

[@REDGroup]

А где мы делаем запрос на сервер nextjs? Серверная часть в нексте это не сервер это немного другая прослойка которая называется edge

[@holfizz7868]

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

[@REDGroup]

Хочется делать на широкую аудиторию, а широкой аудитории не нравится смотреть по 2 часа материала. Так бы я с удовольствием бы делал, но нужны охваты и просмотры

[@holfizz7868]

Я думаю что можно сделать сериал) И разбирать по несколько блоков материала в каждом видео, в любом случае ты тут имеешь больше опыта, и решать тебе)))

[@javohirshuhratov6204]

Сними видео про Grpc

[@kaemxk]

Давай видео с использованием supabase

[@MenuMoscow]

coollllllllllllll

[@bekboltailakov6944]

Как называется болезнь когда ставишь лайк ещё не просмотрев видео?

[@tymurkr]

Хорошее начало видео

[@shba_shorts]

умением оценить труд и огромные знание 🔥

[@narwhal6422]

Рак мозга

[@user-mb2yp5ct8w]

го по vue js 3

[@FunniestAnimals5723]

Привет,расскажи как научится понимать создания чатов и банковского приложения ,подкину идею для видео создай чат без фреймворков на чистом html css js php mysql вот это реально нужно как некогда !!! Потому что ведь негде учить создания месседжера только базу вечно пихают

[@REDGroup]

Привет, на канале посмотри видео про создание чата, все уже есть

[@FunniestAnimals5723]

@@REDGroup я просто попробовал вбить СОЦИАЛЬНАЯ СЕТЬ и чат и вижу только с фреймворками а есть без фреймворков?)

[@FunniestAnimals5723]

@@REDGroup так он с фреймворками есть без фреймворков ? СЫЛКУ ПЛИЗ)))

[@barackobama386]

как тебе Drizzle?

[@REDGroup]

Хорошая тема, но сам еще не пробовал

[@user-wt5cr7xr1r]

Может ролик про интернациализацию? Раз сюда не поместилась.

[@REDGroup]

Слабая тема для полноценного видео

[@user-wt5cr7xr1r]

@@REDGroup ну тут согласен. А если шорт? наверное будет мало времени😅 Хотя можно разбить на две части, то есть два шорта. И сделать как всегда супер выжимку по тайму 👍

[@REDGroup]

Пока не понятно. Сейчас немного о другом мысли, о полной смене формата канала

[@user-us4yz4yt9c]

Tailwind

[@dowranorazow6584]

Отличный ролик , но вы слишком сократили этот ролик. Могли бы коснуться то чего вы хотели коснуться. Я с радостью посмотрел бы как вы пишете код и как вы пользуютесь внешними библиотеками

[@REDGroup]

Пока щупаем форматы, хочется больше просмотров, поэтому и делаем более интересные видео для широкой аудитории

[@user-xt4gn8dy8j]

Redux please

[@arampetrosyan6990]

nest js

[@devcodingitstudio2764]

Нужно по ангуляру

[@krivalex]

монтаж классный, как видео, крутой. Но next, как по-мне явно проигрывает vue, и явный лидер именно вьюшка, vue use, primevue, тонкие настройки реактивности, pinia, vite из коробки

[@REDGroup]

Это ваше мнение, посмотрите наше видео про vue, где делали crm систему, мне вообще не понравился. Желания делать видео еще раз по нему нет, оно того не стоит. Для новичков да, поразвлекаться. Но тянуть в большие проекты я не понимаю как

[@kh4ff]

Бро, канал TeaCoder копирует твои превью, названия видео, описания и даже повторяет всё слово в слово 🤣. Просто угар. Недавно он изменил под своими некоторыми видео название и описание, чтоб не палиться. Он тупо повторяет всё за тобой, весь код и слова...

[@REDGroup]

Пусть повторяют, за нами не угнаться. Вернусь с отпуска стартуем новые форматы. Копируют у лучших это факт.

[@kh4ff]

@@REDGroup лучший 💪

[@user-lm3mi2up4d]

.

[@freepeopleworldtv6138]

сделал под ISR додал revalidate , сбилдил и в консольке показивает что (SSG) prerendered as static HTML (uses getStaticProps) что не так?

[@REDGroup]

Это нормально, он и не будет показывать isr при сборке. Там нет такого пункта

[@whoooooo]

.