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

В уроке мы целиком и полностью создадим свой блог и заделоим его на vercel. Вёрстка, запросы, админка - ВСЁ!! ❤️‍🔥
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZbin: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️‍🔥 GitHub для старта: github.com/liveldi/my_blog_start
Литература:
Помимо документации при подготовке к уроку, я также смотрела это видео: • Build and Deploy a Mod...
Ссылки используемые в уроке:
😌 date-fns: date-fns.org
😌 React icons: react-icons.github.io/react-i...
😌 Sanity client: www.npmjs.com/package/@sanity...
😌 Sanity block content to react: www.npmjs.com/package/@sanity...
😌 Sanity image-url: www.npmjs.com/package/@sanity...
😌 Финальный пример в продакшене: mysuperblog.vercel.app
😌 Статья где можно почитать про Sanity kittygiraudel.com/2021/07/16/...
😌 Документация Sanity www.sanity.io
😌 Build and Deploy a Modern Full Stack ECommerce React Application with Stripe • Build and Deploy a Mod...
😌 Документация NextJs nextjs.org
00:00 Введение.
04:30 Создаём проект NextJs.
09:38 Создаём проект Sanity.
17:50 Создаём схему Post.
21:20 Заполняем схему Sanity: string, image, date, slug, text, body, array
38:10 Заполняем статьи.
45:30 Создаём группы.
47:38 Клиент: разбираем что нужно сделать.
50:27 Структура, rafce - snippets, подготовка клиента.
57:00 Разработка: создаём компоненты.
01:04:00 Клиент - обложка.
01:26:00 Клиент - вторая секция - начало.
01:29:00 Приступаем к загрузке posts: getServerSideProps.
01:32:45 Язык запросов Groq.
01:35:20 Настраиваем связь Sanity с клиентом.
01:41:00 Image Builder
01:43:00 Создаём функцию загрузки loadPosts.
01:51:30 Отображаем посты.
01:55:00 Решаем баг.
01:59:00 Отображение карточки поста.
02:06:15 Пагинация.
02:16:00 Решаем баг.
02:18:00 Открытие поста.
02:35:50 Добавляем head для мета тегов
02:37:40 Домашнее задание
02:38:34 Заливка на Github + Deploy
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[@user-ym6uk4rx2u]

2:26:14 на 19 строке ошибка в запросе, должно быть _type, из-за этого статическая генерация страниц не будет работать. Вдруг кто-то тоже перепечатал и потом удивился когда sitemap генерировал =)

[@webelart]

Спасибо большое. Зачинила ваше сообщение. ❤🎄

[@Diego-rx4wr]

Какая же ты красотка. Замотивировала меня опять начать программировать. Спасибо тебе! Ты лучшая! Было бы круто показывать нам, как ты свои приложения деплоишь. А не просто разрабатываешь.

[@webelart]

Спасибо! Очень приятно! Про деплой услышала! Не то чтобы у меня много приложений, использую digiral ocean :))) Собираем лайкосики и сделаю! ❤️‍🔥

[@igormajrov8444]

Повеселил ты меня. Вот встретится страшная заказчица, и что делать будешь? Бросишь кодить? ))))

[@eurorock5912]

О, что-то интересное!)) Спасибо, сча заценим, Елена!)

[@asmix7328]

Видео ещё не посмотрел, но лайк уже поставил) Респект Вам и успехов)) В выхи посмотрю полностью)

[@vadicus6534]

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

[@bolovy6093]

Привет красотка, видео как всегда 🔥 но хотелось бы почаще) Redux/Redux Toolkit/React Query ничего из этого не планируется?😅

[@webelart]

Привет, привет!! Стараюсь как могу с частотой! ❤️ В ближайшем будущем про redux - пока нет... Но если коммент будет набирать лайки 😁😁😁 who knows как говорится :)))

[@rustoiurazbaev2314]

Спасибо вам за прекрасный и классный проект.Подача материала просто супер.Успехов вам в развитии канала и конечно же в работе.А вы как всегда очаровательная и обоятельная.

[@webelart]

Какой крутой комментарий!!! Спасибо ОГРОМНОЕ!!!! Полный вперёд в мир программной магии! 🧙 😍❤️‍🔥❤️‍🔥❤️‍🔥 Все вместе! ❤️

[@MiMi-fx4gl]

залетело на одном дыхании)) спасибо!

[@webelart]

❤️❤️❤️‍🔥

[@nurdanokenov4439]

Спасибо за все! Крутой видос.

[@webmentorZH]

ааа! какой крутой контент! мне очень нужен был свой блог, думала делать на Hugo и Netlify, уже начала делать) но теперь пошла все смотреть и делать заново! Очень классное пояснение , качество видео бомба! Спасибо огромное!

[@webelart]

Круто, я рада что в тему, давайте жгите!!! ❤️‍🔥 Жду ссылку на вашу реализацию!!

[@k-ivan]

Спасибо за Ваши труды!

[@webelart]

Спасибо, что учитесь со мной ❤️

[@user-cd1sr5sx2r]

Очень хорошая идея проекта. Спасибо за урок.

[@webelart]

Еееее!!! Вперёд реализовывать!!! 😍

[@custercuster4918]

Большое спасибо за контент, не только это видео, но в целом. Не понимаю почему такие годные каналы не так популярны как другие, менее информативные каналы...

[@ruslanyusupov793]

Отличное видео, спасибо

[@andrey.kudinov]

Огонь 🔥

[@webelart]

❤️‍🔥❤️‍🔥❤️‍🔥

[@yankov2206]

Лена привет! Лайк, хороший комментарий для продвижения канала Подписчики смотрят, одобряют) спасибо!

[@webelart]

Спасибо огромное!!!! ❤Рада, что материал нравится!!

[@leuuuuuuuuuuu]

спасибо большое)

[@user-sv3sd9df2l]

Прикольно)

[@yagelProject]

Привет. Сделайте пожалуйста видео с Next 13 (App) и Sanity 3, без сложной структуры: - Блог, - Пагинация автоматическая при скролинге, - Категории в виде фильтра, - Поиск в виде фильтра Если конечно это возможно. Нет нормальных уроков на эту тему.

[@mazerafi138]

Полностью поддерживаю!

[@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.

[@jajanetoure1383]

Очень круто! Твой канал - находка. Смотрю видео и думаю: "она разговаривает со мной на одном языке"))) Отлично подаешь материал, все понятно и четко - без воды Не знаю будет ли интересно, но хотелось бы увидеть разбор задач с литкода

[@user-xs2dx2mh3f]

Деплой на версель == вендэрлок )

[@user-bt3hr2ob9q]

красотка я тебя обожаю. хотелось бы узнать как сделать навигацию с автоподгрузкой! было бы супер сделай плиззз

[@unicoxr5tj417]

что-то интересное

[@webelart]

Ван хандред пёрсент!!! 😍😁😁😁

[@dmitripolevoi4473]

Хотелось бы видео по архитектуре приложения на нексте, раньше был fsd но cra умер. как правильно организовывать структуру с призмой бд стейтменеджером итд, спасибо

[@maxbogdan9298]

Привет, а можна добавлять посты например конент менеджеру без запуска приложения санити?

[@gedonik]

Отличный материал! Хотелось бы больше масштабных проектов. Вы на работе тоже vs code используете или web storm ? Спасибо вам большое!

[@webelart]

vs code, да. Есть ребята, которые web storm используют

[@user-uk4ei5zj2b]

спасибо за урок. Вот такой вопрос: когда делаешь приложение для заказчика то ему нужно сделать отдельный аккаунт Sanity? и когда заливаешь проект на хостинг, то в санити нужно заменить url студии? спасибо

[@vadicus6534]

Наконец я сделал этот блог) Очень увлекательно было, спасибо за такой классный урок. Я делал на ts и по ходу попадались небольшие сложности, особенно при деплое на версел он ругался и ломался, но все в итоге получилось) и вот незадача - я не понимаю как теперь администрировать блог. надо локально запускать у себя проект и там добавлять посты? или если санити уже в нашем билде в верселе то оттуда как то? Помоги пожалуйста до конца понять что мы наделали)))

[@webelart]

Круто, я рада, что завершили. Вообще там интересно этот проект можно затеплоить отдельно от sanity платформы. Т.е. по факту мы имеем две разные платформы: одна с приложением на nextjs, другая sanity. Попробуйте поизучать в направлении деплоя sanity

[@vadicus6534]

@@webelart то есть надо папку с санити извлечь из проекта и отдельным репозиторием его так же на версель деплоить? оно будет так работать? сам клиент и санити напрямую не связаны между собой?

[@anastasiiacherkashina4343]

Спасибо за отличное видео! На основе вашего тьюториала делаю свое портфолио начинающего веб-разработчика) Было бы здорово больше комментариев по реализации. Я если что-то не понимаю, то пытаюсь гуглить и разбираться, но не всегда удается понять. Буду благодарна, если ответите на вопросы, что это за синтаксис: 1. import cl from 'classnames'; Что такое classnames и почему оно принимает в качестве аргументов className, styles.cover? 2. Для чего файл reset.scss?

[@webelart]

Это библиотека, которая просто позволяет объединять классы, если их несколько у компоненты, например если несколько классов у элемента, плюс некоторые классы можно класть под условия. и если isShown true, то класс появится. Просто довольно удобная. :) Вот ссылка www.npmjs.com/package/classnames

[@TenthHacker]

Это было круто 👍 Всё получилось. Скажите, а папки node_modules обязательно хранить на компе или можно сразу удалить?

[@webelart]

Они нужны для запуска проекта.Но на GitHub их заливать не нужно.

[@igormajrov8444]

Как быть с заголовками на кириллице? Slug автоматически можно как-то транслитерировать?

[@webelart]

🤔 вы можете написать функцию преобразования. Текущая наша просто в нижний регистр переводит и пробелы удаляет. Можно поискать библиотеку транслитерации и её заюзать.

[@user-fp8so9gz2y]

Крутой контент Елена ! Спасибо! Очень хорошо все раскладываете по полочкам! Возможно Вы подскажете, почему [slug] возврашает null?

[@webelart]

Рада, что понравился, Наталья! Подскажите минуту?

[@user-fp8so9gz2y]

@@webelart Елена, спасибо огромное за отклик! На 2:24 когда Вы выводите в console.log (post), у меня ничего не выводится, [slug].js:8 null. И на этом встала и не пойму в чем ошибка))

[@user-fp8so9gz2y]

@@webelartОчень буду благодарна Вашей помощи))

[@webelart]

@@user-fp8so9gz2y Есть только предположение, что у вас нет урла... Но нужно смотреть код, так сложно понять. Вы можете скачать мой код: github.com/liveldi/my_blog и проверить где у вас ошибка.

[@user-fp8so9gz2y]

@@webelartспасибо огромное за подсказку!

[@igormajrov8444]

После установки next и sanity выдает конфликт между настройками .eslintrc.json и .eslintrc. Как это починить?

[@webelart]

А вы sanity в отдельную папку установили? Т.е. .eslintrc.json должен быть у nextjs проекта. А .eslintrc у sanity_my_super_blog в папке внутри. Кстати ещё можно sanity положить в отдельную папку вообще. Т.е. не в первый проект. А чтобы папочки были рядом. Next.js проект и sanity. Всё будет работать тоже.

[@alexanderlisovskiy8167]

Что думаете на счет Strapi? Там куда больше преимуществ как по мне

[@webelart]

Не пользовалась, рекомендуете? Какие преимущества видите?

[@demptd13]

круто! все понравилось, много нового узнал, это первое видео с канала, которое попалось, буду смотреть теперь) единственный вопрос... почему такая большая задержка при рендере slug-страниц, такого точно не должно быть...

[@webelart]

Да я тоже думала, что как-то долго. Надо nextjs подробнее поразбивать. У него есть пререндеры. Но всё-равно, было бы лучше если на страницу переход произошел и был лоадер.., чем ты остаешься на прошлой страницы и как будто ничего не случилось

[@demptd13]

@@webelart я делал в учебных целях пару небольших проектов на Нексте, там из-под капота очень крутой функционал как отловить событие смены роута и повесить Лодер, хочу к вашему проекту кое-что прикрутить, посмотрим что получится ) А за видео реально спасибо, очень доходчиво все и понятно

[@webelart]

@@demptd13 Интересно, если что-то найдёте как ускорить - пишите! Рада, что материал понравился! ❤

[@demptd13]

@@webelart видел в комментариях под этим видео ссылку на возможность реализации комментариев, не рассматривали вариант сделать вторую часть к этому видео?) с комментариями

[@webelart]

@@demptd13 Пока нет, есть темы, которые хочется покрыть. Но я подумала в этом направлении, кто знает что там будет в будущем... :D

[@user-bt3hr2ob9q]

а как сделать еще удаление и редактирование поста с клиента?

[@webelart]

Вы хотите, чтобы пользователь удалял ваши посты? :) Обычно смысл в том, что это делается на админской стороне. Либо нужна клиентская админка

[@narek1771]

Привет Елена я питаюсь работать в фрилансе и у меня попросили админ панель могу и советуешь ли ты использовать Sanity ?

[@webelart]

Да, крутая штука!

[@webelart]

Но я бы уточнила у заказчика, нормально ему будет такая панель. Вообще возможностей там куда. Вы попробуйте сделать промо возможностей и показать заказчику.

[@narek1771]

@@webelart огромное спасибо за ответ и вообще за уроки 💛💚

[@bloggerfox]

Хмммм. Вопросик есть. Фронт и бэк в одну папку залили. У каждого свой package.json. Потом, перезаписали пакеты с бэка поверх фронта. С самого начала нельзя было так сделать? Я не могу понять логику таких виражей)))

[@webelart]

Так пакеты не с бека, пакеты для фронта для соединения с беком. По факту можно создать две разные папки просто вытащить sanity_my_super_blog и все будет работать также. Все в одной папке просто, чтобы был один репо.

[@igormajrov8444]

Еще вопросик. Получается владелец сайта постоянно привязан к сервису sanity. Не минус ли это большой?

[@webelart]

В чем видите минус?

[@igormajrov8444]

@@webelart может выйти дороже хостинга или выделенного сервера при превышении лимита free аккаунта. ... Есть ли доступ по FTP к файлам? Доступ к базе? ...

[@webelart]

@@igormajrov8444 Не факт. Например на digital ocean у меня хостинг плачу 25 долларов в месяц кажется и по факту у меня там голая машинка. Тут же вам предоставляется и база данных и уже крутые интерфейсные возможности, о многом просто не нужно думать и тратить деньги на доп. время разработчиков. Здесь можно посчитать сколько времени экономится и сколько стоит тот же Django программист в месяц, а их обычно не один человек нужно. Мы с Django перешли на Sanity, производительность выросла в 3 раза и это по запросам. И скорость разработки тоже возраста. Надо будет кстати на работе про это разузнать, интересная тема сколько ресурсов у нас по факту экономится.

[@webelart]

@@igormajrov8444 Но я вас поняла, что чем больше пользователей, больше запросов, больше цена.

[@99k27]

Спасибо за контент! могли бы подсказать как одновременно менять имена? 0:58:03

[@webelart]

Тут автоматически выделяется от снипета rafce. Однако в редакторе VS Code можете выделить слово и зажав cmd и кликая D клавишу вы постепенно выбираете все совпадения (для мака, для window может ctrl & D, я точно не знаю).

[@99k27]

Ctrl + f2 как выяснилось) чет сложный какой-то урок, еще полчаса осталось. весь день сегодня осваивал)))(ну как осваивал. копировал с видео)

[@webelart]

@@99k27 А вы с реактом до этого работали? Скиньте потом ссылку, что получилось.

[@99k27]

@@webelart не, мой первый опыт с реактом связан с вашим роликом )

[@igormajrov8444]

Eslint не хочет сохранять как у вас. Все выравнивает построчно. У вас на гите есть настройки линта?)))

[@webelart]

Что за проблемы с eslint?

[@igormajrov8444]

@@webelart как ы написал выше

[@webelart]

@@igormajrov8444 На GitHub всё тоже самое, что и здесь.

[@99k27]

Интересные у вас закладки в браузере

[@webelart]

Пишите минуту заблюрю :)

[@99k27]

@@webelart не настолько интересные)) подскажите пожалуйста, почему у меня в cmd не видит команду git? Десктопная версия установлена.

[@webelart]

@@99k27 С windows мне сложно, пишут что должна быть отдельная консоль git bash support.codebasehq.com/articles/getting-started/git-on-windows

[@99k27]

@@webelart спасибо большое ) попробую сегодня) этот проект может служить конструктором для других проектов?

[@webelart]

@@99k27 Смотря что вы подразумеваете под конструктором. Можно расширять, делать, другие комбинации. В зависимости от ваших целей.

[@silenciomar]

😅блин, скорее бы дойти уровня, чтобы понимать это видео. А то пока начинающая еще

[@webelart]

Давай, давай. Расти!!!! ❤️‍🔥 Пусть начала и открытий - это потрясающий путь всегда!

[@MisaNia25]

Можешь Roadmap сделать по твоему каналу как и что изучать постепенно ?

[@webelart]

@@MisaNia25 Хорошо, сделаю.

[@igormajrov8444]

ESLint ругается, что await - зарегистрированное слово.

[@webelart]

Скинете кусок кода, что вы написали?

[@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]

по ходу перемудрил в = ({async}) => )))

[@webelart]

@@igormajrov8444 Да :) export const getServerSiteProps = async ('я не помню что здесь') => { const {posts, total} = await loadData(0, LOAD_MORE_STEP) }

[@webelart]

@@igormajrov8444 async идет перед функцией, обозначая по факту, что функция - промис.

[@Ролтун]

Это я за 2 с половиной часа что-ли сделаю блог?

[@webelart]

ДААА! :)))

[@Ролтун]

@@webelart Ну огонь. Мне еще комменты nested добавить и ок

[@webelart]

@@Ролтун Кстати да, крутая идея! И походу такое можно сделать. css-tricks.com/how-to-create-a-commenting-engine-with-next-js-and-sanity/

[@igormajrov8444]

Засада с картинами. Я уже с англ версии все пакеты поднимал. И там, и здесь ругается на пустой url(): 32 | 33 | src={urlFor(image).url()} | ^ 34 | alt={image.caption} 35 | width={100} 36 | height={100}

[@webelart]

Есть возможность прислать ссылку на GitHub?

[@igormajrov8444]

@@webelart Yaboooo! At last. Перезапостил все статьи. Картинки обновились, все заработало. Перекопал весь инет. Даже нашел совет, что надо отключить SSR)))

[@webelart]

@@igormajrov8444 О, ну круто! Поздравляю, вы прошли игру! 😎❤‍🔥 Хаха, вспомнила про игру в кальмара что-то после этой фразы 😂😂😂

[@igormajrov8444]

@@webelart пока играл в эту игру, перевернул сеть. Это ж стремно. Если такой баг на крупном проекте возникнет. Это ж капут будет.

[@webelart]

@@igormajrov8444 Согласна с вами, если что-то такое не постоянное присутствует. Нужно изучать почему такое произошло, возможно есть какая-то понятная проблема. Для предотвращения ошибок, можно проверить существование url или выхода, т.е. интерфейсом предусмотреть. Плюс проверить required поля в админка, но подозреваю у вас там оно прописано. В мире веб-разработки всякое может быть, картинка может действительно стать недоступна по каким-то причинам. Поэтому надо предусматривать со всех сторон, особенно для продакшена. Как я говорила в видео, у нас используется Sanity для довольно крупного продукта. Но мы им через микросервис манипулируем и картинки там же преобразуем.