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
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

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