The Complete Next js Course - Learn Nextjs in 2 Hours! | React SSR + timecodes
Вставка
- Опубліковано 18 тра 2024
- 💎 Get a premium subscription - htmllessons.ru/premium?...
❤️ Reviews here - t.me/htmllessons_reviews
New big video on the channel, today I am posting the complete Next JS course for beginners. This material will allow you to learn Next in 2 hours from scratch (only knowledge of React is important). Count it as 20 Next lessons in one video. I did a quick course on Next last time, but it wasn't the full story. In this video, there will be both the practice of next, on the example of a project, and a little theory. I will also answer some of the questions that are encountered at the interview for the Junior Front-end developer. We can say this is a fundamental course on Next from A to Z. Enjoy watching!
I hope you appreciate my efforts, please like and subscribe. 🔥 1000 likes and I have the next video - Redux + RTK Query course.
If you have any questions about this topic - let me know in the comments!
Download 🖥 finished project + database (subscription required) - htmllessons.ru/storage#storag...
🦋 TG channel - t.me/redgroupchannel
⚡️ List of intensives by subscription - htmllessons.ru/list-intensive...
🍥 Theme in editor/IDE - codeSTACKr Theme
👉 Useful links from the video:
Customization vs code + snippets - • 🦋 Настройка VS Code д...
Complete course on React - • Полный курс React JS д...
Setting Vs Code - • 🦋 Настройка VS Code д...
Parsing Next.js 13 - • Next.js 13 - Это все м...
Amazon 2.0 - • 🚀 AMAZON 2.0 - ИНТЕРНЕ...
00:00:00 - Start
00:01:55 - What is Next.js? and its benefits
00:06:39 - Project installation
00:08:23 - Theme and icons in VS Code
00:09:05 - Parsing the structure
00:11:16 - Pages and routing
00:18:51 - Correct structure for components
00:21:55 - useRouter
00:28:39 - Layout and Page Navigation
00:35:58 - Writing styles, modularity and SCSS
00:38:10 - New font loading option (Font component)
00:48:30 - Page 404
00:49:37 - How to insert images? image component
00:54:23 - Head component
00:55:47 - SEO optimization (Meta component)
01:02:48 - Import only on the client ssr: false
01:05:32 - SSR vs SSG vs ISR (What and when to use?)
01:11:51 - getServerSideProps
01:26:36 - getStaticProps
01:28:30 - getStaticPaths
01:32:44 - How react hooks work in Next.js?
01:33:50 - next.config Configuration file (detailed analysis)
01:38:16 - Cool feature for authorized pages
01:43:42 - Creating your own API on next.js
01:45:52 - Next.js 13 BETA for the future
01:50:16 - When to use Next.js?
01:51:37 - Important insight
#Next #NextJS #Next #RedGroup
💡 Personal TG channel - t.me/hardmaxchannel
👉 All links (+ editor setting) and information about me - redlinks.tech/
Watch the video UNTIL THE END, subscribe to the channel, put 👍 and the bell 🔔
Вышел новый полный курс по свежей версии Next.js 13.5 - ua-cam.com/video/bxnx92gxAe8/v-deo.html
Скачать 🖥 готовый проект + база данных (требуется подписка) - htmllessons.ru/storage#storage_file_76
🦋 ТГ канал - t.me/redgroupchannel
👉 Полезные ссылки из видео:
Настройка vs code + сниппеты - ua-cam.com/video/ZMDdsH7QUQU/v-deo.html
Полный курс по React - ua-cam.com/video/k35Jt-VnzO8/v-deo.html
Настройка Vs Code - ua-cam.com/video/ZMDdsH7QUQU/v-deo.html
Разбор Next.js 13 - ua-cam.com/video/kJJhyPAVkO4/v-deo.html
Amazon 2.0 - ua-cam.com/video/7-zwvUPKYpE/v-deo.html
Сколько ждать активацию примиум подписки оплатил криптой а подписку второй день жду(
Сейчас проверим
@@REDGroup Я два дня назад заплатил все скрины отправил но вы не отвечаете хотя до оплаты отвечали.
Огромное спасибо тебе за труд!
Спасибо ОГРОМНОЕ за твой труд!!!!!
Лайк не глядя👍👍👍 Блин Макс когда ты все это успеваешь, ты просто МАШИНА!!! Успехов тебе во всем и крепкого здоровья, чтобы по-больше нас радовать такими сочными видосами💥💣💥💣💥
Спасибо за контент! Будет круто посмотреть видео по TS
Супер смотрел от начала до канца ) спасибо за видео! )
Спасибо огромное!!!
Лучшее объяснение важных концептов. Спасибо за контент!
Благодарю вас, изучил юнити и немного С++
Теперь начну изучать веб, так как хочу делать проекты как вы, это моя мечта делать такие серьезные проекты, и смотреть как они оживают и находят место для общего пользования!
Еще раз спасибо, подписался!
Спасибо за такой видеоролик, сейчас пишу сайт на реакт, по его завершению планирую переходить на некст, начну с твоего видео, а так красава, что делаешь такие видео, которые очень качественные и очень удобные для просмотра, продолжай в том же духе, мы в тебя верим!
Благодарю!
Вложенность pages 14:56 появляется при условии, что next проект был установлен с конфигурацией 7:03 "Use App Router (recomended) - no". Иначе вложенность src/app без pages.
Спасибо за подсказку❤
Спасибо за твои видео
Продолжай в том же духе)
Супер!!!!! Спасибо!!!!!
Спасибо за курс. Очень хотелось бы посмотреть что то подобно и про Vue3
Топ 🔥🔥
Рекомендую к просмотру, очень доступно обьясняет
Крутой человек, делаешь отличный контент, продолжай в том же духе! Удачи тебе!
Круто🚀🚀🚀🚀🚀
Снимите по TS, было бы очень полезно для многих
Спасибо большое
наконец досмотрел
крутой ролик!!! Спасибо💥💫
Можете глянуть еще по редакс
@@REDGroup сейчас смотрю интенсивы на вашей платформе. А потом да, надо посмотреть видео про Redux
Он послан к нам нести знания!!!
он послан к нам впаривать свою платную Хрень
Посмотрел первые 20 минут и уже очень много нужного узнал. Спасибо тебе большое)
Спасибо за урок!
супер, жду redux
Интересно, спасибо! (подписался)
как всегда лутший)
Отличный урок, спасибо за труд
23:45 Кто смотрит сейчас, в версии Next.js 13.4.10 pathname отделили от хука useRouter и теперь для этого используется отдельный хук usePathname. А asPath вообще был выпилен, поэтому его использовать больше не нужно.
мне единственное не нравится в его видео - это скорость. Ты реально бешенный пулемёт, можно помедленнее)) А так вообше красавчик, уважение and respect 😃
Очень крутое и полезное видео
пересматриваю 3 раз топово
Очень годные видео курсы , без воды , спс бро !
Пожалуйста, скоро еще один
Спасибо
Спасибо большое за твои труды)
🙏
Насчет шрифтов и как красиво их заюзать в приложении. Просто создаем компонент, где мы объявляем шрифты и оборачиваем весь апп на руте этим компонентом. Т.о. фонты будут доступны везде, через variable, а т.к. обычно мы хотим объявить фонты 1 раз, там же, в этом компоненте и делаем весь сетап фонтов
Лучший
Контент заслуживающий миллионы просмотров. Спасибо, что делаешь такой годный контент и не жалеешь свое время на нас❤
Добрый день! Видео 🔥. Сделайте пжл теперь видео с app.
🔥🔥🔥🔥🔥
На 1:18 про получение данных об автомобиле по endpoint-у /cars/1 = json-server сам сопоставит 1 с id и сбегает по id у тебя в структуру json файла и в ответ отдаст один элемент т.е. нужный автомобиль с id 1 (ICar). Просто ради уточнения). Итого: проще обратиться, не нужно в этом случае мутить с params, отдаст именно то, что нужно без выдергивания с массива по нулевому индексу. Да, и лайк уже ессно поставлен)
Спасибо Макс!! Очень доходчиво и четко объясняешь! Так же купил подписку на твой платный курс, и так же не пожалел) топ-контент!!)) Всем рекомендую!!
Рад, слышать. Спасибо за поддержку!
У тебя единственное нормальное обьяснение как работает next 13 версии , спасибо) Хотелось бы видео по typeORM по конфигам как делать миграции прописивать скрипты ведь на реальних проектах никто не даст поставить свойство synhorize :true )))
Крутое видео, сделай пожалуйста как сделать деплой на хостинг VPS/VDS Next JS
Если еще сделаешь проект Next + FSD = боюсь не сдержусь купить подписку, как минимум в благодарность за труды! Можно также туда state manager добавить для сочности. С новым next 13.4 как минимум. Ребят, поддержите, парень супер классный контент делает!
А что такое FSD?
Думаю для полного кайфа как раз в твоем исполнение TS не хвататет. React, Next, Ts - было бы вообще идеально.
Насчет шрифтов. Нашел не плохое решение, даже несколько. Я создал компонент который возвращает в нем же подтянул (в моем случае это были локальные) шрифты, далее в этот глобальный стиль * { --default-font: ${ titillium.style.fontFamily }} то есть в стилях создал переменную шрифта. Этот компонент я интегрировал в _app просто над Component. И все, тем самым подключается в style переменная с готовым шрифтом. Далее в глобальном файле стилей просто body > font-family: var(--default-font). Еще удавалось в тайлвинд интегрировать, но там история была с App и надо пересмотреть подход, этот выглядит вполне красиво :)
Подключение шрифтов через className используется, когда подключаешь какую-то 3rd-party библиотеку (типа календарь и т.д.), и авторы дали только className, как единственный способ кастомизировать их коомпоненты. Другими словами, для совместимости с тонной пакетов, которые мы юзаем из npm
Мечта N1: Иметь такие же знания в программировании как у автора.. Эхх когда же этот момент настанет)
Typescript было бы интересно
то что надо
Здорова! только что прошел краткий урок , JavaScript от а до я, он 40 с чем-то минут идёт, фууух во жесть для меня это с нуля все, но что радует что все получилось.
Повторял за Максом, в начале были проблемы куча ошибок потом настроил vs cod поменял настройки сделал как у Макса.
Настроил гит баш этот🤣.
И все проделал в точности как делал Макс все сработало очень рад, теперь перехожу на интенсив бек для начинающих очень затянуло прямо как игру сложную проходишь только с подсказками🤓
Ещё хотел добавить уже начал проходить бек для начинающих и всё идёт по накатанной все настройки работают, да бывает конечно что ошибки выходят но я сразу в Гугл и устраняю. Макс если почитаешь я хотел к вам в чатик написать вип который но блин я не могу чет пишет ошибку , в телеге который вип.
Thanks.
Одна из причин мне нравится твои видосы всегда делаешь таймкоды
Это как правило, по другому не знаю как. Даже стримы с таймкодами
Да из за этого мне нравится твой контент
wait for RTK! The best!
Один вопрос ! Next решает както задачу кэширования браузером: html/ks/css ?
Привет Макс. уже можно использовать новый next с app?
а зачеи так сложно делать компонент клиентским? через dynamic? Чем этот способ отличается от способа написать 'use client' сверху? Объясните, пожалуйста
Привет, от людей из будущего. Спасибо за контент :)
Все конечно круто. Но есть вопросы. А именно различия прицепов деплоя при подходе SSR SSG ISR которые тут не упомянались. Если SSG можно просто напросто перекинуть файлики на хостинг и всё будет работать, то с SSR и ISR все так просто работать не будет. Было бы не плохо про это тоже снять видео. И деплость не на vercel, а куда по сложнее. На тот же яндекс клауд например.
почти во всех проектах на этом канале используется typescript, было бы не плоха снять полный курс по ts.
Вы рассуждали где некст не нужен, так вот мне недвано лендингпейдж на нексте заказали.Было смешно )
Отличное видео! Хочу, чтобы в ролике про редакс объяснил в чем его отличие от react query
Redux state manager, react query state manager для работы с http запросами
@@user-nm9gw5fd4e извини, но не понимаю, что ты сказал. Можешь подробней описать проблему, которую решает react query? Почему redux недостаточно?
@@biLLie_wiLLie redux это глобальный стор для управление с состоянием, react query помогает избавиться от повторящего кода при работе с запросами, плюс сохранить в кэш, рефетч даннхы и т.д, до RTK(Redux Tool Kit) у редакса не было наподобие react query, по сути что rtk query и react query делает одну и ту задачу одинаково, (инваладация запросов, сохранить в кэш, и удобное апи для обработки состояние загрузки, ошибки и т.д). Если ты используешь rtk query смысла нет ставить react query, это работает и обратно. По мне у react query по больше функционала и мне нравится react query
@@biLLie_wiLLie редакс и react query две разные вещи, редакс решает проблему со состоянием, react query прослойка и инструмент для работы с запросами
Отличное видео, спасибо!
При использовании react toolkit + react persist а также динамические мета теги как в примере (или если просто указать на каждой странице в Head например title)почему то они не работают на стороне сервера, не затирают Head из файла _document. Если убираю react persist мета теги отображаются на стороне сервера.
Я не смогу в одном сообщении все объяснить, заходите в вип чат если будет желание там отвечу
Ты ахеунный лектор!
топ
Всем привет! Подскажите, пожалуйста, что за сниппет используется при создании компонентов Next.js
По типу 'tafcen' как используется в видео, не могу никак найти.. Автор, может ты подскажешь.
Спасибо за твою работу и труд!
Привет, мои кастомные сниппеты. Настройка была на канале
дублирует render (и соответственно console.log) из-за strict mode в react
Привет, подскажи пожалуйста, какой набор сниппетов юзаешь для next? не смог найти такие как у тебя (
Мои сниппеты, в настройке на канале
У кого такая ошибка при запуске и как ее решить? я уже удалял папку node modinpm install Error: Cannot find module 'stream/web'
Пожалуйста делай видео как учиться на geekbrains
Подскажите что за тема иконок?
Ё, братан, крутой ролик про Next.js! Спасибо, что поделился своим опытом с нами, начинающими. Я только начал изучать этот фреймворк, и твои объяснения были легко усвояемы и понятны для меня. Твой кайфовый стиль объяснения технических деталей дал мне мотивацию и уверенность в том, что я могу освоить этот фреймворк. Спасибо еще раз, братан, ты рулишь!
З.Ы. Можно спросить? Что за поисковик у тебя? :)
Честно не помню, если браузер имеешь ввиду то brave
@@REDGroup Ну да браузер, просто интерфейс намного лучше чем у гугла, спасибо ещё раз)
годный контент, спасибо👍 можешь подсказать что за снипеты юзаешь? не нашел их нигде, заранее спасибо) p.s дошел до части где ты сказал где их взять😅
Мои сниппеты, в тг канале надо поискать
kak aktivirovat snippety i nastroiki??????????
подскажите какой программой Макс пользуется чтобы узнать цвет который сейчас на экране?
Color slurp
Опиши команды сокращенные, которыми ты комопненты создаешь
Касательно подключения шрифтов не тут не согласен 47:44 Все работает и с global.css. Так как сейачс структура файлов поменялась и глявным файлом является layout.tsx , то берем и подключаем в нем global.css , назначаем body { font-family: var(--poppins), sans-serif;} и в тег body прокидываем переменную через clasName. И вуфля, шрифт работает глобально.
Структура не поменялась,вы наверное просто когда подклбчали выбрали App router,а не custom router,так как,custom просто удобнее,сами назначаем роутинг и путь файлов.
Потому что курс выходил до обновления, сейчас да в этом проблем нет
@@faridzeynalov Вон оно как, спасибо разьяснения, а то я не врубался зачем сделали 2 вида роутинга
I just found your channel and it's amazing. Would you consider doing videos in english ?
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 (UA-cam is already testing this feature on large channels)
@@REDGroup Looking forward to it. Great work :)
1:13:46 у тебя залагал из-за плагина Import Cost - он не может вычислить размер импорта NextPage
Если ещё feature slice design добавишь, вообще цены не будет!
Это вкусовщина
плиз видео по typescript
Ну что сказать, да неплохо но angular для элиты
ты не ред групп ты mad max )))
безумный макс)) ппц скорость ))
я не успеваю вообще вкурить что происходит ))
но спасиб за контент годный
Пожалуйста
На 24 минуте про удивление, мол почему выводится дважды в консоли браузера, так у тебя в конфиге "reactStrictMode: true," ;)
Оч круто получилось, Макс с чего начать с Redux или c redux toolkit???
просто глянь разок redux, а используй toolkit
Redux toolkit
Друзья, подскажите пожалуйста 2 момента. Удачная ли идея учить сразу некст, если еще не знаю реакт, чтоб двух зайцев разом? И если раньше бекенд писался например на neS.js, а фронт на react, то остается ли все еще актуальным neSt, например для использования вместе с neXt в одном проекте, или такое не возможно? Интересуюсь наперед, поэтому вопросы могут показаться странными. Спасибо кто прочитал)
1 - Сначала лучше понять как работает реакт
2 - конечно актуально, next это полу бэк. В крупных проект бэк это всегда отдельный проект
Сейчас уже можно использовать next 13.4.9
Ребята, как он быстро создает компоненту ?
в веб шторме rsc а в vs code как ?
Спасибо!
У меня свои сниппеты, на канале была настройка Vscode
очень хотелось бы тацпскрипт видеть
Информация очень полезная, но её трудно воспринять - так как Макс не может определиться, что именно показывать и рассказать. Был бы четкий план перед глазами, не путался бы.
А в целом инфа хорошая
Содержание всегда составляю для таких курсов. Бывает наверно отхожу от него, так как много информации которой хочется поделиться
Макс фигачит код пока другие блогеры выпускают видео-беседы на 2-3 часа
Вторые сутки пытаюсь локаль прикрутить (переезжаю с реакта на next - ничерта не врубаюсь. Пока выглядит как костылище)
Здравствуйте! хочу купить интенсив но не получается. Звонил банку они говорят что с их стороны никаких проблем и запретов нет. В чем может проблема ?
Напишите в наш тг бот t.me/redsupportbot
Хотел бы купить твой курс , но не могу - нету возможности :(
Сервак с БД можно скачать только по подписке?
Да, конечно
що скажете за React Server Components думаю ця штука заменит next?
Свежий курс уже есть на канале
Брат ну куда ты все спешишь(