Mô tả

Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!

This course comes with two paths which you can take: The "complete" path (full >20h course) and the "summary" path (~3h summary module) - you can choose the path that best fits your time requirements!

---

I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!

Next.js is the production-ready, fullstack-capable framework for ReactJS - the most popular JavaScript library you can learn these days!

Too many buzzwords for your taste?

Fair enough - but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!

Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!

In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It's a breeze with NextJS!

Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.

This course will take you from NextJS beginner to advanced level in no time!

We'll start at the very basics, no NextJS knowledge is required at all, and we'll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

For this course, you'll need basic React knowledge, though the course does come with a "React refresher" module in case it's been some time since you last worked with React.

This course also includes a "NextJS Summary" module which allows you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take that summary module (and skip the rest for now) to learn about all the core features in as little time as possible.

After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!

In detail, this course will cover:

  • What is NextJS? And why would you use it?

  • Why is just React (in many cases) not enough?

  • Creating NextJS projects from the ground up & understanding these projects

  • Working with file-based routing

  • Adding dynamic routes and catch-all routes

  • Implementing different forms of page pre-rendering and server-side rendering

  • Working with data and adding data fetching + pre-fetching to your apps

  • Pre-generating dynamic and static pages

  • Adding optimizations like metadata to pages

  • Optimizing images with the NextJS Image component

  • Building fullstack apps with API routes

  • Managing app-wide state with React context (in NextJS apps)

  • Adding authentication to NextJS apps

  • Multiple complete apps where we'll apply all these core concepts!

  • A complete React.js refresher module (so that we're all on the same page)

  • A NextJS summary module so that you can refresh what you learned or just explore the core features quickly

  • And much more!

I can't wait to start this journey together with you! :)

Bạn sẽ học được gì

Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing and authentication

Learn how to build client-side and fullstack ReactJS apps with NextJS

Build real projects and apply what you learned with hands-on projects and examples

Take the full course or the "NextJS Summary" module for a quickstart if you have limited time

Yêu cầu

  • ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module
  • NO prior NextJS knowledge is required

Nội dung khoá học

23 sections

Getting Started

9 lectures
Welcome To The Course!
01:20
What Is NextJS? Why Would You Use It?
02:20
Key Features & Benefits Of NextJS
02:40
Creating a First NextJS App
04:25
NextJS vs "Just React" - Analyzing The NextJS Project
02:30
Editing The First App
02:21
Pages Router vs App Router - One Framework, Two Approaches
02:29
How To Get The Most Out Of This Course
03:05
Learning Community & Course Resources
00:32

Optional: React Refresher

75 lectures
Using the Code Snasphots
00:07
Module Introduction
01:08
What Is React & Why Would You Use It?
05:37
React Projects - Requirements
02:09
Creating React Projects
03:27
Our Starting Project
03:28
Understanding How React Works
07:46
Building A First Custom Component
11:15
Outputting Dynamic Values
05:03
Reusing Components
06:00
Passing Data to Components with Props
06:15
CSS Styling & CSS Modules
10:07
Exercise & Another Component
06:31
Preparing the App For State Management
03:45
Adding Event Listeners
07:52
Working with State
10:00
Lifting State Up
09:08
The Special "children" Prop
07:21
State & Conditional Content
08:59
Adding a Shared Header & More State Management
07:51
Adding Form Buttons
03:34
Handling Form Submission
06:18
Updating State Based On Previous State
05:30
Outputting List Data
06:38
Adding a Backend to the React SPA
06:10
Sending a POST HTTP Request
04:12
Handling Side Effects with useEffect()
09:06
Handle Loading State
04:23
Understanding & Adding Routing
03:55
Adding Routes
05:36
Working with Layout Routes
04:08
Refactoring Route Components & More Nesting
05:35
Linking & Navigating
08:09
Data Fetching via loader()s
09:07
Submitting Data with action()s
11:07
Dynamic Routes
08:41
Module Summary
01:25
IMPORTANT -- LEGACY CONTENT BELOW
00:21
Module Introduction
01:27
What is ReactJS?
03:48
Why ReactJS & A First Demo
07:25
Building Single-Page Applications (SPAs)
02:00
React Alternatives
03:06
Creating a New React Project
08:15
Setting Up A Code Editor
03:04
React 18
00:53
Diving Into The Created Project
06:31
How React Works & Understanding Components
07:36
More Component Work & Styling With CSS Classes
05:34
Building & Re-using Components
07:19
Passing Data With Props & Dynamic Content
05:17
Handling Events
06:40
Adding More Components
05:40
Introducing State
08:18
Working with "Event Props"
07:07
Use The Right React Router Version
00:12
Adding Routing
16:52
Adding Links & Navigation
05:20
Scoping Component Styles With CSS Modules
05:45
Outputting Lists Of Data & Components
05:49
Adding Even More Components
09:47
Creating "Wrapper" Components
08:39
Working With Forms
08:58
Getting User Input & Handling Form Submission
09:45
Preparing The App For Http Requests & Adding a Backend
06:51
Sending a POST Http Request
05:18
Navigating Programmatically
03:42
Getting Started with Fetching Data
09:25
Using the "useEffect" Hook
10:07
Introducing React Context
11:02
Updating State Based On Previous State
05:54
Using Context In Components
12:10
More Context Usage
06:54
Module Summary
01:00
Module Resources
00:12

NextJS Essentials (App Router)

49 lectures
Module Introduction
01:20
Starting Setup
02:32
Understanding File-based Routing & React Server Components
02:45
Adding Another Route via the File System
03:06
Navigating Between Pages - Wrong & Right Solution
04:12
Working with Pages & Layouts
03:22
Reserved File Names, Custom Components & How To Organize A NextJS Project
06:31
Reserved Filenames
00:46
Configuring Dynamic Routes & Using Route Parameters
06:17
Onwards to the Main Project: The Foodies App
01:24
Exercise: Your Task
02:03
Exercise: Solution
08:19
Revisiting The Concept Of Layouts
03:50
Adding a Custom Component To A Layout
05:58
Styling NextJS Project: Your Options & Using CSS Modules
06:00
Optimizing Images with the NextJS Image Component
04:57
Using More Custom Components
03:48
Populating The Starting Page Content
04:18
Preparing an Image Slideshow
03:25
React Server Components vs Client Components - When To Use What
08:15
Using Client Components Efficiently
11:07
Outputting Meals Data & Images With Unknown Dimensions
10:31
Setting Up A SQLite Database
03:11
Fetching Data By Leveraging NextJS & Fullstack Capabilities
07:17
Adding A Loading Page
04:00
Using Suspense & Streamed Responses For Granular Loading State Management
05:54
Handling Errors
05:22
Handling "Not Found" States
01:57
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
11:03
Throwing Not Found Errors For Individual Meals
02:03
Getting Started with the "Share Meal" Form
01:53
Getting Started with a Custom Image Picker Input Component
08:28
Adding an Image Preview to the Picker
05:59
Improving the Image Picker Component
00:17
Introducing & Using Server Actions for Handling Form Submissions
09:02
Storing Server Actions in Separate Files
03:45
Creating a Slug & Sanitizing User Input for XSS Protection
03:20
Storing Uploaded Images & Storing Data in the Database
12:56
Managing the Form Submission Status with useFormStatus
05:30
Adding Server-Side Input Validation
05:54
Using useFormState()
00:19
Working with Server Action Responses & useFormState
08:05
Building For Production & Understanding NextJS Caching
06:06
Triggering Cache Revalidations
03:57
Don't Store Files Locally On The Filesystem!
02:13
Bonus: Storing Uploaded Images In The Cloud (AWS S3)
06:51
Adding Static Metadata
03:47
Adding Dynamic Metadata
02:20
Module Summary
04:25

Routing & Page Rendering - Deep Dive

22 lectures
Module Introduction
01:37
Project Setup, Overview & An Exercise!
04:17
Exercise Solution - Part 1
07:17
Exercise Solution - Part 2
04:56
App Styling & Using Dummy Data
08:59
Handling "Not Found" Errors & Showing "Not Found" Pages
04:39
Setting Up & Using Parallel Routes
06:40
Working with Parallel Routes & Nested Routes
12:50
Configuring Catch-All Routes
06:01
Catch-All Fallback Routes & Dealing With Multiple Path Segments
09:21
Throwing (Route-related) Errors
03:38
Handling Errors With Error Pages
03:02
Server vs Client Components
10:10
Nested Routes Inside Dynamic Routes
04:56
Intercepting Navigation & Using Interception Routes
05:11
Combining Parallel & Intercepting Routes
07:42
Replace page.js with default.js
00:06
Navigating Programmatically
02:42
Using & Understanding Route Groups
06:39
Building APIs with Route Handlers
05:15
Using Middleware
05:40
Module Summary
00:30

Data Fetching - Deep Dive

8 lectures
Module Introduction
00:56
Adding a Backend
02:46
Option 1: Client-side Data Fetching
08:50
Option 2: Server-side Data Fetching
05:36
Why Use A Separate Backend? Fetching Directly From The Source!
06:14
Showing a "Loading" Fallback
04:50
Migrating An Entire Application To A Local Data Source (Database)
13:19
Granular Data Fetching With Suspense
11:35

Mutating Data - Deep Dive

16 lectures
Module Introduction
01:11
Starting Project & Analyzing Mutation Options
05:46
Setting Up A Form Action
09:19
Creating a Server Action
04:16
Storing Data in Databases
04:39
Providing User Feedback with The useFormStatus Hook
06:04
Using useFormState Hook
00:19
Validating User Input With Help Of The useFormState Hook
09:57
Adjusting Server Actions for useFormState
07:40
Storing Server Actions In Separate Files
03:57
"use server" Does Not Guarantee Server-side Execution!
00:30
Uploading & Storing Images
08:13
Alternative Ways of Using, Configuring & Triggering Server Actions
11:00
Revalidating Data To Avoid Caching Problems
04:45
Performing Optimistic Updates With NextJS
11:42
Caching Differences: Development vs Production
06:13

Understanding & Configuring Caching

12 lectures
Module Introduction
01:09
Making Sense of NextJS' Caching Types
05:13
Project Setup
01:45
Handling Request Memoization
05:31
Understanding The Data Cache & Cache Settings
05:49
Controlling Data Caching
05:27
Making Sense Of The Full Route Cache
04:42
On-Demand Cache Invalidation with revalidatePath & revalidateTag
06:03
Setting Up Request Memoization For Custom Data Sources
07:15
Setting Up Data Caching For Custom Data Sources
03:44
Invalidating Custom Data Source Data
03:32
Module Summary
01:44

NextJS App Optimizations

12 lectures
Module Introduction
03:08
Using the NextJS Image Component
03:43
Understanding the NextJS Image Component
05:15
Controlling the Image Size
04:44
Working with Priority Images & More Settings
03:02
Loading Unknown Images
04:12
Configuring CSS For Images With The "fill" Prop
03:03
Using An Image Loader & Cloudinary Resizing
15:51
Page Metadata - An Introduction
01:04
Configuring Static Page Metadata
02:57
Configuring Dynamic Page Metadata
05:03
Understanding Layout Metadata
01:38

User Authentication

19 lectures
Module Introduction
01:04
Project Setup
03:26
User Signup: Extracting & Validating User Input
14:35
Storing Users in a Database - The Wrong Way
04:30
Hashing Passwords & Storing User Data The Right Way
02:07
Checking for Email Duplication
05:01
Theory: How Does User Authentication Work?
05:21
Choosing a Third-Party Auth Package (Lucia)
02:54
Creating a New Lucia Auth Instance
04:31
Configuring A Session & A Session Cookie
04:51
Setting Up An Auth Session
03:43
Verifying An Active Auth Session
07:15
Protecting Routes Against Unauthenticated Access
03:07
Switching Auth Modes With Query Parameters (Search Params)
05:35
Adding User Login (via a Server Action)
05:34
Triggering Different Server Actions via Query Parameters
03:44
Adding an Auth-only Layout
03:41
One Root Layout vs Multiple Root Layouts
00:41
Adding User Logout
04:10

Roundup & Next Steps

2 lectures
Course Roundup
01:49
But There's More NextJS Content!
03:10

Pages & File-based Routing

19 lectures
From App Router To Pages Router
01:40
Using The Code Snapshots
00:20
Module Introduction
01:12
Our Starting Setup
01:19
What Is "File-based Routing"? And Why Is It Helpful?
05:22
Adding A First Page
04:01
Adding a Named / Static Route File
01:34
Working with Nested Paths & Routes
03:33
Adding Dynamic Paths & Routes
04:54
Extracting Dynamic Path Segment Data (Dynamic Routes)
04:54
Building Nested Dynamic Routes & Paths
07:12
Adding Catch-All Routes
05:44
Navigating with the "Link" Component
05:44
Navigating To Dynamic Routes
03:41
A Different Way Of Setting Link Hrefs
02:55
Navigating Programmatically
03:50
Adding a Custom 404 Page
01:35
Module Summary
05:51
Module Resources
00:12

Project Time: Working with File-based Routing

18 lectures
Module Introduction
02:04
Planning The Project
04:15
Setting Up The Main Pages
07:35
Adding Dummy Data & Static Files
04:46
Adding Regular React Components
07:14
Adding More React Components & Connecting Components
10:22
Styling Components In Next.js Projects
09:28
<Link> & NextJS 13
00:42
Adding Buttons & Icons
08:25
Adding the "Event Detail" Page (Dynamic Route)
08:31
Adding a General Layout Wrapper Component
06:27
Working on the "All Events" Page
02:05
Adding a Filter Form for Filtering Events
08:25
Navigating to the "Filtered Events" Page Progammatically
08:25
Extracting Data on the Catch-All Page
08:54
Final Steps
07:02
Module Summary
01:40
Module Resources
00:12

Page Pre-Rendering & Data Fetching

30 lectures
Module Introduction
02:25
The Problem With Traditional React Apps (and Data Fetching)
05:15
How NextJS Prepares & Pre-renders Pages
05:38
Introducing Static Generation with "getStaticProps"
04:04
NextJS Pre-renders By Default!
03:08
Adding "getStaticProps" To Pages
06:39
Running Server-side Code & Using the Filesystem
07:41
A Look Behind The Scenes
05:20
Utilizing Incremental Static Generation (ISR)
07:22
ISR: A Look Behind The Scenes
03:45
A Closer Look At "getStaticProps" & Configuration Options
04:19
Working With Dynamic Parameters
09:46
Introducing "getStaticPaths" For Dynamic Pages
03:43
Using "getStaticPaths"
03:26
"getStaticPaths" & Link Prefetching: Behind The Scenes
03:59
Working With Fallback Pages
05:27
Loading Paths Dynamically
04:02
Fallback Pages & "Not Found" Pages
05:53
Introducing "getServerSideProps" for Server-side Rendering (SSR)
04:13
Using "getServerSideProps" for Server-side Rendering
04:05
"getServerSideProps" and its Context
04:20
Dynamic Pages & "getServerSideProps"
04:04
"getServerSideProps": Behind The Scenes
03:25
Introducing Client-Side Data Fetching (And When To Use It)
03:40
Implementing Client-Side Data Fetching
14:47
A Note About useSWR
00:15
Using the "useSWR" NextJS Hook
08:58
Combining Pre-Fetching With Client-Side Fetching
08:55
Module Summary
06:45
Module Resources
00:12

Project Time: Page Pre-rendering & Data Fetching

10 lectures
Module Introduction
01:04
Preparations
05:01
Adding Static Site Generation (SSG) On The Home Page
11:02
Loading Data & Paths For Dynamic Pages
09:50
Optimizing Data Fetching
07:47
Working on the "All Events" Page
02:47
Using Server-side Rendering (SSR)
09:52
Adding Client-Side Data Fetching
10:55
Module Summary
01:30
Module Resources
00:11

Optimizing NextJS Apps

13 lectures
Module Introduction
01:19
Analyzing the Need for "head" Metadata
01:49
Configuring the "head" Content
03:41
Adding Dynamic "head" Content
05:17
Reusing Logic Inside A Component
04:22
Working with the "_app.js" File (and Why)
03:03
Merging "head" Content
03:17
The "_document.js" File (And What It Does)
05:31
A Closer Look At Our Images
01:59
Optimizing Images with the "Next Image" Component & Feature
08:37
Taking A Look At The "Next Image" Documentation
00:51
Module Summary
01:16
Module Resources
00:11

Adding Backend Code with API Routes (Fullstack React)

12 lectures
Module Introduction
00:50
What are "API Routes"?
05:37
Writing Our First API Route
08:24
Preparing the Frontend Form
06:29
Parsing The Incoming Request & Executing Server-side Code
10:16
Sending Requests To API Routes
05:43
Using API Routes To Get Data
07:56
Using API Routes For Pre-Rendering Pages
08:04
Creating & Using Dynamic API Routes
13:41
Exploring Different Ways Of Structuring API Route Files
05:09
Module Summary
01:44
Module Resources
00:12

Project Time: API Routes

15 lectures
Module Introduction
01:31
Starting Setup & A Challenge For You!
05:15
Adding a Newsletter Route
11:10
Adding Comments API Routes
08:43
Connecting the Frontend To the Comments API Routes
10:59
Setting Up A MongoDB Database
05:42
Running MongoDB Queries From Inside API Routes
09:14
Inserting Comments Into The Database
06:26
Getting Data From The Database
04:31
Adding Error Handling
07:33
More Error Handling
10:47
A Final Note On MongoDB Connections
00:17
Module Summary
01:45
Improvement: Getting Comments For A Specific Event
00:53
Module Resources
00:12

Working with App-wide State (React Context)

10 lectures
Module Introduction
01:27
Our Target State & Starting Project
04:32
Creating a New React Context
05:37
Adding Context State
03:49
Using Context Data In Components
04:37
Example: Triggering & Showing Notifications
06:35
Example: Removing Notifications (Automatically)
06:31
Challenge Solution
07:22
Module Summary
01:09
Module Resources
00:12

Complete App Example: Build a Full Blog A to Z

29 lectures
Module Introduction
02:59
Setting Up The Core Pages
05:10
Getting Started With The Home Page
05:29
Adding The "Hero" Component
08:47
Adding Layout & Navigation
08:45
Time To Add Styling & A Logo
03:18
Starting Work On The "Featured Posts" Part
05:47
Adding A Post Grid & Post Items
09:40
Rendering Dummy Post Data
12:25
Adding the "All Posts" Page
03:59
Working On The "Post Detail" Page
10:10
Rendering Markdown As JSX
02:30
Adding Markdown Files As A Data Source
07:32
Adding Functions To Read & Fetch Data From Markdown Files
13:40
Using Markdown Data For Rendering Posts
08:19
Rendering Dynamic Post Pages & Paths
11:42
Rendering Custom HTML Elements with React Markdown
00:28
Rendering Images With The "Next Image" Component (From Markdown)
12:46
Rendering Code Snippets From Markdown
06:29
Preparing The Contact Form
04:18
Adding The Contact API Route
04:26
Sending Data From The Client To The API Route
07:26
Storing Messages With MongoDB In A Database
08:52
Adding UI Feedback With Notifications
15:05
Adding "head" Data
06:52
Adding A "_document.js" File
02:55
Using React Portals
03:45
Module Summary
01:24
Module Resources
00:12

Deploying NextJS Apps

11 lectures
Module Introduction
01:17
Building NextJS Apps: Your Options
08:05
Key Deployment Steps
03:06
Checking & Optimizing Our Code
03:11
The NextJS Config File & Working With Environment Variables
14:25
Running a Test Build & Reducing Code Size
07:21
A Full Deployment Example (To Vercel)
17:40
A Note On Github & Secret Credentials
01:57
Using the "export" Feature
02:16
Module Summary
00:38
Module Resources
00:13

Adding Authentication

22 lectures
Module Introduction
01:16
Our Starting Project
01:45
How Does Authentication Work (In React & NextJS Apps)?
14:23
Must Read: Install the Right next-auth Version
00:20
Using The "next-auth" Library
03:04
Adding A User Signup API Route
12:59
Sending Signup Requests From The Frontend
09:41
Improving Signup With Unique Email Addresses
03:00
Adding the "Credentials Auth Provider" & User Login Logic
14:08
Sending a "Signin" Request From The Frontend
06:52
Managing Active Session (On The Frontend)
05:57
Adding User Logout
02:18
Adding Client-Side Page Guards (Route Protection)
07:50
Adding Server-Side Page Guards (And When To Use Which Approach)
07:41
Protecting the "Auth" Page
05:46
Using the "next-auth" Session Provider Component
05:14
Analyzing Further Authentication Requirements
03:42
Protecting API Routes
06:37
Adding the "Change Password" Logic
10:36
Sending a "Change Password" Request From The Frontend
09:16
Module Summary & Final Steps
03:29
Module Resources
00:12

Optional: NextJS Summary

36 lectures
Module Introduction
03:03
What is NextJS?
04:45
Key Feature: Server-side (Pre-) Rendering of Pages
06:38
Key Feature: File-based Routing
03:13
Key Feature: Build Fullstack Apps With Ease
01:50
Creating a NextJS Project & IDE Setup
06:14
About the "App Router"
02:47
Analyzing the Created Project
02:52
Adding First Pages To The Project
06:05
Adding Nested Pages / Paths
03:47
Creating Dynamic Pages
03:36
Extracting Dynamic Route Data
04:07
Linking Between Pages
07:13
Onwards To A Bigger Project!
03:32
Preparing Our Project Pages
03:42
Rendering A List Of (Dummy) Meetups
05:03
Adding A Form For Adding Meetups
03:54
The "_app.js" File & Wrapper Components
06:17
Programmatic Navigation
03:47
Adding Custom Components & Styling With CSS Modules
10:00
How NextJS Page Pre-Rendering Actually Works
05:52
Introducing Data Fetching For Page Generation (getStaticProps)
08:56
More Static Site Generation (SSG) With getStaticProps
05:44
Exploring getServerSideProps
06:27
Working With Dynamic Path Params In getStaticProps
05:14
Dynamic Pages & getStaticProps & getStaticPaths
07:16
Introducing API Routes
06:20
Connecting & Querying a MongoDB Database
09:32
Sending HTTP Requests To API Routes
06:49
Getting Data From The Database (For Page Pre-Rendering)
07:09
Getting Meetup Detail Data & Paths
09:41
Adding "head" Metadata To Pages
09:19
Deploying NextJS Projects
12:26
Working With Fallback Pages & Re-Deploying
04:13
Module Summary
02:11
Module Resources
00:13

Course Roundup

2 lectures
Course Roundup
00:55
Bonus!
00:33

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.