Полный курс по Next js - Изучи Nextjs за 2 часа! | React SSR +таймкоды

💎 Оформить премиум подписку - htmllessons.ru/premium?
❤️ Отзывы тут - t.me/htmllessons_reviews
Новое большое видео на канале, сегодня я публикую полный курс Next JS для начинающих. Этот материал позволит тебе изучить Некст за 2 часа с нуля (важно только знание React). Считай это 20 уроков Next в одном видео. В прошлый раз я делал быстрый курс по Next, но это был не полный материал. В этом ролике будет как и практика next, на примере проекта, так и немного теории. Также отвечу на некоторые вопросы, которые встречаются на собеседование на Junior Front-end разработчика. Можно сказать это фундаментальный курс по Next от А до Я. Приятного просмотра!
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 1000 лайков и я уже следующее видео - курс Redux + RTK Query.
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
Скачать 🖥 готовый проект + база данных (требуется подписка) - htmllessons.ru/repositories#storage_file_76
🦋 ТГ канал - t.me/redgroupchannel
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensives?
🍥 Тема в редактор/IDE - codeSTACKr Theme
👉 Полезные ссылки из видео:
Настройка vs code + сниппеты - kzbin.info/www/bejne/kH6nlaZ-bLaIh7c
Полный курс по React - kzbin.info/www/bejne/oWSYe6dji9OthZo
Настройка Vs Code - kzbin.info/www/bejne/kH6nlaZ-bLaIh7c
Разбор Next.js 13 - kzbin.info/www/bejne/oXutmayGdruehZY
Amazon 2.0 - kzbin.info/www/bejne/bV7dqKmLhbCMpqc
00:00:00 - Начало
00:01:55 - Что такое Next.js? и его преимущества
00:06:39 - Установка проекта
00:08:23 - Тема и иконки в VS Code
00:09:05 - Разбор структуры
00:11:16 - Страницы и роутинг
00:18:51 - Правильная структура для компонентов
00:21:55 - useRouter
00:28:39 - Layout и Навигация по страницам
00:35:58 - Написание стилей, модульность и SCSS
00:38:10 - Новый вариант подгрузки шрифтов (Font component)
00:48:30 - Страница 404
00:49:37 - Как вставлять изображения? Image component
00:54:23 - Компонент Head
00:55:47 - SEO оптимизация (Meta component)
01:02:48 - Импорт только на клиенте ssr:false
01:05:32 - SSR vs SSG vs ISR (Что и когда использовать?)
01:11:51 - getServerSideProps
01:26:36 - getStaticProps
01:28:30 - getStaticPaths
01:32:44 - Как работают react хуки в Next.js?
01:33:50 - next.config Файл конфигурации (подробный разбор)
01:38:16 - Крутая фишка для авторизированных страниц
01:43:42 - Создание своего API на next.js
01:45:52 - Next.js 13 BETA на будущее
01:50:16 - Когда использовать Next.js?
01:51:37 - Важное понимание
#Next #NextJS #Некст #RedGroup
💡 Личный ТГ канал - t.me/hardmaxchannel
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[@REDGroup]

Вышел новый полный курс по свежей версии Next.js 13.5 - kzbin.info/www/bejne/mKnRqWxonN10m5o Скачать 🖥 готовый проект + база данных (требуется подписка) - htmllessons.ru/storage#storage_file_76 🦋 ТГ канал - t.me/redgroupchannel 👉 Полезные ссылки из видео: Настройка vs code + сниппеты - kzbin.info/www/bejne/kH6nlaZ-bLaIh7c Полный курс по React - kzbin.info/www/bejne/oWSYe6dji9OthZo Настройка Vs Code - kzbin.info/www/bejne/kH6nlaZ-bLaIh7c Разбор Next.js 13 - kzbin.info/www/bejne/oXutmayGdruehZY Amazon 2.0 - kzbin.info/www/bejne/bV7dqKmLhbCMpqc

[@user-uf5rl2ct6e]

Сколько ждать активацию примиум подписки оплатил криптой а подписку второй день жду(

[@REDGroup]

Сейчас проверим

[@user-uf5rl2ct6e]

@@REDGroup Я два дня назад заплатил все скрины отправил но вы не отвечаете хотя до оплаты отвечали.

[@PashaRomanovich]

Огромное спасибо тебе за труд!

[@kobakamladze4175]

Спасибо ОГРОМНОЕ за твой труд!!!!!

[@user-ng8nn9em4t]

Лайк не глядя👍👍👍 Блин Макс когда ты все это успеваешь, ты просто МАШИНА!!! Успехов тебе во всем и крепкого здоровья, чтобы по-больше нас радовать такими сочными видосами💥💣💥💣💥

[@azizbekkomilov3589]

Супер смотрел от начала до канца ) спасибо за видео! )

[@mariasindorai5678]

Лучшее объяснение важных концептов. Спасибо за контент!

[@user-rm9ih7nc1u]

Спасибо за контент! Будет круто посмотреть видео по TS

[@user-jy3ll2qf9v]

Крутой человек, делаешь отличный контент, продолжай в том же духе! Удачи тебе!

[@alexanderkomanov4151]

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

[@iBratish]

Благодарю вас, изучил юнити и немного С++ Теперь начну изучать веб, так как хочу делать проекты как вы, это моя мечта делать такие серьезные проекты, и смотреть как они оживают и находят место для общего пользования! Еще раз спасибо, подписался!

[@d1mas1k2KA]

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

[@mvttofficial]

Продолжай в том же духе)

[@holfizz7868]

Посмотрел первые 20 минут и уже очень много нужного узнал. Спасибо тебе большое)

[@crewch]

Спасибо за твои видео

[@liquell4528]

Спасибо за курс. Очень хотелось бы посмотреть что то подобно и про Vue3

[@elamantaalaibekov452]

наконец досмотрел крутой ролик!!! Спасибо💥💫

[@REDGroup]

Можете глянуть еще по редакс

[@elamantaalaibekov452]

@@REDGroup сейчас смотрю интенсивы на вашей платформе. А потом да, надо посмотреть видео про Redux

[@vladimirmartynov4747]

Интересно, спасибо! (подписался)

[@vsevolodzorin5725]

Благодарю!

[@user-op1oi8hx4z]

Снимите по TS, было бы очень полезно для многих

[@mihailfokin4903]

Рекомендую к просмотру, очень доступно обьясняет

[@SlavaSanin]

Супер!!!!! Спасибо!!!!!

[@dimalukashenko4865]

Отличный урок, спасибо за труд

[@user-ql5on8rk3i]

Вложенность pages 14:56 появляется при условии, что next проект был установлен с конфигурацией 7:03 "Use App Router (recomended) - no". Иначе вложенность src/app без pages.

[@Dina-pk4pc]

Спасибо за подсказку❤

[@shoxrahimov8594]

Спасибо большое

[@tgxiufkfwwu]

Топ 🔥🔥

[@RewCSharp]

Спасибо за урок!

[@user-jn5ki7uu7t]

Очень годные видео курсы , без воды , спс бро !

[@REDGroup]

Пожалуйста, скоро еще один

[@forckes]

Круто🚀🚀🚀🚀🚀

[@georgee-frontender]

как всегда лутший)

[@user-fe2hf9ff3f]

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

[@REDGroup]

🙏

[@im_zvezddd1281]

Контент заслуживающий миллионы просмотров. Спасибо, что делаешь такой годный контент и не жалеешь свое время на нас❤

[@user-ry7vo5mn1c]

Очень крутое и полезное видео

[@romanpityul8805]

Спасибо Макс!! Очень доходчиво и четко объясняешь! Так же купил подписку на твой платный курс, и так же не пожалел) топ-контент!!)) Всем рекомендую!!

[@REDGroup]

Рад, слышать. Спасибо за поддержку!

[@mak_whisk]

Спасибо

[@user-sz3uk3ri2u]

супер, жду redux

[@zhurabekov]

Привет Макс. уже можно использовать новый next с app?

[@Housanify]

У тебя единственное нормальное обьяснение как работает next 13 версии , спасибо) Хотелось бы видео по typeORM по конфигам как делать миграции прописивать скрипты ведь на реальних проектах никто не даст поставить свойство synhorize :true )))

[@Artem_72]

Он послан к нам нести знания!!!

[@morrozec]

он послан к нам впаривать свою платную Хрень

[@mrs2251]

Добрый день! Видео 🔥. Сделайте пжл теперь видео с app.

[@user-kq2kf8ws6x]

мне единственное не нравится в его видео - это скорость. Ты реально бешенный пулемёт, можно помедленнее)) А так вообше красавчик, уважение and respect 😃

[@baker510]

Лучший

[@openstation_official]

пересматриваю 3 раз топово

[@iventeye]

23:45 Кто смотрит сейчас, в версии Next.js 13.4.10 pathname отделили от хука useRouter и теперь для этого используется отдельный хук usePathname. А asPath вообще был выпилен, поэтому его использовать больше не нужно.

[@michaelderbeyev7703]

Насчет шрифтов и как красиво их заюзать в приложении. Просто создаем компонент, где мы объявляем шрифты и оборачиваем весь апп на руте этим компонентом. Т.о. фонты будут доступны везде, через variable, а т.к. обычно мы хотим объявить фонты 1 раз, там же, в этом компоненте и делаем весь сетап фонтов

[@admall5596]

На 1:18 про получение данных об автомобиле по endpoint-у /cars/1 = json-server сам сопоставит 1 с id и сбегает по id у тебя в структуру json файла и в ответ отдаст один элемент т.е. нужный автомобиль с id 1 (ICar). Просто ради уточнения). Итого: проще обратиться, не нужно в этом случае мутить с params, отдаст именно то, что нужно без выдергивания с массива по нулевому индексу. Да, и лайк уже ессно поставлен)

[@michaelderbeyev7703]

Подключение шрифтов через className используется, когда подключаешь какую-то 3rd-party библиотеку (типа календарь и т.д.), и авторы дали только className, как единственный способ кастомизировать их коомпоненты. Другими словами, для совместимости с тонной пакетов, которые мы юзаем из npm

[@vladimirbavtenko9080]

Если еще сделаешь проект Next + FSD = боюсь не сдержусь купить подписку, как минимум в благодарность за труды! Можно также туда state manager добавить для сочности. С новым next 13.4 как минимум. Ребят, поддержите, парень супер классный контент делает!

[@REDGroup]

А что такое FSD?

[@shimmychannel3573]

Думаю для полного кайфа как раз в твоем исполнение TS не хвататет. React, Next, Ts - было бы вообще идеально.

[@sardorsultanov3409]

Одна из причин мне нравится твои видосы всегда делаешь таймкоды

[@REDGroup]

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

[@sardorsultanov3409]

Да из за этого мне нравится твой контент

[@magixxmagixx2678]

Крутое видео, сделай пожалуйста как сделать деплой на хостинг VPS/VDS Next JS

[@Vedar.]

🔥🔥🔥🔥🔥

[@user-xo9ks9bc6j]

Один вопрос ! Next решает както задачу кэширования браузером: html/ks/css ?

[@maximkutprot7374]

Отличное видео, спасибо! При использовании react toolkit + react persist а также динамические мета теги как в примере (или если просто указать на каждой странице в Head например title)почему то они не работают на стороне сервера, не затирают Head из файла _document. Если убираю react persist мета теги отображаются на стороне сервера.

[@REDGroup]

Я не смогу в одном сообщении все объяснить, заходите в вип чат если будет желание там отвечу

[@maestro3112]

то что надо

[@user-gn2rq6fd7g]

а зачеи так сложно делать компонент клиентским? через dynamic? Чем этот способ отличается от способа написать 'use client' сверху? Объясните, пожалуйста

[@riseofkingdoms6183]

Здорова! только что прошел краткий урок , JavaScript от а до я, он 40 с чем-то минут идёт, фууух во жесть для меня это с нуля все, но что радует что все получилось. Повторял за Максом, в начале были проблемы куча ошибок потом настроил vs cod поменял настройки сделал как у Макса. Настроил гит баш этот🤣. И все проделал в точности как делал Макс все сработало очень рад, теперь перехожу на интенсив бек для начинающих очень затянуло прямо как игру сложную проходишь только с подсказками🤓

[@riseofkingdoms6183]

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

[@maga_frank]

Мечта N1: Иметь такие же знания в программировании как у автора.. Эхх когда же этот момент настанет)

[@illiamuchnik4528]

Вы рассуждали где некст не нужен, так вот мне недвано лендингпейдж на нексте заказали.Было смешно )

[@biLLie_wiLLie]

Отличное видео! Хочу, чтобы в ролике про редакс объяснил в чем его отличие от react query

[@user-nm9gw5fd4e]

Redux state manager, react query state manager для работы с http запросами

[@biLLie_wiLLie]

@@user-nm9gw5fd4e извини, но не понимаю, что ты сказал. Можешь подробней описать проблему, которую решает react query? Почему redux недостаточно?

[@user-nm9gw5fd4e]

@@biLLie_wiLLie redux это глобальный стор для управление с состоянием, react query помогает избавиться от повторящего кода при работе с запросами, плюс сохранить в кэш, рефетч даннхы и т.д, до RTK(Redux Tool Kit) у редакса не было наподобие react query, по сути что rtk query и react query делает одну и ту задачу одинаково, (инваладация запросов, сохранить в кэш, и удобное апи для обработки состояние загрузки, ошибки и т.д). Если ты используешь rtk query смысла нет ставить react query, это работает и обратно. По мне у react query по больше функционала и мне нравится react query

[@user-nm9gw5fd4e]

@@biLLie_wiLLie редакс и react query две разные вещи, редакс решает проблему со состоянием, react query прослойка и инструмент для работы с запросами

[@nic-ori]

Thanks.

[@michaelderbeyev7703]

дублирует render (и соответственно console.log) из-за strict mode в react

[@Shli4ara]

Все конечно круто. Но есть вопросы. А именно различия прицепов деплоя при подходе SSR SSG ISR которые тут не упомянались. Если SSG можно просто напросто перекинуть файлики на хостинг и всё будет работать, то с SSR и ISR все так просто работать не будет. Было бы не плохо про это тоже снять видео. И деплость не на vercel, а куда по сложнее. На тот же яндекс клауд например.

[@baker510]

Typescript было бы интересно

[@AlexGabber]

Насчет шрифтов. Нашел не плохое решение, даже несколько. Я создал компонент который возвращает в нем же подтянул (в моем случае это были локальные) шрифты, далее в этот глобальный стиль * { --default-font: ${ titillium.style.fontFamily }} то есть в стилях создал переменную шрифта. Этот компонент я интегрировал в _app просто над Component. И все, тем самым подключается в style переменная с готовым шрифтом. Далее в глобальном файле стилей просто body > font-family: var(--default-font). Еще удавалось в тайлвинд интегрировать, но там история была с App и надо пересмотреть подход, этот выглядит вполне красиво :)

[@NayroTV]

Ё, братан, крутой ролик про Next.js! Спасибо, что поделился своим опытом с нами, начинающими. Я только начал изучать этот фреймворк, и твои объяснения были легко усвояемы и понятны для меня. Твой кайфовый стиль объяснения технических деталей дал мне мотивацию и уверенность в том, что я могу освоить этот фреймворк. Спасибо еще раз, братан, ты рулишь! З.Ы. Можно спросить? Что за поисковик у тебя? :)

[@REDGroup]

Честно не помню, если браузер имеешь ввиду то brave

[@NayroTV]

@@REDGroup Ну да браузер, просто интерфейс намного лучше чем у гугла, спасибо ещё раз)

[@MustafaevN]

Привет, подскажи пожалуйста, какой набор сниппетов юзаешь для next? не смог найти такие как у тебя (

[@REDGroup]

Мои сниппеты, в настройке на канале

[@sabrenda]

годный контент, спасибо👍 можешь подсказать что за снипеты юзаешь? не нашел их нигде, заранее спасибо) p.s дошел до части где ты сказал где их взять😅

[@REDGroup]

Мои сниппеты, в тг канале надо поискать

[@Moonlight-kh9pr]

У кого такая ошибка при запуске и как ее решить? я уже удалял папку node modinpm install Error: Cannot find module 'stream/web'

[@animeparty4460]

Подскажите что за тема иконок?

[@dmytrovodolazhchenko891]

Всем привет! Подскажите, пожалуйста, что за сниппет используется при создании компонентов Next.js По типу 'tafcen' как используется в видео, не могу никак найти.. Автор, может ты подскажешь. Спасибо за твою работу и труд!

[@REDGroup]

Привет, мои кастомные сниппеты. Настройка была на канале

[@finjakeoff5957]

wait for RTK! The best!

[@kobakamladze]

почти во всех проектах на этом канале используется typescript, было бы не плоха снять полный курс по ts.

[@Cleannetcode]

Привет, от людей из будущего. Спасибо за контент :)

[@jumanov16]

kak aktivirovat snippety i nastroiki??????????

[@maronwilsons]

Оч круто получилось, Макс с чего начать с Redux или c redux toolkit???

[@user-kn7ky1ih2h]

просто глянь разок redux, а используй toolkit

[@REDGroup]

Redux toolkit

[@PushkaryovVsevolod]

Ты ахеунный лектор!

[@user-ez1kg5fc5t]

подскажите какой программой Макс пользуется чтобы узнать цвет который сейчас на экране?

[@REDGroup]

Color slurp

[@interviewing8]

Пожалуйста делай видео как учиться на geekbrains

[@zoxione]

1:13:46 у тебя залагал из-за плагина Import Cost - он не может вычислить размер импорта NextPage

[@admall5596]

На 24 минуте про удивление, мол почему выводится дважды в консоли браузера, так у тебя в конфиге "reactStrictMode: true," ;)

[@youneshenni5417]

I just found your channel and it's amazing. Would you consider doing videos in english ?

[@REDGroup]

Hi. Thanks. I think we make world level content. I plan record video in English in Future or we will add English voice in all videos (KZbin is already testing this feature on large channels)

[@youneshenni5417]

@@REDGroup Looking forward to it. Great work :)

[@user-gl3fo9vi2s]

топ

[@miki2012miki]

Ребята, как он быстро создает компоненту ? в веб шторме rsc а в vs code как ? Спасибо!

[@REDGroup]

У меня свои сниппеты, на канале была настройка Vscode

[@dimalukashenko4865]

Опиши команды сокращенные, которыми ты комопненты создаешь

[@Denis-rh9jp]

Хотел бы купить твой курс , но не могу - нету возможности :(

[@shortsvideo4570]

що скажете за React Server Components думаю ця штука заменит next?

[@REDGroup]

Свежий курс уже есть на канале

[@lisofsky8151]

ты не ред групп ты mad max ))) безумный макс)) ппц скорость )) я не успеваю вообще вкурить что происходит )) но спасиб за контент годный

[@REDGroup]

Пожалуйста

[@zergzerg4844]

Касательно подключения шрифтов не тут не согласен 47:44 Все работает и с global.css. Так как сейачс структура файлов поменялась и глявным файлом является layout.tsx , то берем и подключаем в нем global.css , назначаем body { font-family: var(--poppins), sans-serif;} и в тег body прокидываем переменную через clasName. И вуфля, шрифт работает глобально.

[@faridzeynalov]

Структура не поменялась,вы наверное просто когда подклбчали выбрали App router,а не custom router,так как,custom просто удобнее,сами назначаем роутинг и путь файлов.

[@REDGroup]

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

[@zergzerg4844]

@@faridzeynalov Вон оно как, спасибо разьяснения, а то я не врубался зачем сделали 2 вида роутинга

[@lovelyserafima]

Сервак с БД можно скачать только по подписке?

[@REDGroup]

Да, конечно

[@luckytima2315]

Ну что сказать, да неплохо но angular для элиты

[@ashimov1970]

плиз видео по typescript

[@alexanderdobrin8788]

Друзья, подскажите пожалуйста 2 момента. Удачная ли идея учить сразу некст, если еще не знаю реакт, чтоб двух зайцев разом? И если раньше бекенд писался например на neS.js, а фронт на react, то остается ли все еще актуальным neSt, например для использования вместе с neXt в одном проекте, или такое не возможно? Интересуюсь наперед, поэтому вопросы могут показаться странными. Спасибо кто прочитал)

[@REDGroup]

1 - Сначала лучше понять как работает реакт 2 - конечно актуально, next это полу бэк. В крупных проект бэк это всегда отдельный проект

[@vladimirbavtenko9080]

Если ещё feature slice design добавишь, вообще цены не будет!

[@REDGroup]

Это вкусовщина

[@rasim.ismayilov]

Здравствуйте! хочу купить интенсив но не получается. Звонил банку они говорят что с их стороны никаких проблем и запретов нет. В чем может проблема ?

[@REDGroup]

Напишите в наш тг бот t.me/redsupportbot

[@atmalive]

Вторые сутки пытаюсь локаль прикрутить (переезжаю с реакта на next - ничерта не врубаюсь. Пока выглядит как костылище)

[@shelovesrequezz]

Сейчас уже можно использовать next 13.4.9

[@fedc_]

Брат ну куда ты все спешишь(

[@delite378]

очень хотелось бы тацпскрипт видеть

[@user-nh3ce8ff6o]

у меня почему-то Meta компонент не работает. Мб из-за рутового лаяота?

[@REDGroup]

В новом некст все по другому, скоро сниму курс по новому некст

[@user-nh3ce8ff6o]

Спасибо большое@@REDGroup

[@hasirati]

Где взять снипет tafce

[@pomedorkaaa]

Нашёлся ответ?

[@hasirati]

@@pomedorkaaa есть видео у него, вроде "мои настройки vs code" там он рассказывает про свои сниппеты и там есть ссылка не телеграм. А уже там есть файл со сниппетами