Server side rendering with Next + React

29h 43m 19s
English
Paid
November 20, 2023

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.

More

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 Server side rendering with Next + React

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Similar courses to Server side rendering with Next + React

Stripe Payments JavaScript Course

Stripe Payments JavaScript Coursefireship.io

Duration 1 hour 29 minutes 26 seconds
Full-Stack React with GraphQL and Apollo Boost

Full-Stack React with GraphQL and Apollo Boostudemy

Duration 6 hours 54 minutes 31 seconds
React Summit 2024 - Amsterdam

React Summit 2024 - Amsterdamreactsummit.com

Duration 18 hours 56 minutes 36 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2Kent C. Dodds

Duration 26 hours 51 minutes 3 seconds
Mastering Maintainable React

Mastering Maintainable Reactudemy

Duration 7 hours 8 minutes 52 seconds
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Duration 11 hours 38 minutes 42 seconds
Master Spring Boot 3 & Spring Framework 6 with Java

Master Spring Boot 3 & Spring Framework 6 with Javaudemy

Duration 37 hours 34 minutes 14 seconds
Build a Google Docs Clone

Build a Google Docs CloneCode With Antonio

Duration 10 hours 26 seconds
Discord Clone - Learn MERN Stack with WebRTC and SocketIO