ура наконец то дождался next)) пожалуйста, сделайте более продвинутый урок по авторизации в next. например как сделать вход по почте + паролю, как сделать регистрацию, очень интересна работа с токенами (если у меня сервер возвращает два токена jwt). как сделать вход по google кнопке и при этом сохранить токены итд
@@hacktau а как там все кастомизировать? чтобы не на аглицком аутентификация была. Много вопросов. Будем благодарны за обстоятельный обзор этого инструмента и как его реально использовать на проде.
Было бы здорово, если Михаил разобрал тему FSD, если был опыт работы с этой методологией. Тезисный обзор сущностей дополненный мыслями на основании из своего опыта (опять таки, если он есть)
Михаил, добрый день! а можете выпустить видео с работой User-agent для определения устройств) так как на next js в проектах SSR и CSR часто используется вместе это вызываем проблемы, потратил день чтобы решить проблему с этим, ну и работу с svg тоже интересно показать) и конечно же спасибо за годный контент!)
Добрый день, Михаил. Во всех видео о server action разбор идет в ключе работы с формой. Где еще может и должен применяться server action? Server action функция всегда содержит директиву 'use sever', хотя во всех разборах данная функция и так находится в серверном компоненте - это такой синтаксис и может ли Server action располагаться внутри "use client" компонента/страницы?
Очень доходчиво и понятно. Спасибо за видео. А в чем преимущество использовании форм в серверных компонентах в отличии от клиентских? Просто чтобы нагрузку с клиента перенести на сервер?
Меньше JS на клиенте - быстрее загрузка страницы. Но тут зависит от требований. Когда нужна сложная валидация на клиенте, то без JS всё равно не обойтись. Но есть и немало сценариев, когда достаточно серверной части. Исторически это были form action, так что это возвращение к истокам.
Здравствуйте Михаил :) Спасибо за труды! Пытаюсь переварить Server Actions. И не могу понять, какую выгоду мы получили в рамках вашего видео от Server Actions. По факту мы переложили запрос с клиента на сервер, а какой профит от этого? Ведь точно так же могли и с клиента сделать запрос. Буду благодарен ответу :)
@@mishanep А есть в этом какая то ценность? Как работает бэкэнд в реальности. Там еще целая череда мидлваров и разных проверок прежде чем, хоть что то добавить в базу данных. Та же регистрация, которая проверяет целостность данных, потом проверяет наличие пользователя в базе. Создает токены и т.д.. Не будем же мы все это писать в серверных экшенах. И тоже самое нам нужно и для логина и для большинства других экшенов.
Здесь вопрос выбора архитектуры. Next может быть как полноценным бэкендом, и тогда да - так или иначе какие-то проверки внутри экшнов понадобятся. Либо это прослойка до бэкенда. На моей работе используется именно как прослойка, а бэк на Java.
Михаил, здравствуйте! В процессе изучения next.js столкнулся с проблемой. global-error.jsx (error компонент ) НЕ перехватывает ошибки в корневом layout'e. В документации написано, что для перехвата ошибки в корневом layout'e необходимо использовать global-error.jsx, НО он этого не делает. Пытался найти решение и постоянно натыкаюсь на наличие проблемы, но без ее решения. (P.S. заметки: в корневом layout'e делаю обычный throw new error("...") для проверки работы global-error, а в global-error.jsx - стандартный return ( ...), global-error лежит на верхнем уровне app - где и должен; версия next.js - 14.0.2 )
Михаил доброго вам времени суток, наверное пишу свой первый комментарий, но не могу сказать что вы прекрасно преподносите материал, но смотря это видео и читаю документацию оф по Server Actions возник вопрос, надеюсь вы на него ответите. Я думал что вся суть Server Actions это в том что она позволяет нам управлять формой на серверной компоненте и плюс к этому если в браузере не загрузиться js может из за медленного интернета, форма будет все равно работать что говорит про оптимизацию некую. Но читаю статью в документации они используют такое новые хуки по управлению формы как useFormState, useFormStatus, useOptimistic. Как вы по итогу думаете в чем суть теперь Server Actions если у нас клиентские компоненты судя по документации.
Суть server actions в мутации данных. А конкретно - как альтернатива REST API точкам. Касаемо новых хуков - это уже новшества react и react-dom, идущие как экспериментальные и пока не доступные в стабильных релизах. Плюс, на официальной документации реакта по хуку useFormStatus нет ни слова о NextJS. Примеры в официальной доке выглядят любопытно, но пока не было релиза этих хуков, говорить о них рано.
Привет, Михаил. Вопрос не по теме видео, но все же. Хотелось бы узнать насколько важно понимание работы createEntityAdapter в RTK, нужно ли разбирать эту тему в документации подробно или хватит поверхностного ознакомления? А так же как часто вы встречали createEntityAdapter на своей практике?
Я считаю это самый недооцененный функционал в редаксе, по крайней мере в проектах, что мне доводилось участвовать. Последние полгода я редаксом не пользуюсь по работе. Но в целом, чем лучше вы ознакомитесь с этой фичей, тем больше выгоды сможете выжать из нее.
Редирект работает только потому, что компонент формы является северным. Попробуйте сделать этот компонент клиентским и никакой редирект не сработает а будет выбрасывать ошибку. Я например хочу сделать валидацию формы на стороне клиента, потому она у меня клиентская и получается, что серверные экшны являются просто бесполезными если они только и могут, что выбрасывать ошибки
Здесь можно по-разному подойти к решению этого вопроса. Первое, что приходит в голову вложить в форму (серверный компонент) клиентские компоненты с инпутами, и валидировать их по мере заполнения (или потери фокуса). Та же кнопка отправки формы может быть неактивна до тех пор пока поля не заполнены корректно.
@@mishanep и получается, что всякие библиотеки по типу react-hook-form теряют свой смысл. Я не могу представить себе как я буду связывать такие инпуты как "пароль" и "повторение пароля" друг с другом. Как кнопка будет знать о состояниях инпутов, если она является отдельным клиентским компонентом. Все настолько туманно. Какой то общий стор делать для них что-ли)
Очень хорошее видео. Ноя у меня пару багов, открыл ваш гит и тоже вроде пару багов если открыть сайт. когда создашь посты к примеру пост 5 пост 6 пост 7 , потом удаляешь их, а потом опять создаешь с другим контентом то все равно кидает тебя на уже созданные пост 5 пост 6 и пост 7 , несмотря на то что тайтл и контент другой. И потом вовсе их удалить нельзя. Или это я чего-то не понимаю
Там могут быть нюансы с кэшированием. По-хорошему, БД должна создавать каждый раз уникальный id. В моем примере используется моковый бэкенд, поэтому он может местами криво работать.
Полагаю, здесь не должно быть отличия с 13-й версией. Встроенный fetch имеет опциональный третий параметр, который управляет кэшированием. Где-то я об этом на канале рассказывал в цикле по нексту.
Добрый день, может кто-нибудь обьяснит почему если я создаю action внутри page.tsx мне надо явно прописывать что это use server, разве страницы это не априори серверные компоненты, если вопрос глупый заранее извеняюсь, первую неделю разбераюсь с Next js
Добрый, как Я понял use server указывается, когда необходимо строго определить работу модуля. Например, есть главный модуль и дочерний. Главный выполняется на стороне клиента, следовательно и дочерний тоже переходит на выполнение на стороне клиента. Если же в дочернем указать use server, то он будет строго выполнятся на стороне сервера. Поправьте, пожалуйста, если ошибся. Сам только только начал изучать)
Там речь о том, что когда начинаешь миксовать концепрты фронта и бэка, есть риск нечаянно сенситивные данные отправить в разметку. Next уже даже придумал концепт как предотвратить это, назвав его taint, но он пока в Альфе. У них в блоге большая статья на тему безопасности.
становится похоже на php, в котором мы серв и фронт пишем в одном файле. как-то грустно... а куда же денутся хуки? по сути реакт там и не нужен, нужен только jsx
Как при использовании сбросить input? Данные остаются, только переводить в клиентский компонент? Я получаю данные через fetch и не использую состояния, потом добавляю форму и через серверный экшн добавляю новые данные в json, они появляются на странице, но форма остается со старыми данными
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
ура наконец то дождался next)) пожалуйста, сделайте более продвинутый урок по авторизации в next. например как сделать вход по почте + паролю, как сделать регистрацию, очень интересна работа с токенами (если у меня сервер возвращает два токена jwt). как сделать вход по google кнопке и при этом сохранить токены итд
next auth в помощь
@@hacktau а как там все кастомизировать? чтобы не на аглицком аутентификация была. Много вопросов. Будем благодарны за обстоятельный обзор этого инструмента и как его реально использовать на проде.
@@Den-yg4wz через next-intl можно
Да, тоже очень интересна эта тема, видео было бы очень полезно
Так есть же видос NextJS 13. Аутентификация и приватные роуты, там в целом база библы next auth описана
Больше контента! Спасибо за свежатину)
спасибо, доходчиво и понятно.
Спасибо добрая душа
Было бы здорово, если Михаил разобрал тему FSD, если был опыт работы с этой методологией. Тезисный обзор сущностей дополненный мыслями на основании из своего опыта (опять таки, если он есть)
Михаил, добрый день! а можете выпустить видео с работой User-agent для определения устройств) так как на next js в проектах SSR и CSR часто используется вместе это вызываем проблемы, потратил день чтобы решить проблему с этим, ну и работу с svg тоже интересно показать) и конечно же спасибо за годный контент!)
красавчик
Добрый день, Михаил. Во всех видео о server action разбор идет в ключе работы с формой. Где еще может и должен применяться server action? Server action функция всегда содержит директиву 'use sever', хотя во всех разборах данная функция и так находится в серверном компоненте - это такой синтаксис и может ли Server action располагаться внутри "use client" компонента/страницы?
Server Actions are not limited to and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like .
Люди, использующие next в больших проектах, говорят 13 версия принесла немало багов, и вообще она сыровата ещё, а тут выкатили 14 версию😅
Да , есть такие баги. Но многих из них исправили в версии 13.5 )
Очень доходчиво и понятно. Спасибо за видео. А в чем преимущество использовании форм в серверных компонентах в отличии от клиентских? Просто чтобы нагрузку с клиента перенести на сервер?
Меньше JS на клиенте - быстрее загрузка страницы. Но тут зависит от требований. Когда нужна сложная валидация на клиенте, то без JS всё равно не обойтись. Но есть и немало сценариев, когда достаточно серверной части. Исторически это были form action, так что это возвращение к истокам.
@@mishanep спасибо за ответ)
Здравствуйте Михаил :) Спасибо за труды!
Пытаюсь переварить Server Actions. И не могу понять, какую выгоду мы получили в рамках вашего видео от Server Actions. По факту мы переложили запрос с клиента на сервер, а какой профит от этого? Ведь точно так же могли и с клиента сделать запрос. Буду благодарен ответу :)
В серверных экшнах может быть прямой запрос к базе данных, чего на фронте мы сделать не можем.
@@mishanep А есть в этом какая то ценность? Как работает бэкэнд в реальности. Там еще целая череда мидлваров и разных проверок прежде чем, хоть что то добавить в базу данных. Та же регистрация, которая проверяет целостность данных, потом проверяет наличие пользователя в базе. Создает токены и т.д.. Не будем же мы все это писать в серверных экшенах. И тоже самое нам нужно и для логина и для большинства других экшенов.
Здесь вопрос выбора архитектуры. Next может быть как полноценным бэкендом, и тогда да - так или иначе какие-то проверки внутри экшнов понадобятся. Либо это прослойка до бэкенда. На моей работе используется именно как прослойка, а бэк на Java.
Михаил, здравствуйте! В процессе изучения next.js столкнулся с проблемой. global-error.jsx (error компонент ) НЕ перехватывает ошибки в корневом layout'e. В документации написано, что для перехвата ошибки в корневом layout'e необходимо использовать global-error.jsx, НО он этого не делает. Пытался найти решение и постоянно натыкаюсь на наличие проблемы, но без ее решения. (P.S. заметки: в корневом layout'e делаю обычный throw new error("...") для проверки работы global-error, а в global-error.jsx - стандартный return ( ...), global-error лежит на верхнем уровне app - где и должен; версия next.js - 14.0.2 )
🔥🔥🔥Михаил спасибо за ратные труды! 🙏🙏🙏 Подскажите по секрету, как вы сделали такую красивую цветную консольку? Будем благодарны! ) ♥
Я использую iTerm терминал. Там много любопытных фишек.
Михаил доброго вам времени суток, наверное пишу свой первый комментарий, но не могу сказать что вы прекрасно преподносите материал, но смотря это видео и читаю документацию оф по Server Actions возник вопрос, надеюсь вы на него ответите.
Я думал что вся суть Server Actions это в том что она позволяет нам управлять формой на серверной компоненте и плюс к этому если в браузере не загрузиться js может из за медленного интернета, форма будет все равно работать что говорит про оптимизацию некую. Но читаю статью в документации они используют такое новые хуки по управлению формы как useFormState, useFormStatus, useOptimistic. Как вы по итогу думаете в чем суть теперь Server Actions если у нас клиентские компоненты судя по документации.
Суть server actions в мутации данных. А конкретно - как альтернатива REST API точкам.
Касаемо новых хуков - это уже новшества react и react-dom, идущие как экспериментальные и пока не доступные в стабильных релизах. Плюс, на официальной документации реакта по хуку useFormStatus нет ни слова о NextJS.
Примеры в официальной доке выглядят любопытно, но пока не было релиза этих хуков, говорить о них рано.
❤🎉
Привет, Михаил. Вопрос не по теме видео, но все же. Хотелось бы узнать насколько важно понимание работы createEntityAdapter в RTK, нужно ли разбирать эту тему в документации подробно или хватит поверхностного ознакомления? А так же как часто вы встречали createEntityAdapter на своей практике?
Я считаю это самый недооцененный функционал в редаксе, по крайней мере в проектах, что мне доводилось участвовать. Последние полгода я редаксом не пользуюсь по работе. Но в целом, чем лучше вы ознакомитесь с этой фичей, тем больше выгоды сможете выжать из нее.
спасибо @@mishanep
оу май год 😱😱😱😱 опять?
С bind конечно на костыль скорее похоже)
Редирект работает только потому, что компонент формы является северным.
Попробуйте сделать этот компонент клиентским и никакой редирект не сработает а будет выбрасывать ошибку. Я например хочу сделать валидацию формы на стороне клиента, потому она у меня клиентская и получается, что серверные экшны являются просто бесполезными если они только и могут, что выбрасывать ошибки
Здесь можно по-разному подойти к решению этого вопроса. Первое, что приходит в голову вложить в форму (серверный компонент) клиентские компоненты с инпутами, и валидировать их по мере заполнения (или потери фокуса). Та же кнопка отправки формы может быть неактивна до тех пор пока поля не заполнены корректно.
@@mishanep и получается, что всякие библиотеки по типу react-hook-form теряют свой смысл.
Я не могу представить себе как я буду связывать такие инпуты как "пароль" и "повторение пароля" друг с другом. Как кнопка будет знать о состояниях инпутов, если она является отдельным клиентским компонентом.
Все настолько туманно.
Какой то общий стор делать для них что-ли)
Очень хорошее видео. Ноя у меня пару багов, открыл ваш гит и тоже вроде пару багов если открыть сайт. когда создашь посты к примеру пост 5 пост 6 пост 7 , потом удаляешь их, а потом опять создаешь с другим контентом то все равно кидает тебя на уже созданные пост 5 пост 6 и пост 7 , несмотря на то что тайтл и контент другой. И потом вовсе их удалить нельзя. Или это я чего-то не понимаю
Там могут быть нюансы с кэшированием. По-хорошему, БД должна создавать каждый раз уникальный id. В моем примере используется моковый бэкенд, поэтому он может местами криво работать.
спасибо)@@mishanep
Используй доверенные методы с пхп к черту некст он всегда лагает и багов куча когда просыпаешься уже поздно ибо продакшн и бабки миллиардовые
Если action серверный,то как почистить форму на клиенте после submit-а?
он умеет вернуть результат работы, после получения - сбросить
как раз столкнулся с проблемой обновления серверного компонента с помощью форм экшен...посмотрим смогу ли разобраться с помощью этого видео
Странно... Почему-то отправляет вовсе не в json не смотря на stringify...
Как отключить роутер кэш на клиенте в next 14?
Полагаю, здесь не должно быть отличия с 13-й версией. Встроенный fetch имеет опциональный третий параметр, который управляет кэшированием. Где-то я об этом на канале рассказывал в цикле по нексту.
@@mishanep Я не про кэш запросов и данных. Я про роутинг некста его кэш.
Добрый день, может кто-нибудь обьяснит почему если я создаю action внутри page.tsx мне надо явно прописывать что это use server, разве страницы это не априори серверные компоненты, если вопрос глупый заранее извеняюсь, первую неделю разбераюсь с Next js
Добрый, как Я понял use server указывается, когда необходимо строго определить работу модуля. Например, есть главный модуль и дочерний. Главный выполняется на стороне клиента, следовательно и дочерний тоже переходит на выполнение на стороне клиента. Если же в дочернем указать use server, то он будет строго выполнятся на стороне сервера. Поправьте, пожалуйста, если ошибся. Сам только только начал изучать)
а в чем заключается здесь проблема с безопасностью?
Там речь о том, что когда начинаешь миксовать концепрты фронта и бэка, есть риск нечаянно сенситивные данные отправить в разметку. Next уже даже придумал концепт как предотвратить это, назвав его taint, но он пока в Альфе. У них в блоге большая статья на тему безопасности.
Во, уже можно выпиливать
experimental: {
serverActions: true,
},
Еще в то время успел распробовать и уж очень зашло...
становится похоже на php, в котором мы серв и фронт пишем в одном файле. как-то грустно... а куда же денутся хуки? по сути реакт там и не нужен, нужен только jsx
Разработчики next.js изобрели php
Вообще лютую эко-систему наворотили. Скоро в angular превратят))
не видел твой коммент, то же самое написал. ахах
обидно как-то, убили все основные концепции реакта, теперь его можно не учить.
JSX знаешь и вперёд
Простите меня конечно, но нет ощущение что это дичь какая то , нагородили какой то хрени ребята в Next )
Как при использовании сбросить input? Данные остаются, только переводить в клиентский компонент?
Я получаю данные через fetch и не использую состояния, потом добавляю форму и через серверный экшн добавляю новые данные в json, они появляются на странице, но форма остается со старыми данными
Ребят, подскажите, как сделать авторизацию через openID на мой одностроничник, я уже голову сломал...
Есть уже готовая реализация для openid connect на js и типизированный вариант