Next JS & Typescript with Shopify Integration - Full Guide

Name: Next JS & Typescript with Shopify Integration - Full Guide
Price: 12.75 USD
Availability: InStock

27h 55m 27s

English

Paid

November 10, 2023

In this course, you build a full e‑commerce app from scratch. You use TypeScript and Next.js to write clear code and ship real features. You start with core TypeScript skills, then move step by step into the full project.

Next.js Overview

Next.js is a React framework that helps you build fast web apps. It supports server-side rendering and static pages. You work with files to define routes, including dynamic routes.

Page-based routing with dynamic paths
Static generation and server-side rendering per page

What TypeScript Adds

TypeScript builds on JavaScript and adds static types. Types help you catch bugs early and make your code easier to change. You learn the syntax and patterns you use later in the project.

Who This Course Helps

This course fits you if you want to start a developer career or grow your skills. You learn by building a complete app with tools used in real work. You move from TypeScript basics into a full production setup.

You finish with the confidence to build your own projects and apply for junior roles that use Next.js or React.

What You Build

After the TypeScript section, you start the e‑commerce app. You write clean and modular code and build your own React components.

You style the app with PostCSS and Tailwind CSS. Both help you write clear and reusable styles.

Hooks and App Features

You learn modern patterns for React hooks. You use hooks to power the full checkout flow. Hooks keep the code small, testable, and easy to update.

Shopify and Deployment

At the end, you connect the app to Shopify. You then deploy the project to Vercel so others can access it online.

About the Author: udemy

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 228 lessons

0:00

#1: Short Introduction

All Course Lessons (228)

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

Unlock unlimited learning

Get instant access to all 227 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription