CF

Next JS & Typescript with Shopify Integration - Full Guide

27h 55m 27s
English
Paid

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 thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 228 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 228 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Short Introduction
All Course Lessons (228)
#Lesson TitleDurationAccess
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

Related courses

Frequently asked questions

What prerequisites are needed for this course?
This course is suitable for those who want to start a developer career or enhance their skills. A basic understanding of JavaScript and React is helpful, but not mandatory, as the course covers TypeScript basics and moves into a production setup using Next.js.
What will I build during the course?
You will build a full e-commerce application from scratch. The project involves writing clean and modular code, creating React components, and integrating with Shopify. Styling is done using PostCSS and Tailwind CSS, and you will implement a complete checkout flow using React hooks.
Who is the target audience for this course?
The course is aimed at individuals looking to begin a career in web development or enhance their skills with modern technologies. It is particularly beneficial for those interested in working with Next.js and React in junior developer roles.
How does this course compare in depth and scope to other courses?
The course provides a detailed introduction to TypeScript and Next.js, leading to a comprehensive project that covers server-side rendering, static generation, and Shopify integration. It offers more practical, project-based learning compared to courses that only provide theoretical knowledge.
What specific tools and platforms are covered in the course?
The course covers several key tools and platforms, including TypeScript for static typing, Next.js as a React framework for web apps, and Shopify for e-commerce functionalities. You will also use PostCSS and Tailwind CSS for styling, and learn about React hooks for managing application state.
What is not covered in this course?
The course does not cover advanced topics such as server infrastructure management, back-end development beyond Shopify integration, or non-React frameworks. The focus is primarily on front-end development using Next.js and TypeScript.
How much time should I expect to commit to this course?
The course consists of 228 lessons. While the total runtime is not specified, you should expect to dedicate a significant amount of time to complete the lessons, practice exercises, and build the full e-commerce application from scratch.