Главная страницаКатегория typescriptNext JS и Typescript с Интеграцией Shopify - Полное руководство

Next JS и Typescript с Интеграцией Shopify - Полное руководство

Name: Next JS и Typescript с Интеграцией Shopify - Полное руководство
Price: 12.5 USD
Rating: 4.9 (51 reviews)

Next JS & Typescript with Shopify Integration - Full Guide

udemy

★4.9 (всего оценок - 51)

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

27 ч 55 мин

Категория

TypeScript

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

228 Видео

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

26 сент. 2021 г., 22:27

Язык

Английский

Дата выхода

27 авг. 2021 г., 03:00

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

29 апр. 2026 г., 12:55

Хотите уверенно освоить Next.js, Typescript и интеграцию с Shopify? Этот курс проведет вас через весь путь — от основ типизации до создания полнофункционального e-commerce приложения с современной архитектурой и деплоем на Vercel. Обучение построено практическим образом, чтобы вы сразу применяли знания в реальных проектах.

Что вы изучите в этом курсе

Курс сочетает в себе фундаментальные знания и практический опыт разработки на Next.js и TypeScript, а также подробную интеграцию с Shopify — одним из самых популярных e-commerce API.

Изучение Next.js

Вы разберетесь, как работает современный Next.js, научитесь создавать страницы с SSR и SSG, работать с маршрутизацией и оптимизировать приложение для высокой производительности.

Маршрутизация на основе файловой системы
Динамические маршруты и параметризация
Предварительный рендеринг: SSG и SSR
Оптимизация изображений и загрузки ресурсов

Освоение TypeScript

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

Основные типы и интерфейсы
Дженерики и утилиты типов
Типизация React-компонентов и хуков
Организация типобезопасной структуры проекта

Подходит ли вам этот курс

Обучение идеально для тех, кто:

делает первые шаги в веб-разработке и хочет понять фреймворк Next.js;
уже пишет на React и хочет углубиться в SSR и типизацию;
планирует развиваться в направлении frontend, full‑stack или e-commerce разработки;
хочет создать собственный интернет‑магазин или сложное веб-приложение.

Практическая часть: создание e-commerce приложения

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

Архитектура и структура проекта

Модульная и масштабируемая структура
Переиспользуемые компоненты и контейнеры
Организация UI и логики состояния

Создание интерфейса с PostCSS и Tailwind CSS

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

Использование React Hooks по современным паттернам

Курс обучает созданию собственных хуков, которые:

модульны и легко поддерживаются;
просты в тестировании;
используются для управления корзиной, товарами и оформлением заказа.

Интеграция с Shopify и деплой

Финальная часть курса посвящена подключению Shopify Storefront API — вы научитесь получать данные о продуктах, оформлять заказы и работать с серверными функциями Next.js.

Что вы сделаете в конце обучения

Настроите взаимодействие с Shopify API
Реализуете функциональный каталог и корзину
Подключите оплату и оформление заказа
Задеплоите приложение на Vercel

Итог — какие навыки вы получите

По завершении курса вы будете уверенно владеть современными инструментами frontend‑разработки и сможете создавать полноценные веб-приложения уровня продакшн. Эти навыки помогут вам развиваться как разработчику и претендовать на более высокие позиции.

Начните обучение сейчас и создайте свое первое профессиональное e‑commerce приложение на Next.js и TypeScript!

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

Урок 1. 00:01:31
Short Introduction
Урок 2. 00:01:35
Course Motivation
Урок 3. 00:05:52
[Optional] How to resolve issues
Урок 4. 00:05:57
Next Init
Урок 5. 00:06:11
Ts Init
Урок 6. 00:05:58
Ts options
Урок 7. 00:08:24
Ts Config
Урок 8. 00:04:05
Playground
Урок 9. 00:06:16
[ai] Function params
Урок 10. 00:06:32
[ai] Custom types
Урок 11. 00:05:00
[ai] Interface vs Type
Урок 12. 00:08:22
[ai] Function Types
Урок 13. 00:03:42
[ai] Class Types
Урок 14. 00:02:57
[ai] Optional Parameters
Урок 15. 00:06:48
[ai] Narrowing
Урок 16. 00:04:22
[ai] Extending Interface
Урок 17. 00:05:00
[ai] Extending Type
Урок 18. 00:02:45
[ai] Unions
Урок 19. 00:05:32
[ai] Union narrowing
Урок 20. 00:02:06
[ai] Type casting
Урок 21. 00:06:11
[ai] Interface narrowing
Урок 22. 00:02:10
[ai] Declaration merging
Урок 23. 00:03:13
[ai] Never usage
Урок 24. 00:04:44
[ai] Generic Objects Types
Урок 25. 00:03:08
[ai] Unknown type
Урок 26. 00:05:47
[ai] Void Type
Урок 27. 00:04:25
[ai] Array Generic
Урок 28. 00:11:37
[ai] Custom Generic Type
Урок 29. 00:06:11
[ai] Generic extends
Урок 30. 00:04:51
[ai] Default values of generics
Урок 31. 00:08:26
[ai] Generic Types with Extends
Урок 32. 00:05:14
[ai] Ternary with Generics
Урок 33. 00:04:31
Single from Array Type
Урок 34. 00:04:52
Array Index Types
Урок 35. 00:05:49
Mapped Types
Урок 36. 00:06:35
Typeof
Урок 37. 00:08:59
Infer keyword
Урок 38. 00:02:50
KeyOf
Урок 39. 00:04:46
Multiple generic params
Урок 40. 00:12:08
Infering return type of Promise
Урок 41. 00:05:23
Infer get static props
Урок 42. 00:05:38
Get all products separation
Урок 43. 00:09:19
Fetch Api Function
Урок 44. 00:20:36
Integrate Custom API Server
Урок 45. 00:16:36
More about Shopify GraphQL
Урок 46. 00:09:19
Fetch product query
Урок 47. 00:08:26
Move fetch API
Урок 48. 00:10:05
Specify fetcher return type
Урок 49. 00:04:00
Map product from connection type
Урок 50. 00:13:13
Normalize product
Урок 51. 00:09:43
Normalize product images
Урок 52. 00:05:25
Product bussines type
Урок 53. 00:05:40
Alias Imports
Урок 54. 00:05:51
Module re-exports
Урок 55. 00:06:43
Next config file
Урок 56. 00:08:45
Framework specific configuration
Урок 57. 00:10:47
Ts config specific setup
Урок 58. 00:08:07
Format JSON in config file
Урок 59. 00:10:56
Handle corner cases in config
Урок 60. 00:06:57
Shopify Config
Урок 61. 00:09:57
Api config type
Урок 62. 00:06:07
_app component
Урок 63. 00:07:55
Layout component
Урок 64. 00:04:55
Reusable layout
Урок 65. 00:02:12
Noop
Урок 66. 00:02:35
Css Start
Урок 67. 00:15:05
Tailwind & PostCSS
Урок 68. 00:06:33
Generate PostCss output
Урок 69. 00:02:13
Autoprefixer
Урок 70. 00:09:21
Layout styling
Урок 71. 00:06:25
Add fit styling
Урок 72. 00:06:37
Css variables
Урок 73. 00:03:53
Tailwind variables
Урок 74. 00:02:13
BG Color
Урок 75. 00:08:09
Product Card
Урок 76. 00:08:43
Product info
Урок 77. 00:05:25
Grid Component
Урок 78. 00:11:06
Grid stylings
Урок 79. 00:08:33
More About Grid Stylings
Урок 80. 00:08:17
Additional Explanation
Урок 81. 00:03:43
Product Images
Урок 82. 00:01:54
Grid on LG screen
Урок 83. 00:05:48
LayoutA
Урок 84. 00:04:40
LayoutA Col
Урок 85. 00:14:26
[css] Product Tag
Урок 86. 00:06:04
[css] Product BG
Урок 87. 00:06:14
[css] Pattern svg
Урок 88. 00:04:29
[css] Scaling up
Урок 89. 00:04:06
[css] Transition
Урок 90. 00:07:38
Normalize product price
Урок 91. 00:02:47
[css] Max Height
Урок 92. 00:06:20
Flex Start
Урок 93. 00:07:46
Apply Flex & Flex 1
Урок 94. 00:03:15
Flex shrink
Урок 95. 00:11:21
Flex basis
Урок 96. 00:09:09
Justify content
Урок 97. 00:14:36
Hero component
Урок 98. 00:06:52
Container
Урок 99. 00:05:19
Container custom element
Урок 100. 00:04:43
El type
Урок 101. 00:07:40
Flex Hero
Урок 102. 00:07:59
Marquee
Урок 103. 00:04:20
Product Variant
Урок 104. 00:10:43
Slim Product
Урок 105. 00:03:34
Ticker
Урок 106. 00:02:53
Layout B
Урок 107. 00:03:41
Marquee variant
Урок 108. 00:02:57
Footer
Урок 109. 00:03:28
Navbar
Урок 110. 00:07:31
Navbar Links
Урок 111. 00:09:19
Usernav
Урок 112. 00:03:39
Icons
Урок 113. 00:13:53
Sidebars, Wishlist
Урок 114. 00:10:20
UI Provider
Урок 115. 00:06:59
State in Ui Provider
Урок 116. 00:09:39
Ui provider Interfaces
Урок 117. 00:11:39
use reducer
Урок 118. 00:06:07
Get ref
Урок 119. 00:05:07
Disable scroll
Урок 120. 00:04:44
Issue Introduction
Урок 121. 00:03:54
Use memo
Урок 122. 00:14:21
Product Detail Page
Урок 123. 00:09:02
get all products paths
Урок 124. 00:08:02
get static paths query
Урок 125. 00:06:05
Get Product Function
Урок 126. 00:09:37
Get Product Query
Урок 127. 00:11:43
Pass variables to query
Урок 128. 00:07:17
Specify variables type
Урок 129. 00:08:22
Get normalized product
Урок 130. 00:08:26
Normalize Options
Урок 131. 00:07:53
Normalize finished
Урок 132. 00:09:01
Normalize variants
Урок 133. 00:06:12
Normalize variants options
Урок 134. 00:11:48
Variant and Option types
Урок 135. 00:05:14
Product View
Урок 136. 00:09:53
Product Data
Урок 137. 00:10:26
Keen Slider
Урок 138. 00:08:15
Sliding in keen slider
Урок 139. 00:08:13
Product Slider Done
Урок 140. 00:05:48
UI Button
Урок 141. 00:06:25
Button Improvements
Урок 142. 00:05:46
Display variant options
Урок 143. 00:08:41
Swatch
Урок 144. 00:05:56
Style Swatch
Урок 145. 00:06:14
Choices
Урок 146. 00:04:03
Choices type
Урок 147. 00:11:48
Active Choice
Урок 148. 00:10:50
isDark color
Урок 149. 00:10:40
get variant
Урок 150. 00:13:21
Find variant
Урок 151. 00:08:39
Add item to cart
Урок 152. 00:10:35
use add item
Урок 153. 00:06:01
useHook handler
Урок 154. 00:09:02
Use Api provider
Урок 155. 00:11:11
Shopify api provider
Урок 156. 00:04:03
Core config
Урок 157. 00:06:05
Api Hooks
Урок 158. 00:05:24
Context types
Урок 159. 00:11:26
Use hook
Урок 160. 00:04:32
Provide fetch
Урок 161. 00:06:13
Mutation Hook
Урок 162. 00:10:04
Pass custom fetch
Урок 163. 00:05:55
Hook fetcher types
Урок 164. 00:06:18
Call Api Fetcher
Урок 165. 00:11:30
Api URL rework
Урок 166. 00:03:18
Fix Fetcher type
Урок 167. 00:05:52
Fetcher options
Урок 168. 00:11:02
Variables Specification
Урок 169. 00:09:01
Get checkout id
Урок 170. 00:07:26
Checkout Line Items Add
Урок 171. 00:10:53
use cart preparation
Урок 172. 00:03:34
Fixing types
Урок 173. 00:03:47
useSWRHook
Урок 174. 00:10:31
useData hook
Урок 175. 00:12:46
Call fetcher in use data
Урок 176. 00:11:25
cookies checkout id
Урок 177. 00:05:06
get checkout cookie from provider
Урок 178. 00:09:00
checkout create prep
Урок 179. 00:09:52
Checkout create mutation
Урок 180. 00:08:35
extract data from checkout create
Урок 181. 00:09:22
Store Cookies to Browser
Урок 182. 00:07:51
get checkout query
Урок 183. 00:08:02
Checkout detail fragment
Урок 184. 00:09:14
useSWR
Урок 185. 00:06:25
useSWR improvement and useMemo
Урок 186. 00:06:35
Pass SWR options
Урок 187. 00:06:39
Checkout to cart
Урок 188. 00:08:36
Cart normalization
Урок 189. 00:12:05
Normalize line item
Урок 190. 00:06:42
Normalize images, options
Урок 191. 00:06:44
Line item interface
Урок 192. 00:08:10
Mutation Hook
Урок 193. 00:13:44
Mutation Hook Descriptor
Урок 194. 00:06:25
Fetcher Output
Урок 195. 00:12:48
UseAddItem type
Урок 196. 00:09:45
SWR Hook Type
Урок 197. 00:07:18
Use Data Type
Урок 198. 00:03:58
Fetcher output description
Урок 199. 00:10:07
Use Cart Type
Урок 200. 00:07:08
Display items in cart
Урок 201. 00:05:04
Extend isEmpty to SWR
Урок 202. 00:08:41
Cart Item Component
Урок 203. 00:06:39
Display cart options
Урок 204. 00:07:47
Mutate Cart
Урок 205. 00:07:07
Display items count
Урок 206. 00:09:25
Provide swatch
Урок 207. 00:11:06
Use remove item
Урок 208. 00:05:51
Remove item descriptor
Урок 209. 00:07:06
Remove item done
Урок 210. 00:02:43
Remove item handler type
Урок 211. 00:10:18
Use update item start
Урок 212. 00:09:21
Handle quantity
Урок 213. 00:01:41
Quantity improvement
Урок 214. 00:11:10
Use update item done
Урок 215. 00:02:51
Use update item type
Урок 216. 00:03:26
Small improvements
Урок 217. 00:10:00
Loading button
Урок 218. 00:06:51
Loading Dots + Default variant
Урок 219. 00:04:55
Button to link
Урок 220. 00:09:16
Shopify and private app
Урок 221. 00:12:01
Creating Shopify products
Урок 222. 00:13:05
Accessing Storefront API
Урок 223. 00:06:19
Checkout API
Урок 224. 00:12:04
Handling checkout
Урок 225. 00:10:13
Remove old checkout
Урок 226. 00:09:13
Github deployment
Урок 227. 00:05:45
Deployment To Vercel
Урок 228. 00:05:02
Course End

Автор - udemy

udemy

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

+198

Комментарии

Andrew
7 сент. 2024 г., 23:12
Update Please
MAC
8 авг. 2024 г., 17:31
https://coursehunter.net/order-desc?order-id=14561
Babar
25 окт. 2022 г., 22:42
update please :)
Un1xCr3w
25 апр. 2022 г., 06:45
course not working !
abankitbaid
20 окт. 2021 г., 14:31
One of the best course to learn Typescript and Next.js