Mô tả

Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, feature-rich web applications that stand out in the modern digital landscape.

NextJS is the key to unlocking the full potential of server-rendered React applications, combining the best of web development into one powerful, developer-friendly framework. This comprehensive course takes you on a deep dive into advanced NextJS features that can set you apart in the job market, equipping you to tackle real-world projects with confidence. By exploring the intricacies of authentication with the Next-Auth library, the innovative approach to data mutations using server actions, and the foundational concepts of server and client components, you'll be well on your way to mastering modern web development.

With the tech industry looking for skilled professionals, mastering Next puts you at the forefront of opportunity, with a skill set that's in high demand. Whether you're eyeing a new career as a software engineer or aiming to enhance your existing projects, there's never been a better time to delve into Next.


What will you achieve?


Through an extensive collection of video lectures complemented by detailed diagrams and real-world examples, this course ensures a thorough understanding of Next's capabilities, no pre-existing knowledge of the framework necessary. I've crafted a learning experience that's both rigorous and encouraging, with layers of knowledge built one at a time and ample dialogue to contextualize each feature of Next.

I proudly offer the most detailed journey through Next available online. No stone is left unturned in this resource-packed adventure.


Prepare to conquer a diverse array of topics, including:

  • Implementing user authentication flows with next-auth, for secure and scalable user management

  • Effectively structuring server actions to handle data mutations

  • Dissecting the theory of server vs client components, and knowing how to leverage each for maximum efficiency

  • Mastering data validation techniques to ensure the reliability and integrity of user input

  • Navigating Next's sophisticated caching systems to deliver lightning-fast content performance

  • Recognizing the critical differences between development and production environments and preparing your applications for successful deployment

  • Tailoring Server-Side Rendering (SSR) and Static Site Generation (SSG) to your application's needs

  • Utilizing Incremental Static Regeneration (ISR) for the best of SSR and SSG

  • Enriching user interfaces with TailwindCSS support for styling components

  • Optimizing images on-the-fly with Next's Image component for better performance and user experience

  • Deploying your Next applications with Vercel and other hosting platforms with ease

  • Leveraging TypeScript with Next for robust, type-safe applications

With each new topic, you’ll gain knowledge, proficiency, and the assurance to apply what you’ve learned to practical scenarios.

Embrace the opportunity to define the future of web development with your newly acquired NextJS expertise. Join the ranks of developers who not only follow best practices but also contribute to them. Sign up now and transform your understanding and execution of modern web development with Next.

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

Make incredibly performant web apps using Next JS

Understand the differences between running Next JS in development and production environments

Utilize four different caching systems to speed up request response times

Use the latest React tech with Server Components to build streaming interfaces

Implement robust and secure user authentication with the Next Auth library

Build complicated routing structure by using route interception and parallel routing

Automatically update and refresh data with the use of Server Actions with Revalidation

Optimize image fetching and loading through the use of Next's Image component

Add robust form validation and handling by implementing React's new useFormState hook

Yêu cầu

  • Basic knowledge of React and Typescript is helpful, but refresher sections on these topics are included

Nội dung khoá học

13 sections

Get Started Here!

16 lectures
How to Learn NextJS Quickly
03:58
Project Overview
03:31
File-Based Routing
06:43
Adding Additional Routes
03:47
Linking Between Pages
03:03
Common UI in Next JS with Layouts
05:42
Project Structure Strategy
03:39
Absolute Path Import Shortcut
02:15
Image Files + Import Update
00:31
Adding Images in Next JS
06:11
More on the Image Component
08:30
Adding a Reusable Presentation Component
07:29
Adding Some Styling
05:33
Production Deployment with Vercel
04:46
Join Our Community!
00:07
Course Diagrams
00:09

Changing Data with Mutations

5 lectures
App Overview
01:31
Project Setup
03:50
Adding a Create Page
02:15
Creating a Prisma Client within Next.js
02:14
Adding a Creation Form
05:51

Streaming Content with React Server Components

14 lectures
Introducing Server Actions in Next.js
10:37
A Deeper Dive into Server Actions
02:48
Server Components vs Client Components
08:50
Fetching Data with Server Components
03:51
Adding Dynamic Paths
04:56
Fetching Particular Records
05:06
Custom Not Found Pages
05:07
Automatic Loading Spinnners
03:00
A Few Quick Tasks
06:25
Styling the Show Page
02:56
Linking to the Edit Page
03:28
Showing a Client Component in a Server Component
09:53
Adding the Monaco Editor
05:03
Handling Editor Changes
03:21

Server Actions in Great Detail

5 lectures
Server Actions in Nextjs Client Components
05:43
Server Actions in a Separate File
03:36
Options for Calling Server Actions from Client Components
07:33
Calling a Server Action from a Client Component
04:59
Deleting a Record with a Server Action
03:26

Server Forms with the UseFormState Hook

4 lectures
Understanding the UseFormState Hook
07:10
UseForm State in Action
06:53
Adding the Form Validation
03:35
Gotchas Around Error Handling in Nextjs
09:48

Understanding Next's Caching System

7 lectures
Super Unexpected Behavior
02:16
The Full Route Cache System
04:02
What Makes a Static or Dynamic Route in Next.js
05:10
When to Use Each Cache Control
05:17
Help, My Page is Showing Old Data!
04:06
Enabling Caching with GenerateStaticParams
02:37
Caching Dynamic Routes
06:18

Authentication with Next-Auth

32 lectures
Next 14.2 Issues and Required Version
00:15
Project Overview
03:35
Critical Libraries in Our Project
02:50
NextUI Installation and Setup
06:58
Prisma Schema File
00:06
Database Setup
04:50
OAuth Setup
05:48
Next-Auth Setup
08:16
The Theory Behind OAuth
08:12
Wrapping Auth in Server Actions
03:04
Sign In, Sign out, and Checking Auth Status
12:10
Upfront Design Process
06:51
Why Path Helpers?
03:49
Path Helper Implementation
03:34
Creating the Routing Structure
03:21
Stubbing Out Server Actions
06:02
Planning Revalidating Strategies
07:17
Building the Header
08:13
Displaying the Sign In and Sign Out Buttons
05:03
Enabling Sign Out
05:53
More Caching Issues
06:15
Static Caching While Using Auth
08:52
Creating Topics
05:14
Creating a Popover Form
05:07
Receiving Form Data
02:58
Adding Form Validation with Zod
09:07
Reminder on the UseFormState Hook
02:39
Fixing UseFormState Type Errors
05:15
Here's Our FormState Type
04:55
Displaying Validation Errors
02:44
Handling General Form Errors
06:05
Handling Database Errors in Forms
09:13

Using Data - Database Queries

19 lectures
Showing Loading Spinners with UseFormStatus
07:05
Fetching and Listing Content from Prisma
06:30
Scaffolding the Topic Show Page
03:03
Displaying a Creation Form
06:08
Applying Validation to Post Creation
09:17
Checking Authentication Status
02:47
Passing Additional Args to a Server Action
09:22
Creating the Record
04:58
A Few Project Files
00:06
Merging a Few Files
04:15
Considerations Around Where to Fetch Data
10:56
Data Fetching in Child Components
11:38
Recommended Data Fetching
04:26
Define in Parent, Fetch in Child
08:38
Alternative Type Names and Query Definitions
03:55
Don't Go Crazy With Reuse
04:51
Comment Creation
01:12
Recursively Rendering Components
04:50
Fetching the Big List
09:42

Caching with Request Memoization

4 lectures
Multiple Repeated DB Queries
02:11
Introducing Duplicate Queries
04:51
Request Memoization
04:10
Deduplicating Requests with Cache
02:25

Implementing Search Functionality

12 lectures
Adding in Component Streaming
04:22
Streaming with Suspense
03:19
Adding a Loading Skeleton
03:44
Top Posts on the HomePage
04:27
Back to the Search Input
01:51
Notes on QueryStrings in Next
06:21
Accessing the Query String
02:18
Redirecting From a Server Action
03:26
Receiving the Query String in a Server Component
02:34
Running the Search
04:40
The De-Opt to Client Side Rendering Warning
02:51
Wrap Up!
02:40

Supplement - React Primer

33 lectures
A Note About the Following Lectures
00:12
Let's Build an App!
07:56
Critical Questions
05:49
A Few More Critical Questions
08:51
Node Setup
01:58
Creating a React Project
02:38
What is Create React App
05:50
Showing Basic Content
06:41
What is JSX?
05:48
Printing JavaScript Variables in JSX
04:29
Shorthand JSX Expressions
01:51
Typical Component Layouts
01:58
Customizing Elements with Props
07:36
Converting HTML to JSX
05:07
Applying Styling in JSX
06:13
Extracting Components
04:26
Module Systems Overview
16:05
Cheatsheet for JSX
00:05
Project Overview
05:37
Creating Core Components
05:00
Introducing the Props Systems
04:51
Picturing the Movement of Data
06:06
Adding Props
03:04
Using Argument Destructuring
04:57
React Developer Tools
02:37
Most Common Props Mistake
04:42
Images for the App
00:06
Including Images
08:09
Handling Image Accessibility
06:39
Review on How CSS Works
06:10
Adding CSS Libraries with NPM
05:57
A Big Pile of HTML!
09:38
Last Bit of Styling
05:45

Supplement - TypeScript Primer

41 lectures
A Note About the Following Lectures
00:05
TypeScript Overview
06:19
Environment Setup
07:59
A First App
04:43
Executing TypeScript Code
05:03
One Quick Change
03:35
Catching Errors with TypeScript
07:22
Catching More Errors!
05:15
Types
05:12
More on Types
05:53
Examples of Types
04:48
Where Do We Use Types
00:49
Type Annotations and Inference
02:03
Annotations with Variables
04:53
Object Literal Annotations
06:53
Annotations Around Functions
05:55
Understanding Inference
03:51
The "Any" Type
07:47
Fixing the "Any" Type
01:49
Delayed Initialization
03:05
When Inference Doesn't Work
04:37
More on Annotations Around Functions
04:56
Inference Around Functions
06:08
Annotations for Anonymous Functions
01:42
Void and Never
02:49
Destructuring with Annotations
03:35
Annotations Around Objects
07:05
Arrays in TypeScript
05:05
Why Typed Arrays?
04:30
Multiple Types in Arrays
02:57
When to Use Typed Arrays
00:54
Tuples in TypeScript
04:04
Tuples in Action
05:28
Why Tuples?
03:20
Interfaces
01:26
Long Type Annotations
04:42
Fixing Annotations with Interfaces
04:36
Syntax Around Interfaces
03:31
Functions in Interfaces
04:46
Code Reuse with Interfaces
04:15
General Plan with Interfaces
03:12

Bonus!

1 lectures
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.