В уроке мы целиком и полностью создадим свой блог и заделоим его на vercel. Вёрстка, запросы, админка — ВСЁ!! ❤️🔥
🍀 Поддержать канал: https://www.donationalerts.com/r/webelart
☕️ Купить кофе: https://buy.stripe.com/5kA7sL9574SG7xCfZ3
🎨 Купить набор кистей Procreate: https://webelart.com/illustration.
✍️ Мой telegram channel: https://t.me/webelart
🏰 Английский YouTube: @webelart_en
💁🏼♀️ Инстаграм: https://www.instagram.com/webelart
🦄 LinkedIn: https://www.linkedin.com/company/webelart
❤️🔥 GitHub для старта: https://github.com/liveldi/my_blog_start
Литература:
Помимо документации при подготовке к уроку, я также смотрела это видео: https://www.youtube.com/watch?v=4mOkFXyxfsU&list=PLRzQpWc3zNPmI79v5cwYaf76cfzKJSape
Ссылки используемые в уроке:
😌 date-fns: https://date-fns.org
😌 React icons: https://react-icons.github.io/react-icons/
😌 Sanity client: https://www.npmjs.com/package/@sanity/client
😌 Sanity block content to react: https://www.npmjs.com/package/@sanity/block-content-to-react
😌 Sanity image-url: https://www.npmjs.com/package/@sanity/image-url
😌 Финальный пример в продакшене: https://mysuperblog.vercel.app
😌 Статья где можно почитать про Sanity https://kittygiraudel.com/2021/07/16/a-micro-client-for-sanity/
😌 Документация Sanity https://www.sanity.io
😌 Build and Deploy a Modern Full Stack ECommerce React Application with Stripe https://www.youtube.com/watch?v=4mOkFXyxfsU&list=PLRzQpWc3zNPmI79v5cwYaf76cfzKJSape
😌 Документация NextJs https://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
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.