Михаил Непомнящий
Михаил Непомнящий
  • 234
  • 5 194 819
Публикуем NextJS на своем сервере с SSL и прочими плюшками
Разбираемся как опубликовать NextJS приложение на собственном VDS сервере: базовые настройки Linux-сервера, подготовка приложения, настройка веб-сервера Nginx, настройка менеджера приложений PM2, установка сертификата безопасности и настройка протокола HTTP 2.
Промокод MISHANEP на кешбэк 50% в Спринтбокс
sprintbox.ru/c5301
Гайд с инструкциями к видео: green-galley-384.notion.site/NextJS-VDS-aaf07d1e2dff4379bd24ab911101a53e
Репозиторий с проектом: github.com/michey85/next-prisma-sqlite-demo
Мои курсы по вебу с купонами:
✅ mishanep.com
Мой телеграм-канал:
✅ t.me/mishanep_channel
Тайм-коды:
00:00 Анонс темы
03:02 Создание VDS сервера
08:00 Базовая настройка VDS
11:36 Подготовка NextJS приложения
16:08 Настройка nginx
20:29 Менеджер PM2
22:28 Добавление HTTPS
25:07 Настройка HTTP 2
27:16 Заключительные слова
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
ERID: 2SDnjd6zXmU
Переглядів: 28

Відео

Как удобно создавать UI компоненты со множеством вариантов
Переглядів 7 тис.19 годин тому
Разбираемся с библиотекой cva - удобной абстракцией для создания многовариантных UI компонентов во фронтенд-разработке. Cva станет отличной альтернативой библиотекам classnames и clsx, которые сегодня присутствуют на множестве проектов. Кроме того, подход cva сегодня всё чаще используют популярные UI библиотеки. Код из видео github.com/michey85/react-starter/tree/with-cva Сайт инструмента cva.s...
Дорожная карта Фронтенд разработчика
Переглядів 9 тис.14 днів тому
Разбираемся как простроить свой карьерный путь во фронтенд разработке. О том, что уже надо знать, приступая к изучению верстки сайтов, на чём сделать акцент в первую очередь и как не разбрасываться на необязательные технологии. Таймкоды: 00:00 Анонс темы 01:27 Пример roadmap.sh 02:18 Про компьютерную грамотность 05:03 Платформа для обучения 07:03 Фундаментальные знания 12:32 Подготовка к профес...
Заменяем page.tsx на свои лейблы
Переглядів 9 тис.21 день тому
Редактор VS Code выпустил настройку под названием custom labels, которая позволяет помечать файлы под собственными названиями. Это удобно, когда на проекте обилие индексных файлов или стилевых с одинаковым названием. Также данный паттерн понравится всем тем, кто работает с NextJS и его App Router, где все файлы страниц называются page.tsx. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддерж...
Знакомство с Tailwind CSS на примере проекта с FrontendMentor
Переглядів 14 тис.28 днів тому
Мини-курс по библиотеке Tailwind CSS с вёрсткой проекта. Разбираемся на примере использования в обычном HTML без фреймворков. Настраиваем свои цвета в Tailwind конфиге, смотрим как пользоваться готовыми CSS классами и создавать на их основе красивые компоненты. Документация Tailwind CSS tailwindcss.com Плагины из видео marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss market...
Хуки мемоизации больше не нужны. React обзавёлся компилятором
Переглядів 32 тис.Місяць тому
React compiler был представлен на React Conf 2024 в виде Babel плагина. Компилятор позволяет автоматически мемоизировать участки кода, где это необходимо. При этом использование хуков useMemo и useCallback, а также функции memo становится избыточным. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741 pay...
Новый конфиг для Eslint 9
Переглядів 6 тис.Місяць тому
Eslint поменял подход к созданию конфига и его особенностям его настройки. Разбираемся как перейти на новую мажорную версию для проектов на JavaScript и TypeScript. Пример конфига для React TypeScript приложения github.com/michey85/react-starter/blob/master/eslint.config.js Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy...
Добавление видео в React приложение
Переглядів 6 тис.Місяць тому
Смотрим как добавить видео без просадки производительности React приложения. Используем библиотеку react-player на примере добавлении нескольких UA-cam видео. Библиотека из видео github.com/cookpete/react-player Пример из видео: github.com/michey85/with-video Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf4...
Геолокация в браузере для JavaScript приложений
Переглядів 4,7 тис.Місяць тому
Разбираемся какие возможности нам предоставляют современные браузере по работе с геолокацией через JavaScript. А также смотрим какие инструменты для этих целей есть в DevTools браузера Google Chrome. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741 paypal.me/mishanep
Чем и зачем заменить Postman в 2024-м
Переглядів 30 тис.2 місяці тому
Чем и зачем заменить Postman в 2024-м
Самый простой способ начать работу с БД
Переглядів 6 тис.2 місяці тому
Самый простой способ начать работу с БД
Анонс курса по тестированию JS и React приложений
Переглядів 3,6 тис.3 місяці тому
Анонс курса по тестированию JS и React приложений
Убираем act warning в юнит тестах для React
Переглядів 1,7 тис.3 місяці тому
Убираем act warning в юнит тестах для React
Как настроить тестовое окружение для React-приложений с Vite
Переглядів 3,8 тис.3 місяці тому
Как настроить тестовое окружение для React-приложений с Vite
Линтер для стилей Stylelint
Переглядів 5 тис.3 місяці тому
Линтер для стилей Stylelint
Новые хуки для React 19 и другие фишки
Переглядів 20 тис.4 місяці тому
Новые хуки для React 19 и другие фишки
8 плагинов с искусственным интеллектом для разработки
Переглядів 28 тис.4 місяці тому
8 плагинов с искусственным интеллектом для разработки
Хватит тревожиться о хайпе в IT
Переглядів 16 тис.5 місяців тому
Хватит тревожиться о хайпе в IT
Чем собирать React в 2024-м
Переглядів 15 тис.5 місяців тому
Чем собирать React в 2024-м
Redux Toolkit 2.0 - новые возможности и критические изменения
Переглядів 24 тис.5 місяців тому
Redux Toolkit 2.0 - новые возможности и критические изменения
Персональные итоги 2023 канала Михаил Непомнящий
Переглядів 2,6 тис.5 місяців тому
Персональные итоги 2023 канала Михаил Непомнящий
Как использовать переменные окружения для GitHub Pages
Переглядів 2,2 тис.6 місяців тому
Как использовать переменные окружения для GitHub Pages
Используем GitHub Actions для публикации на GitHub Pages
Переглядів 4,3 тис.6 місяців тому
Используем GitHub Actions для публикации на GitHub Pages
Готовим VS Сode для работы с React
Переглядів 11 тис.6 місяців тому
Готовим VS Сode для работы с React
Chrome DevTools - самое необходимое для новичков
Переглядів 8 тис.6 місяців тому
Chrome DevTools - самое необходимое для новичков
Релиз NextJS 14 и Server actions
Переглядів 15 тис.7 місяців тому
Релиз NextJS 14 и Server actions
Стань гуру VS Code с набором топ-фишек
Переглядів 15 тис.8 місяців тому
Стань гуру VS Code с набором топ-фишек
Совместная работа Prettier и ESLint для качественной разработки
Переглядів 30 тис.8 місяців тому
Совместная работа Prettier и ESLint для качественной разработки
Рекурсивные типы в TypeScript
Переглядів 8 тис.8 місяців тому
Рекурсивные типы в TypeScript
Как поделиться локальной разработкой с "горячими" обновлениями
Переглядів 7 тис.9 місяців тому
Как поделиться локальной разработкой с "горячими" обновлениями

КОМЕНТАРІ

  • @user-bx7rm2rp9g
    @user-bx7rm2rp9g 4 години тому

    Михаил, большое спасибо за видео! Все очень понятно и без воды.

  • @-LKRN
    @-LKRN 4 години тому

    Неплохо, но смотреть только на 2х

  • @michaelbazhanov5286
    @michaelbazhanov5286 21 годину тому

    Очень крутой урок. Очень помогло. Спасибо)

  • @0xSxVKaJnwQ
    @0xSxVKaJnwQ День тому

    Не понял, зачем аппендить ссылку в dom, а затем удалять, если click() работает и так? Или в каких-то сценариях работать не будет?

  • @bulgarsky
    @bulgarsky День тому

    понять без примера реализации гиблое дело

  • @pro.game.
    @pro.game. День тому

    Как называется расширение для снипитов React?

  • @never.m1nd
    @never.m1nd День тому

    Не совсем понял в чем предназначение thunk-ов. Мы ведь можем сделать просто запрос на сервер и дождавшись ответа просто вызвать dispatch например чтобы передать туда полученные данные. Просто сравниваю ваше видео по авторизации на firebase и там вроде без thunk-ов все обошлось и все работает. В чем тогда смысл асинхронного редакса?

    • @mishanep
      @mishanep День тому

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

  • @andretku
    @andretku День тому

    Круто! сложное - простыми словами!

  • @NovikovEugene13
    @NovikovEugene13 2 дні тому

    Из всего перечисленного совсем не пригодились пока что принципы SOLID. Со всем остальным столкнулся на работе. Стаж 1,5 года.

  • @maks-kander6665
    @maks-kander6665 2 дні тому

    Как указать в matcher все?? как сделать, чтобы он редиректил на любой странице на логин??? Так сложно было это сказать. Я нихрена не могу найти в этой сраной документации и гугле

  • @xMurieLLx
    @xMurieLLx 2 дні тому

    Для этого и существует испытательный срок 2 недели, месяц, два месяца, чтобы и работодатель, и работник смогли в реальных условиях понят, получится ли вместе работать 🤷‍♂️

  • @taipanproduct5150
    @taipanproduct5150 3 дні тому

    C 12:00 объяснение неверное. После того, как промис получил статус resolve/reject, value этого промиса (т.е объекта) не меняется. Метод .then не меняет value изначального промиса. Метод .then создает новый промис с новым value.

  • @user-xf6jn9wc7d
    @user-xf6jn9wc7d 3 дні тому

    Михаил, скажите пожалуйста, если у меня уже есть готовый frontend на React + Vite, можно ли отдельно на next.js реализовать эту логику с авторизацией и законектить этот бэк некста с фронтом на реакте? Или возможности такой реализации доступны только в рамках одного монолитного проекта ?

  • @Dreamer_78
    @Dreamer_78 4 дні тому

    npm run build все стили пропадают у меня! как правильно сделать? спасибо вам за урок!

  • @user-yo9wi2xs8x
    @user-yo9wi2xs8x 4 дні тому

    Здравствуйте Михаил! Появился вопрос: Почему на 12:56 отрисовывается элемент, который рендерится только при ошибке в роутинге, ведь ошибка в сетевом запросе (неправильное название сервера)?

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 4 дні тому

    Благодарю за прекрасные уроки! Данный урок не для новичков, конечно, но что-то вроде понял)

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 4 дні тому

    Спасибо большое за уроки! Делайте пожалуйста побольше уроков и по смежным темам: js, node.js, react и тп!

  • @Gombo_Batuev
    @Gombo_Batuev 4 дні тому

    Настолько все грамотно подано, одно удовольствие смотреть!

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 4 дні тому

    Я конечно не видел объяснения других по поводу дженериков и не могу судить как они объясняют, но после этого объяснения, думаю, мне больше ничего другого и не нужно)) Большое спасибо за уроки!

  • @user-qn5wq2ls2s
    @user-qn5wq2ls2s 4 дні тому

    Определенно спасибо. Очень полезно.

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 4 дні тому

    Крутецкий урок! Спасибо большое! Реально очень помогли разобраться!

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 4 дні тому

    Уроки супер! Большое вам спасибо!

  • @zeevnadiv8778
    @zeevnadiv8778 5 днів тому

    благодарю тебя, дружище!

  • @tirthadeva_yoga
    @tirthadeva_yoga 5 днів тому

    Класс, наконец то я добрался до полноценного изучения этой темы. Спасибо, Миша за урок.

  • @user-lt9sh4qx3u
    @user-lt9sh4qx3u 5 днів тому

    import styles from './styles.module.scss'; const sizes = { s: styles.sizeS, m: styles.sizeM, }; export type ComponentProps = { size?: keyof typeof sizes; } export const Component = ({ size = 's', }: ComponentProps ) => { return ( <div className={classNames(styles.content, sizes[size])}></div> ); } И все, и так со всеми вариациями. Зачем столько бойлерплейта для этого?

  • @nvdedmz
    @nvdedmz 6 днів тому

    Cva - хорошая штука,но не умеет в глубь.. когда дизайн заставляет комбинировать не комбинируемые свойсвва и типизацию ломает не только в storybook а везде впринципе после сборки.

  • @MrJettann
    @MrJettann 6 днів тому

    Михаил, что скажете по поводу stylesX?

    • @mishanep
      @mishanep 6 днів тому

      Пока не имел с ним дело.

  • @fringle6457
    @fringle6457 6 днів тому

    Есть ли смысл его использовать в коммерческих проектах уже, не рано ли? Что думаешь?

    • @mishanep
      @mishanep 6 днів тому

      Пока рановато. Я бы полгодика подождал.

  • @Umkauskas
    @Umkauskas 6 днів тому

    спасибо, тебе. это самое доступное объяснение, что такое колбек. а до этого никак не мог понять. на мой взгляд, стоит добавить, что в JS функция это не просто метод, как например в Java, а объект. я долго не мог понять колбеки, т.к. думал, что в качестве параметра выступает результат работы функции, а не она сама. ещё раз спасибо.

  • @Umkauskas
    @Umkauskas 6 днів тому

    нарешті зрозумів, що таке проміси. дякую, тобі, людина!

  • @user-ml4ul2xk9l
    @user-ml4ul2xk9l 6 днів тому

    Здравствуйте Михаил. Спасибо вам за ваши видео. На русскоязычном контенте вы самый лучший из React программистов. Хотел бы узнать возможно ли добавить в db.json картинки хранящиеся в отдельной папке проекта?

    • @mishanep
      @mishanep 6 днів тому

      Возможно. Вам понадобится указать конкретный путь до картинок. Причем не в папке scr, а в public (они туда могут и из src при сборке попасть, просто соберите приложение и посмотрите где оказались изображения).

  • @user-uk5tj3qn5q
    @user-uk5tj3qn5q 6 днів тому

    Если ты используешь Tailwind лучше посмотри эту библиотеку "tailwind-variants" она более продуманая. Спасибо за контент

  • @profesor08
    @profesor08 6 днів тому

    Если на проекте используются css модули, то использование этой библиотеки даст лишь лишний написанный бойлерплейт, потому что по сути это будет маппинг css классов. В случае же если используется tailwind, то возможно такой подход сделает некоторые вещи проще, но не понятно как будет работать сам tailwind и его умная автоматизация, которая оставляет в бандле только использованные стили (вероятно никак).

    • @mishanep
      @mishanep 6 днів тому

      Насколько понимаю, проблем с магией самого tailwind быть не должно. Я узнал об этом инструменте от Стива Кинни, который свои проекты делает на tailwind последние несколько лет. Для css модулей мне лично нравится такой бойлерплейт, он более наглядный. Да и на практике для конкретного варианта может понадобиться более одного класса. Но выбирать всегда команде конкретного проекта.

  • @true227
    @true227 7 днів тому

    по поводу атрибута alt вот что пишут на странице некста: If the image is purely decorative or not intended for the user, the alt property should be an empty string (alt=""). И это относится не только к нексту. Они в свою очередь взяли эту информацию из спека. Т.е. если изображение бэкграунд, то альт должен быть пустым. И еще: насколько я понял картинки заданные через background-image css не оптимизируются некстом

  • @user-rm6xt9gz2f
    @user-rm6xt9gz2f 7 днів тому

    Спасибо за ваши видео) Они очень интересные. Хотелось бы продолжить тему создания компонентов, а именно - их архитектуру. Очень интересно как правильно создавать компоненты, куда их ложить по всем правилам SOLID. Знаю, что у вас есть подобные видео но очень не хватает полной картины как это все сделать в реальном проекте. Основные вопросы: 1. Нужно ли компоненты отделять от стилизации (безглавые компоненты), если да, то как. 2. Как отделить UI компоненты от инфраструктурных и куда их положить. 3. Могут ли UI компоненты иметь состояние или они должны быть только в инфраструктуре. 4. Как делать разметку (layout) используя UI компоненты и инфраструктурные. 5. Когда использовать пропсы, а когда лучше children? Например PostCard может иметь пропс title и description, а можно и вовсе сделать отдельные компоненты PostTitle, PostDescription и использовать их как children у PostCard. Но когда и какой выбирать вариант не очень понимаю) Спасибо)

    • @gabblz480
      @gabblz480 7 днів тому

      FSD посмотри архитектуру, пока что она +- больше всего подходит под SOLID, но со своими упущениями (под разные фреймворки, библиотеки), которые придется делать, если какие-то библиотеки юзаешь, допустим Redux в React, которые создает глобальные сторы. А так, стараешься всю логику из компонентов выносить, чтоб там только получать пропсы или использовать selectors если это Реакт (это не является бизнес логикой). Если что-то переиспользуется то выносишь в общие компоненты. Если будешь использовать FSD архитектуру, то у тебя будут просто карточки и будут widgets и feature компоненты, в которых как раз ты и будешь использовать бизнес логику, а потом в карточки передавать уже полученные и приведенные в нужный вид значения. Там же и будет логика отправки данных, сохранение и т.д. А в компонентах page, будешь просто собирать страницу из готовых элементов Widgets и Feature (которые будут самостоятельными и не зависимыми друг от друга)

  • @user-hi7ty7wd4i
    @user-hi7ty7wd4i 7 днів тому

    Спасибо! Для общего кругозора интересно. Но cva не заменил мне использование старого доброго import cn from 'classnames' с возможностью передачи css классов в зависимости от значения пропсов.

  • @user-kb5kd7ln3h
    @user-kb5kd7ln3h 7 днів тому

    Не глядя лайк, затем глядеть😁

  • @Khvplus
    @Khvplus 7 днів тому

    Если вы по какой-то причине не пользуетесь муи, то наверное удобно.

    • @Khvplus
      @Khvplus 7 днів тому

      Уже насколько лет не пользуюсь ни css, ни препроцессорами в принципе. А последние года два перестал пользоваться и clsx/classnames. styled-engine в муи хватает чтобы покрыть любые кейсы

    • @mishanep
      @mishanep 7 днів тому

      MUI - хорошая штука. Но на проектах, кажется, только один раз попадалась. Они вроде сейчас свой CSS-in-JS подход разрабатывают.