CourseFlix

Server side rendering with Next + React

29h 43m 19s
English
Paid

Unlock the full potential of server-side rendering by mastering the art of building robust applications with Next.js and React. Whether you're starting from scratch, wondering, "Why should I even use this?", or already have some familiarity, this course will guide you through integrating Next.js with technologies like Auth0 and Express. We will gradually escalate the complexity, moving from foundational concepts to advanced implementations.

Why Choose This Course?

Learn by doing. This is our motto. After exploring crucial sections, you will apply your knowledge with a hands-on project, culminating in deploying your app to production. We will utilize Next.js and React to empower the frontend, ensuring a comprehensive learning experience.

Not Familiar with React?

Fret not. We offer an optional mini-course dedicated to teaching the essentials of React, preparing you to seamlessly transition to Next.js and harness its full capabilities.

Curriculum Overview

This course provides a structured learning path, including:

  • Next.js Basics: Grasp the installation process and core principles.
  • Creating Layouts, Routes, and Links with Initial Props.
  • Integrating CSS, Sass, and Less into your Next.js projects.
  • Mastering routing and embedding React effectively.
  • Implementing Redux alongside Next.js.
  • Database management with MongoDB and Mongoose.
  • Securing applications using Auth0, route restrictions, and more.
  • Constructing a full practice project leveraging React, Redux, Next.js, and MongoDB.
  • End-to-end publishing guide using Heroku.
  • Reinforce React skills with a complementary full React course.

About the Instructor

With over 10 years of experience developing applications for renowned companies like Citi, Fox, and Disney, I now dedicate my expertise to crafting in-depth learning experiences. Currently, I work as a developer focusing on React and Angular applications, while sharing my knowledge through teaching.

Who Should Enroll?

  • Anyone with basic knowledge of JavaScript, HTML, and CSS. (ES6 concepts introduced along the way)
  • Aspiring developers eager to elevate their coding proficiency.
Prerequisites:
  • Basic understanding of JavaScript, HTML, and CSS.
Ideal for:
  • Beginner to intermediate developers, and anyone passionate about learning Next.js.

Learning Outcomes:

  • Develop server-side rendering web applications using Next.js and React.

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 167 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction
All Course Lessons (167)
#Lesson TitleDurationAccess
1
Introduction Demo
01:35
2
Installing Node js
02:11
3
Visual studio code ( IDE )
02:47
4
Creating a NEXT project
09:58
5
Pages and links
09:20
6
Importing components
06:27
7
Creating layouts
06:37
8
Get Initial props
14:53
9
Get initial props, async await
03:56
10
Accessing the context
06:07
11
Working with styles
14:09
12
Sass, less, styles and css imports
09:28
13
Making the app look better
07:09
14
Query params
15:07
15
Params
08:23
16
Server side support
18:25
17
The WithRouter
08:58
18
Router
11:55
19
Router events
07:13
20
The _app
10:16
21
Installing dependencies
13:33
22
Setting a session
27:51
23
Checking auth
18:49
24
validating on the server and the client
16:57
25
Passing auth props
12:51
26
Preventing routes
13:45
27
Preventing routes ...continued
06:50
28
A better Auth ( optional )
11:45
29
A better Auth ..continued ( optional )
11:50
30
Dynamic headers / data
09:49
31
Api routes
08:48
32
Middleware examples
06:52
33
Creating the Auth middleware
12:35
34
Accessing API from the client
12:17
35
Installing redux
17:28
36
Creating a store
17:59
37
Dispatching an action
09:56
38
The initial state
07:56
39
Connecting to MONGO
17:39
40
Using a .DOTENV
15:26
41
Creating a schema and model
14:15
42
Using Nodemon
06:53
43
Get - Delete - Patch
16:19
44
Creating a form
18:14
45
Creating a form 2
18:06
46
Posting a user
03:56
47
A bit of SEO
14:08
48
Global config variables
14:46
49
Setting up Heroku and Aut0
08:43
50
Deploying
15:23
51
Solving mongo and logout
07:22
52
Compression
04:52
53
Installing NEXT and Redux
06:39
54
Preparing Redux
14:09
55
Creating a layout
13:18
56
Adding a header
07:00
57
Home markup
13:27
58
About us markup
06:38
59
Contact markup
20:15
60
Linking pizzas
08:43
61
Creating a server
07:06
62
Nodemon and dynamic routes
08:24
63
Connecting to MONGO DB
07:28
64
Creating models
09:05
65
Posting pizzas
08:23
66
Showing home pizzas
16:21
67
The pizza component
10:13
68
Global site information
10:23
69
Posting messages
12:07
70
Posting messages 2
09:27
71
Enviroment variables
06:56
72
Installing Auth0
16:12
73
Storing tokens
13:48
74
Verify user token - Client
16:29
75
Verify user token - Server
10:58
76
Preventing routes
08:45
77
Creating admin layouts
10:38
78
The Site form
11:54
79
Dispatching site actions
17:23
80
Posting site changes
07:37
81
Getting the messages
12:50
82
Messages markup
05:21
83
Deleting messages
14:35
84
Robots, urls and ports
09:38
85
Meta tags
04:15
86
Preparing heroku, mongo and auth0 for deploy
06:02
87
Deploying and debugging
09:05
88
Installing Node and using the CLI
11:58
89
The bundle
05:58
90
Starting with the code
09:07
91
JSX Behind the scenes
09:10
92
Importing components
08:26
93
Types of components
05:31
94
Adding styles
10:20
95
Events
11:40
96
The STATE
15:05
97
Using props
10:46
98
Using props 2
14:04
99
Props to a class
06:02
100
React children
03:43
101
More with styles
06:59
102
Style plugins
06:35
103
Filter the news
15:04
104
Installing routes
05:38
105
How it works and creating components
07:21
106
Using routes
06:28
107
Linking
10:53
108
Working with Params
06:50
109
Other features with react routes
07:19
110
Switch
03:51
111
Redirections
06:55
112
404 and the WithRouter
09:57
113
Getting ready
11:15
114
Adding header and banner
15:57
115
Bringing the HOME list
10:42
116
Creating the artist detailed view
18:42
117
Component Lifecycles
07:22
118
Component Lifecycles 2
19:27
119
Conditional rendering
10:24
120
Pure components
08:30
121
Adjacent elements
05:44
122
HOC''s
08:48
123
HOC''s Continued
13:37
124
Using transitions
17:29
125
Using transitions 2
08:56
126
CSS Transitions
11:51
127
Transitions Group
15:44
128
Proptypes
10:23
129
Proptypes 2
08:28
130
Controlled components
07:59
131
Installation and setup
08:49
132
Setting routes, footer and header
09:30
133
Adding the slider
20:05
134
Adding subscriptions
19:36
135
Adding subscriptions 2
10:08
136
Adding home blocks
13:26
137
Adding a poll
14:59
138
Finishing the poll
06:13
139
Adding the teams section
14:43
140
Finishing the teams section
08:55
141
Creating the team view
13:27
142
Redux introduction
08:37
143
Creating a store
07:54
144
The redux flow
05:56
145
Combining reducers
06:35
146
Creating a valid reducer
07:32
147
Creating an action
04:44
148
MapStateToProps and Connect
12:44
149
MapDispatchToProps
05:48
150
Working with Types
07:58
151
MIddleware
07:45
152
Installing
06:59
153
Adding redux
14:10
154
Geting home data
16:46
155
Latest news component
07:06
156
Other news section
08:57
157
Articles page
16:06
158
Adding likes component
12:33
159
Finishing the likes
08:59
160
Clearing data
04:46
161
Introduction to hooks
01:50
162
UseState
13:54
163
UseState 2
13:51
164
UseEffect
16:43
165
UseReducer
12:28
166
Preparing the app for the context
10:00
167
Context and UseContext
15:30
Unlock unlimited learning

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

Learn more about subscription

Course content

167 lessons · 29h 43m 19s
Show all 167 lessons
  1. 1 Introduction 01:35
  2. 2 Installing Node js 02:11
  3. 3 Visual studio code ( IDE ) 02:47
  4. 4 Creating a NEXT project 09:58
  5. 5 Pages and links 09:20
  6. 6 Importing components 06:27
  7. 7 Creating layouts 06:37
  8. 8 Get Initial props 14:53
  9. 9 Get initial props, async await 03:56
  10. 10 Accessing the context 06:07
  11. 11 Working with styles 14:09
  12. 12 Sass, less, styles and css imports 09:28
  13. 13 Making the app look better 07:09
  14. 14 Query params 15:07
  15. 15 Params 08:23
  16. 16 Server side support 18:25
  17. 17 The WithRouter 08:58
  18. 18 Router 11:55
  19. 19 Router events 07:13
  20. 20 The _app 10:16
  21. 21 Installing dependencies 13:33
  22. 22 Setting a session 27:51
  23. 23 Checking auth 18:49
  24. 24 validating on the server and the client 16:57
  25. 25 Passing auth props 12:51
  26. 26 Preventing routes 13:45
  27. 27 Preventing routes ...continued 06:50
  28. 28 A better Auth ( optional ) 11:45
  29. 29 A better Auth ..continued ( optional ) 11:50
  30. 30 Dynamic headers / data 09:49
  31. 31 Api routes 08:48
  32. 32 Middleware examples 06:52
  33. 33 Creating the Auth middleware 12:35
  34. 34 Accessing API from the client 12:17
  35. 35 Installing redux 17:28
  36. 36 Creating a store 17:59
  37. 37 Dispatching an action 09:56
  38. 38 The initial state 07:56
  39. 39 Connecting to MONGO 17:39
  40. 40 Using a .DOTENV 15:26
  41. 41 Creating a schema and model 14:15
  42. 42 Using Nodemon 06:53
  43. 43 Get - Delete - Patch 16:19
  44. 44 Creating a form 18:14
  45. 45 Creating a form 2 18:06
  46. 46 Posting a user 03:56
  47. 47 A bit of SEO 14:08
  48. 48 Global config variables 14:46
  49. 49 Setting up Heroku and Aut0 08:43
  50. 50 Deploying 15:23
  51. 51 Solving mongo and logout 07:22
  52. 52 Compression 04:52
  53. 53 Installing NEXT and Redux 06:39
  54. 54 Preparing Redux 14:09
  55. 55 Creating a layout 13:18
  56. 56 Adding a header 07:00
  57. 57 Home markup 13:27
  58. 58 About us markup 06:38
  59. 59 Contact markup 20:15
  60. 60 Linking pizzas 08:43
  61. 61 Creating a server 07:06
  62. 62 Nodemon and dynamic routes 08:24
  63. 63 Connecting to MONGO DB 07:28
  64. 64 Creating models 09:05
  65. 65 Posting pizzas 08:23
  66. 66 Showing home pizzas 16:21
  67. 67 The pizza component 10:13
  68. 68 Global site information 10:23
  69. 69 Posting messages 12:07
  70. 70 Posting messages 2 09:27
  71. 71 Enviroment variables 06:56
  72. 72 Installing Auth0 16:12
  73. 73 Storing tokens 13:48
  74. 74 Verify user token - Client 16:29
  75. 75 Verify user token - Server 10:58
  76. 76 Preventing routes 08:45
  77. 77 Creating admin layouts 10:38
  78. 78 The Site form 11:54
  79. 79 Dispatching site actions 17:23
  80. 80 Posting site changes 07:37
  81. 81 Getting the messages 12:50
  82. 82 Messages markup 05:21
  83. 83 Deleting messages 14:35
  84. 84 Robots, urls and ports 09:38
  85. 85 Meta tags 04:15
  86. 86 Preparing heroku, mongo and auth0 for deploy 06:02
  87. 87 Deploying and debugging 09:05
  88. 88 Installing Node and using the CLI 11:58
  89. 89 The bundle 05:58
  90. 90 Starting with the code 09:07
  91. 91 JSX Behind the scenes 09:10
  92. 92 Importing components 08:26
  93. 93 Types of components 05:31
  94. 94 Adding styles 10:20
  95. 95 Events 11:40
  96. 96 The STATE 15:05
  97. 97 Using props 10:46
  98. 98 Using props 2 14:04
  99. 99 Props to a class 06:02
  100. 100 React children 03:43
  101. 101 More with styles 06:59
  102. 102 Style plugins 06:35
  103. 103 Filter the news 15:04
  104. 104 Installing routes 05:38
  105. 105 How it works and creating components 07:21
  106. 106 Using routes 06:28
  107. 107 Linking 10:53
  108. 108 Working with Params 06:50
  109. 109 Other features with react routes 07:19
  110. 110 Switch 03:51
  111. 111 Redirections 06:55
  112. 112 404 and the WithRouter 09:57
  113. 113 Getting ready 11:15
  114. 114 Adding header and banner 15:57
  115. 115 Bringing the HOME list 10:42
  116. 116 Creating the artist detailed view 18:42
  117. 117 Component Lifecycles 07:22
  118. 118 Component Lifecycles 2 19:27
  119. 119 Conditional rendering 10:24
  120. 120 Pure components 08:30
  121. 121 Adjacent elements 05:44
  122. 122 HOC''s 08:48
  123. 123 HOC''s Continued 13:37
  124. 124 Using transitions 17:29
  125. 125 Using transitions 2 08:56
  126. 126 CSS Transitions 11:51
  127. 127 Transitions Group 15:44
  128. 128 Proptypes 10:23
  129. 129 Proptypes 2 08:28
  130. 130 Controlled components 07:59
  131. 131 Installation and setup 08:49
  132. 132 Setting routes, footer and header 09:30
  133. 133 Adding the slider 20:05
  134. 134 Adding subscriptions 19:36
  135. 135 Adding subscriptions 2 10:08
  136. 136 Adding home blocks 13:26
  137. 137 Adding a poll 14:59
  138. 138 Finishing the poll 06:13
  139. 139 Adding the teams section 14:43
  140. 140 Finishing the teams section 08:55
  141. 141 Creating the team view 13:27
  142. 142 Redux introduction 08:37
  143. 143 Creating a store 07:54
  144. 144 The redux flow 05:56
  145. 145 Combining reducers 06:35
  146. 146 Creating a valid reducer 07:32
  147. 147 Creating an action 04:44
  148. 148 MapStateToProps and Connect 12:44
  149. 149 MapDispatchToProps 05:48
  150. 150 Working with Types 07:58
  151. 151 MIddleware 07:45
  152. 152 Installing 06:59
  153. 153 Adding redux 14:10
  154. 154 Geting home data 16:46
  155. 155 Latest news component 07:06
  156. 156 Other news section 08:57
  157. 157 Articles page 16:06
  158. 158 Adding likes component 12:33
  159. 159 Finishing the likes 08:59
  160. 160 Clearing data 04:46
  161. 161 Introduction to hooks 01:50
  162. 162 UseState 13:54
  163. 163 UseState 2 13:51
  164. 164 UseEffect 16:43
  165. 165 UseReducer 12:28
  166. 166 Preparing the app for the context 10:00
  167. 167 Context and UseContext 15:30

Related courses

  • Full-Stack Project with Claude Code thumbnail

    Full-Stack Project with Claude Code

    By: Mckay Wrigley
    You build a small FigJam‑style app step by step in this workshop. You use Claude Code, Opus 4, Cursor IDE, and the McKay App Template.
    1 hour 12 minutes 14 seconds 5 / 5
  • Build Your SaaS AI Web Platform From Zero to Production thumbnail

    Build Your SaaS AI Web Platform From Zero to Production

    By: Code4Startup
    Discover the new trend in the world of startups and indie hackers - the creation of microservice AI-SaaS products that not only meet market needs but also.
    8 hours 36 minutes 2 seconds 5 / 5
  • Project React. Build a complex React project as a total beginner thumbnail

    Project React. Build a complex React project as a total beginner

    By: Cosden Solutions
    Project React is a course featuring a unique application that will guide you step by step in creating large and complex applications using React. No prior exper
    16 hours 31 minutes 5 seconds 5 / 5

Frequently asked questions

What is Server side rendering with Next + React about?
Unlock the full potential of server-side rendering by mastering the art of building robust applications with Next.js and React. Whether you're starting from scratch, wondering, "Why should I even use this?" , or already have some…
Who teaches Server side rendering with Next + React?
Server side rendering with Next + React is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Server side rendering with Next + React?
Server side rendering with Next + React contains 167 lessons with a total runtime of 29 hours 43 minutes. All lessons are available to watch online at your own pace.
Is Server side rendering with Next + React free to watch?
Server side rendering with Next + React is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Server side rendering with Next + React online?
Server side rendering with Next + React is available to watch online on CourseFlix at https://courseflix.net/course/server-side-rendering-with-next-react. The page hosts every lesson with the integrated video player; no download is required.