Server side rendering with Next + React

29h 43m 19s
English
Paid

Course description

Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to use it..and why should I?“ to actually understand how Server side with Next + React works and make it communicate with other technologies like Auth0 and Express. You will learn all the logic and practice behind Server side Next + React in different modules and as we advance through the course we will be increasing the difficulty.

Read more about the course

Since I believe that the best way to fully learn is by coding, after the most important section we will put everything in practice with a course project and deploy the app to production.

We will use Next of course, and react to make the front end work.

Don’t know how to use React ?

Don’t worry, there is an optional full min course where we will show you how to use plain React, so once you have a strong base of React you can start with Next Js.

To sum everything up, you will learn in this course:

  • The very basics of Next. How to install and the logic behind it.

  • Create Layouts, using Links and all the power of Initial props.

  • We will understand how CSS, Sass, Less work with Next.

  • How to use routes properly and make it work with React.

  • Everybody is using Redux, so we will learn how to use redux with our Next.

  • Since our app will need a database, you will learn how to use it with MongoDB and mongoose.

  • Apply security, authentication with Auth0, restricting routes,etc.

  • We will create a practice project using React, Redux, Next and MongoDB.

  • Of course, we will learn the whole process of publishing you app using Heroku.

  • If you want to refresh your React abilities you also get a Full React course.

What about the instructor experience ?

Well I've been around for 10 years now, built lots of applications for small projects and big companies like Citi,Fox, Disney and a lot more.

Today I work as developer for a major company developing applications in React or Angular mostly, but I like to teach in my spare time.

How about the target audience?

  • This course is for almost everyone, a little bit of Javascript is required.We will use ES6 but you can learn as we go.

  • If you want to take your coding to the next level, this is the course for you.

Requirements:
  • Know a little bit of javascript, html and CSS
Who this course is for:
  • Beginner to intermediate or anyone who want to learn Next JS

What you'll learn:

  • Use Next JS and React to create server side rendering web applications.

Watch Online

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

Watch Online Server side rendering with Next + React

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Query - Essentials (v2)

React Query - Essentials (v2)

Sources: Tanner Linsley
In this course, you will learn how to wield React Query as your go-to weapon of choice for defeating and overcoming the challenges and hurdles of server state. You will learn to...
2 hours 54 minutes 5 seconds
Magic UI Pro

Magic UI Pro

Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
Build and Deploy a Lovable Clone

Build and Deploy a Lovable Clone

Sources: Code With Antonio
In this course, you will create an AI platform for generating applications from scratch. You will learn how to build fully functional full-stack applications...
10 hours 34 minutes 16 seconds
Master Custom React Hooks with TypeScript

Master Custom React Hooks with TypeScript

Sources: fullstack.io
Welcome to the course "Creating a Custom React Hook npm Package using React and TypeScript"! In this course, we will be developing...
2 hours 21 minutes 3 seconds
The Complete Developers Guide to MongoDB

The Complete Developers Guide to MongoDB

Sources: udemy, Stephen Grider
Master MongoDB and Mongoose design with a test-driven approach. MongoDB is the hottest database solution in the tech world right now, able to power anything from your growing pe...
13 hours 32 minutes 42 seconds