Ultimate Next.js 13 Course + eBook

51h 35m 4s
English
Paid

Course description

Enter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling every month. 

Read more about the course

1. Deep dive & understand how it works

Just knowing how to do something isn’t enough.

Not with ChatGPT, GitHub Copilot and new tools that can output better code every day.

See, understanding how the web actually works makes you future-proof.

You’ll be able to prompt little pieces of code and bring them together into a well-architectured app instead of getting replaced.

2. Build and deploy a complex app

If you have half the pieces of a puzzle?

You have a terrible puzzle.

That’s why theory, short tutorials, and docs aren’t enough. How do you actually bring it all together into a production-ready app?

That’s what separates a great dev from the mediocre junior who just takes on tasks given from above like a robot.

And finally ...

3. Active lessons so you’re 100% confident you can code it yourself

Look. The biggest issue with project-based tutorials is that people sometimes just follow along.

You need to practice yourself because no one will code the app for you.

This is why I added Active lessons.

Here you code the most important parts of the app.

You Master the features of Next13 to guarantee you walk away with the skills to build stunning apps with Next13 on your own.

Master the most sought-after tech stack of 2023 and beyond

You’ll need intermediate knowledge of JavaScript (eg. array methods, spread, try catch...) and beginner knowledge of React (components & JSX syntax, managing state, functional components) to take the course.

If you’re unfamiliar with these, don’t worry. We’ll provide you the resources to get you up to speed, but it definitely won’t be as easy as if you had experience beforehand.

If you’re asking if you need to know TypeScript - you don’t. Here at JSM we learn by building apps & this is the perfect chance to learn it since TypeScript is used in most industry projects.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Ultimate Next.js 13 Course + eBook

0:00
/
#1: Intro

All Course Lessons (282)

#Lesson TitleDurationAccess
1
Intro Demo
12:02
2
Prerequisites
04:36
3
Before Next.js
08:51
4
Introduction to Next.js
13:01
5
How Web Works
08:21
6
DevFlow Project Setup
04:46
7
Eslint Prettier Setup
10:43
8
Git-Github Setup
02:16
9
Tailwind CSS Setup
17:39
10
Code Architecture
03:51
11
What is Next.js Routing_
21:03
12
Creating Routes for DevFlow
07:23
13
Client vs. Server Paradigm
15:43
14
Different Rendering Strategies
15:26
15
The Modern Auth Service
02:05
16
Setup Auth for DevFlow
08:27
17
Creating Layouts using Next-Font and Metadata in DevFlow
08:38
18
Creating a Global Theme Context for DevFlow
12:15
19
Container and User Account
12:29
20
Shadcn Installation
03:28
21
Theme Switcher and Mobile Navigation
41:28
22
Active Lesson 1 — Create a LeftSidebar
04:37
23
LeftSidebar Component
10:50
24
Active Lesson 2 — Create a RightSidebar
00:39
25
RightSidebar Component
17:27
26
Home Route
05:03
27
Active Lesson 3 — Create a LocalSearchbar
00:21
28
LocalSearchbar Component
08:30
29
Active Lesson 4 — Create a Filter
00:44
30
Home Filters
16:25
31
Create Question Card
50:54
32
Question Form and Validations
17:20
33
The Question Editor
09:30
34
Custom Multiple Tags Input
10:35
35
Making the Form Reusable
05:09
36
Thinking in Backend
08:50
37
MongoDB and Server Actions Setup
13:02
38
Creating Question Model
05:47
39
Creating a User Model
05:55
40
Creating a Tag Model
02:16
41
Create Question Action
24:09
42
Display Questions on the Home Page
15:59
43
Why _ what are Webhooks
03:01
44
Implement Webhooks and User Actions
16:12
45
Deploy Webhooks
29:23
46
Create Community Page
22:52
47
Create Tags Page
09:01
48
Create Question Details Page
14:52
49
Parse _ display Question Content
13:42
50
Create Answer Form
15:10
51
Create Answer Model
04:09
52
Implement Create Answer action
04:02
53
Integrate Create Answer action inside Answer Form
10:47
54
Display All Answers
21:34
55
Create Votes UI
09:54
56
Create Upvote-DownVote actions for Question
06:57
57
Integrate Question upvote-downvote actions on UI
11:34
58
Create Answer Voting
09:36
59
Implement Save Question Action and Create Collection Page
05:34
60
Display all saved questions
12:21
61
Create Question Details Page View
14:23
62
Create a Tag Details Page
17:52
63
Create Profile Page
25:59
64
Create User Stats UI
09:08
65
Implement User Questions Tab
08:47
66
Implement User Answers Tabs
14:30
67
Implement Edit-Delete Question-Answer Component
16:37
68
Create Edit Question Page
15:30
69
Create Edit Profile Page
22:58
70
Show Top Questions
03:38
71
Show Popular Tags
03:44
72
Manage search state
22:12
73
Implement Search functionality for the Home page
06:49
74
Implement Search functionality for the Community page
03:16
75
Implement Search functionality for the Collection page
01:34
76
Implement Search functionality for the Tags page
04:24
77
Manage Filter state
06:25
78
Integrate Filters on Home page
04:46
79
Integrate Filters on the Community page
06:42
80
Integrate Filters on the Collection page
03:45
81
Integrate Filters for Tags and Answers
08:32
82
Create Pagination component
10:40
83
Implement pagination on the Home page
05:42
84
Implement pagination for the rest of the pages
22:04
85
Create the Global Search UI
09:10
86
Create GlobalSearch Result Component
19:29
87
Create Global Search Filters
09:22
88
Implement the GlobalSearch action
27:26
89
What is Reputation and how to approach it
01:42
90
Implement Reputation points for Questions
08:32
91
Implement Reputation points for Answers
06:03
92
More on Reputation and how to extend it
01:09
93
Implement the Badge System
15:56
94
Setup AI Answer feature
05:41
95
Implement the API route for the AI feature
08:46
96
Display the AI results on the UI
05:40
97
Setup AI Answer feature
05:41
98
Create a Loading state for the Community page
04:19
99
Create Loading states for the rest of the pages
02:15
100
Create toasts for a few actions
08:46
101
What is Metadata and how to implement it
05:07
102
Fix bugs and implement Recommendations
18:49
103
Upgrade Next.js to the latest version
03:52
104
Deploy the application
21:28
105
Introduction to the Course
01:59
106
Where are the projects_
01:59
107
Environment Setup
03:41
108
Visual Studio Code
03:09
109
Visual Studio Code Extensions
01:57
110
Our Workflow
03:54
111
Variables Intro
04:34
112
Variables
07:12
113
Data Types
01:53
114
Comments
05:13
115
Strings
07:11
116
Numbers
05:01
117
Booleans
04:10
118
Null and Undefined
04:49
119
Objects
05:12
120
Statically vs Dynamically Typed Languages
03:23
121
Operators Intro
01:01
122
Arithmetic Operators
08:00
123
Comparison Operators and Equality
07:06
124
Strict vs Loose Equality
08:53
125
Logical Operators Part 1
04:50
126
Assignment Operators
02:59
127
Intro to Logic and Control Flow Intro
00:41
128
If Statement
05:14
129
Truthy _ Falsy Values
09:23
130
Logical Operators Part 2
12:06
131
Switch Statement
07:35
132
Ternary Operator
04:24
133
Looping - While and For Loops
10:08
134
Functions Intro
09:20
135
Declaring and Invoking Functions
06:52
136
Function Return
04:12
137
Arrow Functions
06:31
138
Parameters vs Arguments
06:08
139
Tricky Parts Intro
00:48
140
Scope
13:41
141
Hoisting
08:30
142
Closures
10:03
143
Strings Intro
07:46
144
String Length and Basic Properties
03:56
145
Change String Case
02:52
146
Searching for a Substring
09:09
147
Getting a Substring
02:30
148
Split a String
03:03
149
Reverse, Repeat and Trim a String
05:17
150
String Exercise
03:17
151
String Exercise Solution
04:25
152
Arrays Intro
07:10
153
Array Methods
13:48
154
Array ForEach
08:40
155
Array Map
04:31
156
Array Filter
11:15
157
Array Find
04:19
158
Array Includes
06:27
159
Array Sort
05:43
160
Array Some and Every
04:21
161
Array Reduce
09:28
162
Objects Intro
05:31
163
Accessing, Adding and Updating Properties of an Object
06:49
164
Built in Methods
04:56
165
Methods
09:27
166
Value vs Reference Intro
06:40
167
Value vs Reference Explanation
04:21
168
Shallow Cloning
08:19
169
Deep Cloning
06:50
170
Intro to DOM
03:34
171
Selecting Elements
06:57
172
Elements Properties and Methods
06:55
173
Working with Classes
05:16
174
Creating, Traversing and Removing Nodes
06:42
175
The _new_ Keyword
07:52
176
The _this_ Keyword
08:25
177
Classes
08:27
178
Intervals and Timers
06:12
179
Introduction to Asynchronous JavaScript
06:24
180
Callbacks
08:26
181
Callback Hell_
09:03
182
Promises
10:12
183
Async-Await
08:47
184
Modern JavaScript Intro _ Recap
09:28
185
Module Imports and Exports
07:31
186
Rest and Spread Operators
06:47
187
Object and Array Destructuring
09:14
188
Intro
01:30
189
Environment Setup
03:41
190
Visual Studio Code Setup
03:17
191
Business Masterclass Intro
02:00
192
Reading RFP
06:22
193
Proposal Template
07:45
194
CryptoKet Proposal
14:25
195
Project Setup
10:53
196
ESLint Setup
07:27
197
Tailwind Introduction
03:13
198
Git _ GitHub Setup
06:19
199
Next.js File-Based Routing and Setup
06:40
200
Reusable Logic
08:20
201
Navbar Development
54:52
202
Footer Development
23:04
203
Banner Development
11:30
204
Top Sellers
36:04
205
Hot Bids Part 1
20:12
206
Hot Bids Part 2
05:07
207
Create NFT Page
21:35
208
Create NFT Page Input
14:58
209
Hardhat Setup Metamask Configuration
10:46
210
Smart Contract Configuration
16:37
211
Update and Get Listing Price
04:15
212
Function Create Token
05:48
213
Function CreateMarketItem
05:50
214
Function ResellToken
04:47
215
Function CreateMarketSale
07:09
216
Fetching NFTs Solidity
12:49
217
Deploying Smart Contract
13:20
218
NFT Context
13:21
219
Connect MetaMask Wallet
10:28
220
Upload Image to IPFS
12:37
221
Create NFTs
26:10
222
Fetching NFTs Next.js
19:12
223
What We_ve Done so far
06:55
224
Listed NFTs Page
16:30
225
My NFTs Page
14:50
226
NFT Details Page
23:31
227
Modal Development
28:25
228
Buy NFTs
19:18
229
Resell NFT
25:51
230
Best Creators Bonus Lecture
23:41
231
SearchBar Development
36:06
232
Reusing the search bar
06:10
233
Small Bug Fixes
15:01
234
Let_s get to Testing
26:03
235
Global NFT Loading
07:38
236
Welcome!
01:30
237
Environment Setup
03:41
238
Visual Studio Code Setup
03:17
239
The Beginning
09:17
240
ESlint Configuration
07:16
241
GitHub Setup
04:19
242
Depedencies
04:41
243
Intro _ Documentation
04:41
244
Component Structure _ Routing
16:15
245
Styling
05:32
246
Commits
03:36
247
Navigation Bar
26:15
248
Sidebar
28:30
249
Redux Setup
28:43
250
Rendering Movies
16:36
251
Finishing Movie View
10:53
252
Movie Categories
07:01
253
Genre Icons
04:01
254
Redux Slice
11:36
255
Switch Genre Functionality
16:26
256
Search Functionality
17:41
257
Authentication
32:52
258
Authentication Solution
02:53
259
Finalizing Authentication
07:39
260
Movie Information Page - Part 1
34:44
261
Movie Information Page - Part 2
23:23
262
Movie Recommendations
10:37
263
Movie Trailer
10:58
264
Actor Page Assignment
03:43
265
Actor Page
20:04
266
Pagination
13:14
267
Small Fix
03:13
268
Responsiveness Adjustments
12:43
269
Favorited and Watchlisted Movies
25:19
270
Dark Mode
10:48
271
Alan AI - Part 1
16:38
272
Alan AI - Part 2
05:19
273
Alan AI - Part 3
20:50
274
Featured Movie Card
15:09
275
Minor Fixes
03:24
276
Deployment
03:24
277
Land Your Dream Dev Job in 6 Months
01:21:28
278
The Ultimate Git, GitHub, and Conflicts Guide
39:55
279
Introduction to Figma for Developers
24:42
280
Learn How to Code More Efficiently
22:35
281
GitHub Profile Guide
40:59
282
LinkedIn Profile Guide
35:14

Unlock unlimited learning

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

Learn more about subscription

Books

Read Book Ultimate Next.js 13 Course + eBook

#Title
1NextJS-Ebook

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
Build A Slack Clone

Build A Slack Clone

Sources: Code With Antonio
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.
15 hours 13 minutes 30 seconds
Build a Youtube Clone

Build a Youtube Clone

Sources: Code With Antonio
In this 24-hour course, you will learn how to create your own YouTube clone using modern technologies. We will go into detail on advanced topics, including...
23 hours 42 minutes 10 seconds
Build a Jira clone

Build a Jira clone

Sources: Code With Antonio
In this 16-hour course, consisting of two parts (by the way, this is my longest course!), you will learn how to create a fully functional Jira clone with a...
16 hours 26 minutes 4 seconds
Next.js Ecommerce

Next.js Ecommerce

Sources: Brad Traversy
The Next.js Ecommerce course is an extensive 22-hour program that teaches you step by step how to create a full-fledged e-commerce platform with...
22 hours 12 minutes 23 seconds