Тёмный

Создаём и деплоим собственный FULL STACK блог | NextJs + Sanity 

Елена Литвинова — Искусство Веб-разработки 🛸
Просмотров 12 тыс.
50% 1

Опубликовано:

 

23 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 122   
@ВадимКириенко-л1и
@ВадимКириенко-л1и 9 месяцев назад
2:26:14 на 19 строке ошибка в запросе, должно быть _type, из-за этого статическая генерация страниц не будет работать. Вдруг кто-то тоже перепечатал и потом удивился когда sitemap генерировал =)
@webelart
@webelart 9 месяцев назад
Спасибо большое. Зачинила ваше сообщение. ❤🎄
@bolovy6093
@bolovy6093 Год назад
Привет красотка, видео как всегда 🔥 но хотелось бы почаще) Redux/Redux Toolkit/React Query ничего из этого не планируется?😅
@webelart
@webelart Год назад
Привет, привет!! Стараюсь как могу с частотой! ❤️ В ближайшем будущем про redux - пока нет... Но если коммент будет набирать лайки 😁😁😁 who knows как говорится :)))
@strogalev
@strogalev Месяц назад
Класс! Актуально! Зашел по поиску по Санити, а тут сразу и Next и Sanity в одном флаконе.
@Diego-rx4wr
@Diego-rx4wr Год назад
Какая же ты красотка. Замотивировала меня опять начать программировать. Спасибо тебе! Ты лучшая! Было бы круто показывать нам, как ты свои приложения деплоишь. А не просто разрабатываешь.
@webelart
@webelart Год назад
Спасибо! Очень приятно! Про деплой услышала! Не то чтобы у меня много приложений, использую digiral ocean :))) Собираем лайкосики и сделаю! ❤️‍🔥
@igormajrov8444
@igormajrov8444 Год назад
Повеселил ты меня. Вот встретится страшная заказчица, и что делать будешь? Бросишь кодить? ))))
@bodya5645-e5l
@bodya5645-e5l 2 месяца назад
Комментарий в поддержку канала.
@rustoiurazbaev2314
@rustoiurazbaev2314 Год назад
Спасибо вам за прекрасный и классный проект.Подача материала просто супер.Успехов вам в развитии канала и конечно же в работе.А вы как всегда очаровательная и обоятельная.
@webelart
@webelart Год назад
Какой крутой комментарий!!! Спасибо ОГРОМНОЕ!!!! Полный вперёд в мир программной магии! 🧙 😍❤️‍🔥❤️‍🔥❤️‍🔥 Все вместе! ❤️
@eurorock5912
@eurorock5912 Год назад
О, что-то интересное!)) Спасибо, сча заценим, Елена!)
@yagelProject
@yagelProject Год назад
Привет. Сделайте пожалуйста видео с Next 13 (App) и Sanity 3, без сложной структуры: - Блог, - Пагинация автоматическая при скролинге, - Категории в виде фильтра, - Поиск в виде фильтра Если конечно это возможно. Нет нормальных уроков на эту тему.
@mazerafi138
@mazerafi138 9 месяцев назад
Полностью поддерживаю!
@webmentorZH
@webmentorZH Год назад
ааа! какой крутой контент! мне очень нужен был свой блог, думала делать на Hugo и Netlify, уже начала делать) но теперь пошла все смотреть и делать заново! Очень классное пояснение , качество видео бомба! Спасибо огромное!
@webelart
@webelart Год назад
Круто, я рада что в тему, давайте жгите!!! ❤️‍🔥 Жду ссылку на вашу реализацию!!
@MiMi-fx4gl
@MiMi-fx4gl Год назад
залетело на одном дыхании)) спасибо!
@webelart
@webelart Год назад
❤️❤️❤️‍🔥
@asmix7328
@asmix7328 Год назад
Видео ещё не посмотрел, но лайк уже поставил) Респект Вам и успехов)) В выхи посмотрю полностью)
@АлексейЛоскутников-ю4р
Очень хорошая идея проекта. Спасибо за урок.
@webelart
@webelart Год назад
Еееее!!! Вперёд реализовывать!!! 😍
@nurdanokenov4439
@nurdanokenov4439 Год назад
Спасибо за все! Крутой видос.
@k-ivan
@k-ivan Год назад
Спасибо за Ваши труды!
@webelart
@webelart Год назад
Спасибо, что учитесь со мной ❤️
@vadicus6534
@vadicus6534 Год назад
Привет, сразу лайк потому что ты на старте показала что конкретно мы делаем и какой итоговый результат ожидаем. Часто такого не хватает в различных уроках. с энтузиазмом приступаю.
@verbs-otier-ru
@verbs-otier-ru Месяц назад
Как будто так сложно промотать в конец и точно так же увидеть результат. LoL
@yankov2206
@yankov2206 Год назад
Лена привет! Лайк, хороший комментарий для продвижения канала Подписчики смотрят, одобряют) спасибо!
@webelart
@webelart Год назад
Спасибо огромное!!!! ❤Рада, что материал нравится!!
@custercuster4918
@custercuster4918 Год назад
Большое спасибо за контент, не только это видео, но в целом. Не понимаю почему такие годные каналы не так популярны как другие, менее информативные каналы...
@jajanetoure1383
@jajanetoure1383 Год назад
Очень круто! Твой канал - находка. Смотрю видео и думаю: "она разговаривает со мной на одном языке"))) Отлично подаешь материал, все понятно и четко - без воды Не знаю будет ли интересно, но хотелось бы увидеть разбор задач с литкода
@andrey.kudinov
@andrey.kudinov Год назад
Огонь 🔥
@webelart
@webelart Год назад
❤️‍🔥❤️‍🔥❤️‍🔥
@oresthrynyshyn
@oresthrynyshyn Год назад
It will be good to release the 2nd part of the video where all versions of the packages would be updated (Next 13 was released not so long ago). It would also be cool to add a header or footer (or both of these elements) to the site, as well as a small "About Me" or „Contact Us“ page.
@leuuuuuuuuuuu
@leuuuuuuuuuuu Год назад
спасибо большое)
@Ростислав-м1е
@Ростислав-м1е Год назад
Прикольно)
@Сергей-э8о6м
@Сергей-э8о6м 2 месяца назад
Деплой на версель == вендэрлок )
@anastasiiacherkashina4343
@anastasiiacherkashina4343 Год назад
Спасибо за отличное видео! На основе вашего тьюториала делаю свое портфолио начинающего веб-разработчика) Было бы здорово больше комментариев по реализации. Я если что-то не понимаю, то пытаюсь гуглить и разбираться, но не всегда удается понять. Буду благодарна, если ответите на вопросы, что это за синтаксис: 1. import cl from 'classnames'; Что такое classnames и почему оно принимает в качестве аргументов className, styles.cover? 2. Для чего файл reset.scss?
@webelart
@webelart Год назад
Это библиотека, которая просто позволяет объединять классы, если их несколько у компоненты, например если несколько классов у элемента, плюс некоторые классы можно класть под условия. и если isShown true, то класс появится. Просто довольно удобная. :) Вот ссылка www.npmjs.com/package/classnames
@ruslanyusupov793
@ruslanyusupov793 Год назад
Отличное видео, спасибо
@dmitripolevoi4473
@dmitripolevoi4473 Год назад
Хотелось бы видео по архитектуре приложения на нексте, раньше был fsd но cra умер. как правильно организовывать структуру с призмой бд стейтменеджером итд, спасибо
@Открыткадлятебя
красотка я тебя обожаю. хотелось бы узнать как сделать навигацию с автоподгрузкой! было бы супер сделай плиззз
@IrynaKozlova-z7k
@IrynaKozlova-z7k 4 месяца назад
спасибо за урок. Вот такой вопрос: когда делаешь приложение для заказчика то ему нужно сделать отдельный аккаунт Sanity? и когда заливаешь проект на хостинг, то в санити нужно заменить url студии? спасибо
@gedonik
@gedonik Год назад
Отличный материал! Хотелось бы больше масштабных проектов. Вы на работе тоже vs code используете или web storm ? Спасибо вам большое!
@webelart
@webelart Год назад
vs code, да. Есть ребята, которые web storm используют
@unicoxr5tj417
@unicoxr5tj417 Год назад
что-то интересное
@webelart
@webelart Год назад
Ван хандред пёрсент!!! 😍😁😁😁
@vadicus6534
@vadicus6534 Год назад
Наконец я сделал этот блог) Очень увлекательно было, спасибо за такой классный урок. Я делал на ts и по ходу попадались небольшие сложности, особенно при деплое на версел он ругался и ломался, но все в итоге получилось) и вот незадача - я не понимаю как теперь администрировать блог. надо локально запускать у себя проект и там добавлять посты? или если санити уже в нашем билде в верселе то оттуда как то? Помоги пожалуйста до конца понять что мы наделали)))
@webelart
@webelart Год назад
Круто, я рада, что завершили. Вообще там интересно этот проект можно затеплоить отдельно от sanity платформы. Т.е. по факту мы имеем две разные платформы: одна с приложением на nextjs, другая sanity. Попробуйте поизучать в направлении деплоя sanity
@vadicus6534
@vadicus6534 Год назад
@@webelart то есть надо папку с санити извлечь из проекта и отдельным репозиторием его так же на версель деплоить? оно будет так работать? сам клиент и санити напрямую не связаны между собой?
@demptd13
@demptd13 Год назад
круто! все понравилось, много нового узнал, это первое видео с канала, которое попалось, буду смотреть теперь) единственный вопрос... почему такая большая задержка при рендере slug-страниц, такого точно не должно быть...
@webelart
@webelart Год назад
Да я тоже думала, что как-то долго. Надо nextjs подробнее поразбивать. У него есть пререндеры. Но всё-равно, было бы лучше если на страницу переход произошел и был лоадер.., чем ты остаешься на прошлой страницы и как будто ничего не случилось
@demptd13
@demptd13 Год назад
@@webelart я делал в учебных целях пару небольших проектов на Нексте, там из-под капота очень крутой функционал как отловить событие смены роута и повесить Лодер, хочу к вашему проекту кое-что прикрутить, посмотрим что получится ) А за видео реально спасибо, очень доходчиво все и понятно
@webelart
@webelart Год назад
@@demptd13 Интересно, если что-то найдёте как ускорить - пишите! Рада, что материал понравился! ❤
@demptd13
@demptd13 Год назад
@@webelart видел в комментариях под этим видео ссылку на возможность реализации комментариев, не рассматривали вариант сделать вторую часть к этому видео?) с комментариями
@webelart
@webelart Год назад
@@demptd13 Пока нет, есть темы, которые хочется покрыть. Но я подумала в этом направлении, кто знает что там будет в будущем... :D
@НаталияПотапейко
Крутой контент Елена ! Спасибо! Очень хорошо все раскладываете по полочкам! Возможно Вы подскажете, почему [slug] возврашает null?
@webelart
@webelart Год назад
Рада, что понравился, Наталья! Подскажите минуту?
@НаталияПотапейко
@@webelart Елена, спасибо огромное за отклик! На 2:24 когда Вы выводите в console.log (post), у меня ничего не выводится, [slug].js:8 null. И на этом встала и не пойму в чем ошибка))
@НаталияПотапейко
@@webelartОчень буду благодарна Вашей помощи))
@webelart
@webelart Год назад
@@НаталияПотапейко Есть только предположение, что у вас нет урла... Но нужно смотреть код, так сложно понять. Вы можете скачать мой код: github.com/liveldi/my_blog и проверить где у вас ошибка.
@НаталияПотапейко
@@webelartспасибо огромное за подсказку!
@TenthHacker
@TenthHacker Год назад
Это было круто 👍 Всё получилось. Скажите, а папки node_modules обязательно хранить на компе или можно сразу удалить?
@webelart
@webelart Год назад
Они нужны для запуска проекта.Но на GitHub их заливать не нужно.
@99k27
@99k27 Год назад
Спасибо за контент! могли бы подсказать как одновременно менять имена? 0:58:03
@webelart
@webelart Год назад
Тут автоматически выделяется от снипета rafce. Однако в редакторе VS Code можете выделить слово и зажав cmd и кликая D клавишу вы постепенно выбираете все совпадения (для мака, для window может ctrl & D, я точно не знаю).
@99k27
@99k27 Год назад
Ctrl + f2 как выяснилось) чет сложный какой-то урок, еще полчаса осталось. весь день сегодня осваивал)))(ну как осваивал. копировал с видео)
@webelart
@webelart Год назад
@@99k27 А вы с реактом до этого работали? Скиньте потом ссылку, что получилось.
@99k27
@99k27 Год назад
@@webelart не, мой первый опыт с реактом связан с вашим роликом )
@maxbogdan9298
@maxbogdan9298 Год назад
Привет, а можна добавлять посты например конент менеджеру без запуска приложения санити?
@igormajrov8444
@igormajrov8444 Год назад
После установки next и sanity выдает конфликт между настройками .eslintrc.json и .eslintrc. Как это починить?
@webelart
@webelart Год назад
А вы sanity в отдельную папку установили? Т.е. .eslintrc.json должен быть у nextjs проекта. А .eslintrc у sanity_my_super_blog в папке внутри. Кстати ещё можно sanity положить в отдельную папку вообще. Т.е. не в первый проект. А чтобы папочки были рядом. Next.js проект и sanity. Всё будет работать тоже.
@bloggerfox
@bloggerfox Год назад
Хмммм. Вопросик есть. Фронт и бэк в одну папку залили. У каждого свой package.json. Потом, перезаписали пакеты с бэка поверх фронта. С самого начала нельзя было так сделать? Я не могу понять логику таких виражей)))
@webelart
@webelart Год назад
Так пакеты не с бека, пакеты для фронта для соединения с беком. По факту можно создать две разные папки просто вытащить sanity_my_super_blog и все будет работать также. Все в одной папке просто, чтобы был один репо.
@Открыткадлятебя
а как сделать еще удаление и редактирование поста с клиента?
@webelart
@webelart Год назад
Вы хотите, чтобы пользователь удалял ваши посты? :) Обычно смысл в том, что это делается на админской стороне. Либо нужна клиентская админка
@igormajrov8444
@igormajrov8444 Год назад
Еще вопросик. Получается владелец сайта постоянно привязан к сервису sanity. Не минус ли это большой?
@webelart
@webelart Год назад
В чем видите минус?
@igormajrov8444
@igormajrov8444 Год назад
@@webelart может выйти дороже хостинга или выделенного сервера при превышении лимита free аккаунта. ... Есть ли доступ по FTP к файлам? Доступ к базе? ...
@webelart
@webelart Год назад
@@igormajrov8444 Не факт. Например на digital ocean у меня хостинг плачу 25 долларов в месяц кажется и по факту у меня там голая машинка. Тут же вам предоставляется и база данных и уже крутые интерфейсные возможности, о многом просто не нужно думать и тратить деньги на доп. время разработчиков. Здесь можно посчитать сколько времени экономится и сколько стоит тот же Django программист в месяц, а их обычно не один человек нужно. Мы с Django перешли на Sanity, производительность выросла в 3 раза и это по запросам. И скорость разработки тоже возраста. Надо будет кстати на работе про это разузнать, интересная тема сколько ресурсов у нас по факту экономится.
@webelart
@webelart Год назад
@@igormajrov8444 Но я вас поняла, что чем больше пользователей, больше запросов, больше цена.
@alexanderlisovskiy8167
@alexanderlisovskiy8167 Год назад
Что думаете на счет Strapi? Там куда больше преимуществ как по мне
@webelart
@webelart Год назад
Не пользовалась, рекомендуете? Какие преимущества видите?
@igormajrov8444
@igormajrov8444 Год назад
Как быть с заголовками на кириллице? Slug автоматически можно как-то транслитерировать?
@webelart
@webelart Год назад
🤔 вы можете написать функцию преобразования. Текущая наша просто в нижний регистр переводит и пробелы удаляет. Можно поискать библиотеку транслитерации и её заюзать.
@narek1771
@narek1771 Год назад
Привет Елена я питаюсь работать в фрилансе и у меня попросили админ панель могу и советуешь ли ты использовать Sanity ?
@webelart
@webelart Год назад
Да, крутая штука!
@webelart
@webelart Год назад
Но я бы уточнила у заказчика, нормально ему будет такая панель. Вообще возможностей там куда. Вы попробуйте сделать промо возможностей и показать заказчику.
@narek1771
@narek1771 Год назад
@@webelart огромное спасибо за ответ и вообще за уроки 💛💚
@99k27
@99k27 Год назад
Интересные у вас закладки в браузере
@webelart
@webelart Год назад
Пишите минуту заблюрю :)
@99k27
@99k27 Год назад
@@webelart не настолько интересные)) подскажите пожалуйста, почему у меня в cmd не видит команду git? Десктопная версия установлена.
@webelart
@webelart Год назад
@@99k27 С windows мне сложно, пишут что должна быть отдельная консоль git bash support.codebasehq.com/articles/getting-started/git-on-windows
@99k27
@99k27 Год назад
@@webelart спасибо большое ) попробую сегодня) этот проект может служить конструктором для других проектов?
@webelart
@webelart Год назад
@@99k27 Смотря что вы подразумеваете под конструктором. Можно расширять, делать, другие комбинации. В зависимости от ваших целей.
@igormajrov8444
@igormajrov8444 Год назад
Eslint не хочет сохранять как у вас. Все выравнивает построчно. У вас на гите есть настройки линта?)))
@webelart
@webelart Год назад
Что за проблемы с eslint?
@igormajrov8444
@igormajrov8444 Год назад
@@webelart как ы написал выше
@webelart
@webelart Год назад
@@igormajrov8444 На GitHub всё тоже самое, что и здесь.
@silenciomar
@silenciomar Год назад
😅блин, скорее бы дойти уровня, чтобы понимать это видео. А то пока начинающая еще
@webelart
@webelart Год назад
Давай, давай. Расти!!!! ❤️‍🔥 Пусть начала и открытий - это потрясающий путь всегда!
@MisaNia25
@MisaNia25 Год назад
Можешь Roadmap сделать по твоему каналу как и что изучать постепенно ?
@webelart
@webelart Год назад
@@MisaNia25 Хорошо, сделаю.
@igormajrov8444
@igormajrov8444 Год назад
ESLint ругается, что await - зарегистрированное слово.
@webelart
@webelart Год назад
Скинете кусок кода, что вы написали?
@igormajrov8444
@igormajrov8444 Год назад
@@webelart по видосу пишу))) export const getServerSiteProps = ({async}) => { const {posts, total} = await loadData(0, LOAD_MORE_STEP) } Это сообщение eslint: [{ "resource": "/d:/_Coding/nextjs_sanity_fullstack/pages/index.js", "owner": "eslint", "severity": 8, "message": "Parsing error: Unexpected reserved word 'await'. (32:25)", "source": "eslint", }]
@igormajrov8444
@igormajrov8444 Год назад
по ходу перемудрил в = ({async}) => )))
@webelart
@webelart Год назад
@@igormajrov8444 Да :) export const getServerSiteProps = async ('я не помню что здесь') => { const {posts, total} = await loadData(0, LOAD_MORE_STEP) }
@webelart
@webelart Год назад
@@igormajrov8444 async идет перед функцией, обозначая по факту, что функция - промис.
@Ролтун
@Ролтун Год назад
Это я за 2 с половиной часа что-ли сделаю блог?
@webelart
@webelart Год назад
ДААА! :)))
@Ролтун
@Ролтун Год назад
@@webelart Ну огонь. Мне еще комменты nested добавить и ок
@webelart
@webelart Год назад
@@Ролтун Кстати да, крутая идея! И походу такое можно сделать. css-tricks.com/how-to-create-a-commenting-engine-with-next-js-and-sanity/
@igormajrov8444
@igormajrov8444 Год назад
Засада с картинами. Я уже с англ версии все пакеты поднимал. И там, и здесь ругается на пустой url(): 32 | 33 | src={urlFor(image).url()} | ^ 34 | alt={image.caption} 35 | width={100} 36 | height={100}
@webelart
@webelart Год назад
Есть возможность прислать ссылку на GitHub?
@igormajrov8444
@igormajrov8444 Год назад
@@webelart Yaboooo! At last. Перезапостил все статьи. Картинки обновились, все заработало. Перекопал весь инет. Даже нашел совет, что надо отключить SSR)))
@webelart
@webelart Год назад
@@igormajrov8444 О, ну круто! Поздравляю, вы прошли игру! 😎❤‍🔥 Хаха, вспомнила про игру в кальмара что-то после этой фразы 😂😂😂
@igormajrov8444
@igormajrov8444 Год назад
@@webelart пока играл в эту игру, перевернул сеть. Это ж стремно. Если такой баг на крупном проекте возникнет. Это ж капут будет.
@webelart
@webelart Год назад
@@igormajrov8444 Согласна с вами, если что-то такое не постоянное присутствует. Нужно изучать почему такое произошло, возможно есть какая-то понятная проблема. Для предотвращения ошибок, можно проверить существование url или выхода, т.е. интерфейсом предусмотреть. Плюс проверить required поля в админка, но подозреваю у вас там оно прописано. В мире веб-разработки всякое может быть, картинка может действительно стать недоступна по каким-то причинам. Поэтому надо предусматривать со всех сторон, особенно для продакшена. Как я говорила в видео, у нас используется Sanity для довольно крупного продукта. Но мы им через микросервис манипулируем и картинки там же преобразуем.
Далее
Artist 4-Mavsum 20-son FINAL  (21.09.2024)
2:20:46
Просмотров 395 тыс.
«По каверочку» х МУЗЛОФТ❤️
00:21
Sanity Crash Course: Learn The Basics in 20 Minutes!
24:55
Add Comments to Next 14 & Sanity Blog
53:41
Artist 4-Mavsum 20-son FINAL  (21.09.2024)
2:20:46
Просмотров 395 тыс.