CF

Server side rendering with Next + React

29h 43m 19s
English
Paid
Updated September 2026

Server side rendering with Next + React is a 167-lesson 29 hours 43 minutes self-paced course by Udemy. This course builds server-side rendered React applications with Next.

Course facts

Lessons
167
Duration
29 hours 43 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Udemy
Price
Premium

This course builds server-side rendered React applications with Next.js, starting from the basic question of why Next.js is worth learning at all, and working up through integrations with Auth0 and Express toward a genuinely advanced setup.

What's covered

  • Next.js basics: installation, layouts, routes, and links with initial props
  • Integrating CSS, Sass, and Less, and embedding React effectively within Next.js routing
  • State management with Redux alongside Next.js
  • Database work with MongoDB and Mongoose
  • Securing the app with Auth0 and route restrictions

Learn by doing

An optional mini-course on React basics is included for anyone not yet comfortable with it, and the main course culminates in a full practice project built with React, Redux, Next.js, and MongoDB, deployed end to end using Heroku. The instructor draws on experience building applications for companies including Citi, Fox, and Disney.

Who teaches Server side rendering with Next + React? 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.

What lessons are included in Server side rendering with Next + React?

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

What courses are similar to Server side rendering with Next + React?

More courses by Udemy

Frequently asked questions

What prerequisites are needed for this course?
This course is designed to accommodate students with varying levels of experience. If you are not familiar with React, there is an optional mini-course available that covers the essentials. Familiarity with basic JavaScript and web development concepts is recommended to fully grasp the course content.
What will I build during the course?
The course culminates in a hands-on project where you will build a full application using Next.js and React. You will integrate technologies like Auth0 for security, Express for server-side logic, and deploy your application to production. The project will encompass creating layouts, managing state with Redux, and connecting to a MongoDB database.
Who is the target audience for this course?
This course is ideal for web developers who want to enhance their skills in server-side rendering using Next.js and React. It suits those starting from scratch or developers with some familiarity looking to deepen their understanding of integrating various technologies to build robust applications.
How does this course compare in depth and scope to other courses?
This course offers a comprehensive pathway from basic to advanced concepts in server-side rendering with Next.js and React. Unlike some courses that might focus solely on frontend or backend, this one integrates a range of technologies, including Auth0, Express, Redux, and MongoDB, providing a broader scope of application development.
What specific tools or platforms are covered in the course?
The course covers several key tools and platforms, including Next.js for server-side rendering, React for building user interfaces, Auth0 for authentication, Redux for state management, and MongoDB for database management. Additionally, you'll use Express for server-side logic and tools like Heroku for deploying your application.
What topics are not covered in this course?
While the course covers a wide range of topics related to Next.js, React, and associated technologies, it does not delve into unrelated areas such as other JavaScript frameworks (e.g., Angular, Vue.js) or mobile development. The focus remains on web applications using the specified tools and technologies.
How much time should I expect to commit to this course?
The course consists of 167 lessons, which suggests a significant time commitment. While the exact runtime is unspecified, prospective students should be prepared to invest several weeks to complete the course, depending on their pace and time availability. The hands-on nature and comprehensive project work will require dedicated effort.