Главная страницаКатегория next.jsNext.JS с Sanity CMS - Serverless приложение блога (с Vercel)

Next.JS с Sanity CMS - Serverless приложение блога (с Vercel)

Name: Next.JS с Sanity CMS - Serverless приложение блога (с Vercel)
Price: 12.5 USD
Rating: 5 (24 reviews)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

udemy

★5 (всего оценок - 24)

Продолжительность

13 ч 5 мин

Категория

Next.js

Количество уроков

81 Видео

Дата добавления

30 сент. 2020 г., 23:22

Язык

Английский

Дата выхода

11 июн. 2020 г., 00:00

Дата обновления

29 апр. 2026 г., 08:37

Этот курс — идеальный старт для тех, кто хочет освоить связку Next.js + Sanity CMS и создать современное, производительное серверлесс-приложение блога с последующим развёртыванием на Vercel.

Что такое Sanity и почему он идеально подходит для Next.js

Sanity — это мощная headless CMS, которая предоставляет гибкий доступ к структурированным данным через удобный API. Благодаря Sanity Studio разработчики получают полностью настраиваемое рабочее пространство для редактирования контента, а фронтенд-приложения могут использовать данные в режиме реального времени.

Удобная работа с текстами, изображениями и медиафайлами
Гибкие схемы данных
Поддержка GROQ — продвинутого языка запросов
Полный контроль над структурой и отображением контента

Начало работы: подготовка проекта на Next.js

В ходе курса вы начнёте с чистого и оптимизированного макета Next.js-приложения, подготовленного заранее. Используются современные практики разработки, включая React-хуки и возможности последней версии Next.js.

Создание структуры страниц

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

Создание и настройка контента в Sanity Studio

После подготовки проекта вы перейдёте к созданию схем данных в Sanity. Здесь вы освоите фундаментальные принципы платформы и научитесь работать с документами разных типов.

Типы документов: авторы и посты блога

Настройка полей документа
Добавление изображений
Использование блоков кода
Работа с rich-text контентом

Отображение данных в Next.js

Когда данные подготовлены, вы перейдёте к их получению и отображению на страницах приложения. Курс объясняет тонкости обработки изображений, а также показ кода и форматированного текста в интерфейсе.

Обработка изображений Sanity

Вы узнаете, как оптимизировать изображения, применять трансформации и эффективно работать с системой CDN от Sanity.

Фильтрация, сортировка и пагинация

Более продвинутые функции курса включают работу с фильтрами, параметрами сортировки и реализацией постраничного вывода данных. Это позволит вам создавать удобный и динамичный интерфейс блога.

Управление темами приложения

Используя подход provider/consumer, вы научитесь переключать светлую и тёмную темы, сохраняя логику управления состоянием простой и расширяемой.

Функция предпросмотра в Sanity

Особое внимание уделяется интеграции функции предварительного просмотра, которая позволяет отображать черновые материалы до их публикации. Это крайне полезно для редакторов контента и командной работы.

Развёртывание приложения на Vercel

В финале вы развернёте статически оптимизированное приложение на Vercel, получив высокую скорость загрузки, удобное управление и автоматические деплои.

Итоги и преимущества курса

Освоение связки Next.js + Sanity CMS
Создание современного быстро работающего блога
Практики разработки на основе актуальных технологий
Пошаговая интеграция, от схем контента до продакшн-деплоя
Полезные фичи: предпросмотр, фильтры, темы, пагинация

Этот курс станет отличным выбором для разработчиков, которые хотят научиться создавать гибкие и масштабируемые приложения, используя современные инструменты фронтенда и headless CMS.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:09
Introduction
Урок 2. 00:07:58
Course tips
Урок 3. 00:01:47
Section Introduction
Урок 4. 00:07:48
Init Next App
Урок 5. 00:17:09
Sanity Studio App
Урок 6. 00:09:53
React Bootstrap Integration
Урок 7. 00:09:52
Separation of Navbar
Урок 8. 00:02:21
Absolute path to files
Урок 9. 00:16:18
Page layout
Урок 10. 00:01:35
Section Introduction
Урок 11. 00:13:25
Sanity Types
Урок 12. 00:08:23
Sanity client
Урок 13. 00:11:20
Get blogs
Урок 14. 00:08:56
Blog fields & display blogs
Урок 15. 00:20:58
Under the hood
Урок 16. 00:13:30
Date and image
Урок 17. 00:06:36
Authors
Урок 18. 00:08:19
Display author
Урок 19. 00:07:24
Sanity validation
Урок 20. 00:06:06
Fonts + minor styling improvements
Урок 21. 00:20:33
Link and detail page
Урок 22. 00:12:00
Get blog data
Урок 23. 00:09:16
getStaticPaths function
Урок 24. 00:05:31
getStaticPaths part 2
Урок 25. 00:07:17
Blog detail page layout
Урок 26. 00:01:19
Section Introduction
Урок 27. 00:10:06
Sanity content and Image
Урок 28. 00:10:13
Sanity content and Code
Урок 29. 00:00:56
packageLock
Урок 30. 00:16:15
Blog content
Урок 31. 00:12:00
Code stylings
Урок 32. 00:17:16
Image improvements
Урок 33. 00:08:59
More about images
Урок 34. 00:04:54
Cropping of images
Урок 35. 00:08:31
Image position
Урок 36. 00:09:22
Apply image position
Урок 37. 00:01:15
Section Introduction
Урок 38. 00:09:57
Filtering view start
Урок 39. 00:08:22
Filtering working
Урок 40. 00:15:15
Font awesome
Урок 41. 00:03:06
List item data
Урок 42. 00:11:37
useSWR
Урок 43. 00:06:12
Api route to get blogs
Урок 44. 00:13:24
Get blogs from api
Урок 45. 00:06:35
Ordering
Урок 46. 00:01:20
Section Introduction
Урок 47. 00:21:43
swr Pagination
Урок 48. 00:11:34
Button to load
Урок 49. 00:07:19
Passing offset
Урок 50. 00:04:28
Fetch more blogs
Урок 51. 00:05:16
Fix fetching more blogs
Урок 52. 00:05:15
Date filtering icon
Урок 53. 00:06:37
Sorting by date
Урок 54. 00:05:39
Fix sorting by date
Урок 55. 00:13:41
Blank image
Урок 56. 00:11:13
Blank list item
Урок 57. 00:13:36
Moment and cover image
Урок 58. 00:02:47
Section Introduction
Урок 59. 00:15:45
Fallback
Урок 60. 00:18:36
Theme provider
Урок 61. 00:10:21
Apply theme
Урок 62. 00:12:11
Toggler
Урок 63. 00:14:26
Sanity preview
Урок 64. 00:13:59
Preview api route
Урок 65. 00:09:56
Get preview to page
Урок 66. 00:12:41
Get preview data
Урок 67. 00:02:55
Exit preview
Урок 68. 00:04:56
Fix issue to display preview data
Урок 69. 00:01:22
Section Introduction
Урок 70. 00:15:02
Sanity studio to Github
Урок 71. 00:22:18
Sanity deployment
Урок 72. 00:06:35
Sanity studio testing
Урок 73. 00:14:30
Deployment of Blog
Урок 74. 00:06:27
Fixing preview in production
Урок 75. 00:07:23
Unstable revalidate
Урок 76. 00:11:54
Styling Improvements
Урок 77. 00:08:35
Pagination improvements
Урок 78. 00:04:36
Preview fix
Урок 79. 00:10:36
Testing
Урок 80. 00:05:36
End of the course
Урок 81. 00:32:03
Pagination

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198