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