Read more
2Month/20 Hours Price:45,000
40,000
Next.js & React – The Complete Guide
Join this bestselling Next.JS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & Next.JS! This course will take you from Next.JS beginner to advanced level in no time! 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 .After finishing this course, you’ll be well prepared to build your own Next.JS projects from the ground up and apply for Next.JS positions!
Course Key Learnings
Learn all key Next.JS features like pre-rendering, SSR, data fetching, file-based routing and authenticationLearn how to build client-side and full stack React.JS apps with Next.JS
Build real projects and apply what you learned with hands-on projects and examples
Take the full course or the “Next.JS Summary” module for a quick start if you have limited time
Course Outline
React Refresher
Module Introduction
What is React.JS?
Why React.JS & A First Demo
Building Single-Page Applications (SPAs)
React Alternatives
Creating a New React Project
Setting Up A Code Editor
React 18
Diving Into The Created Project
How React Works & Understanding Components
More Component Work & Styling With CSS Classes
Building & Re-using Components
Passing Data With Props & Dynamic Content
Handling Events
Adding More Components
Introducing State
Working with “Event Props”
Use The Right React Router Version
Adding Routing
Adding Links & Navigation
Scoping Component Styles With CSS Modules
Outputting Lists Of Data & Components
Adding Even More Components
Creating “Wrapper” Components
Working With Forms
Getting User Input & Handling Form Submission
Preparing The App For Http Requests & Adding a Backend
Sending a POST Http Request
Navigating Programmatically
Getting Started with Fetching Data
Using the “useEffect” Hook
Introducing React Context
Updating State Based On Previous State
Using Context In Components
More Context Usage
Module Summary
Module Resources
Pages and Files Based Routing
Module Introduction
Our Starting Setup
What Is “File-based Routing”? And Why Is It Helpful?
Adding A First Page
Adding a Named / Static Route File
Working with Nested Paths & Routes
Adding Dynamic Paths & Routes
Extracting Dynamic Path Segment Data (Dynamic Routes)
Building Nested Dynamic Routes & Paths
Adding Catch-All Routes
Navigating with the “Link” Component
Navigating To Dynamic Routes
A Different Way Of Setting Link Hrefs
Navigating Programmaticall
Adding a Custom 404 Page
Module Summary
Module Resources
Working With Files Based Routing
Module Introduction
Planning The Project
Setting Up The Main Pages
Adding Dummy Data & Static Files
Adding Regular React Components
Adding More React Components & Connecting Components
Styling Components In Next.js Projects
Adding Buttons & Icons
Adding the “Event Detail” Page (Dynamic Route)
Adding a General Layout Wrapper Component
Working on the “All Events” Page
Adding a Filter Form for Filtering Events
Navigating to the “Filtered Events” Page ProgammaticallY
Extracting Data on the Catch-All Page
Final Steps
Module SummarY
Page Pre- Rendering Data Fetching
Navigating to the “Filtered Events” Page ProgammaticallY
Extracting Data on the Catch-All Page
Final Steps
Module SummarY
Page Pre- Rendering Data Fetching
The Problem With Traditional React Apps (and Data Fetching)
How NextJS Prepares & Pre-renders Pages
Introducing Static Generation with “getStaticProps”
NextJS Pre-renders By Default!
Adding “getStaticProps” To Pages
Running Server-side Code & Using the Filesystem
A Look Behind The Scenes
Utilizing Incremental Static Generation (ISR)
ISR: A Look Behind The Scenes
A Closer Look At “getStaticProps” & Configuration Options
Working With Dynamic Parameters
Introducing “getStaticPaths” For Dynamic Pages
Using “getStaticPaths”
“getStaticPaths” & Link Prefetching: Behind The Scenes
Working With Fallback Pages
Loading Paths Dynamically
Fallback Pages & “Not Found” Pages
Introducing “getServerSideProps” for Server-side Rendering (SSR)
Using “getServerSideProps” for Server-side Rendering
“getServerSideProps” and its Context
Dynamic Pages & “getServerSideProps”
“getServerSideProps”: Behind The Scenes
Introducing Client-Side Data Fetching (And When To Use It)
Implementing Client-Side Data Fetching
A Note About useSWR
Using the “useSWR” NextJS Hook
Combining Pre-Fetching With Client-Side Fetching
Module Summary
Module Resources
Optimizing Next js Apps
Module Summary
Analyzing the Need for “head” Metadata
Configuring the “head” Content
Adding Dynamic “head” Content
Reusing Logic Inside A Component
Working with the “_app.js” File (and Why)
Merging “head” Content
The “_document.js” File (And What It Does)
A Closer Look At Our Images
Optimizing Images with the “Next Image” Component & Feature
Taking A Look At The “Next Image” Documentation
Module Summary
Module Resources
Adding Backend Code With API Routes(Full Stack React)
Module Introduction
What are “API Routes”?
Writing Our First API Route
Preparing the Frontend Form
Parsing The Incoming Request & Executing Server-side Code
Sending Requests To API Routes
Using API Routes To Get Data
Using API Routes For Pre-Rendering Pages
Creating & Using Dynamic API Routes
Exploring Different Ways Of Structuring API Route Files
Module Summary
Module Resources
API Routes
Module Introduction
Starting Setup & A Challenge For You!
Adding a Newsletter Route
Adding Comments API Routes
Connecting the Frontend To the Comments API Routes
Setting Up A MongoDB Database
Running MongoDB Queries From Inside API Routes
Inserting Comments Into The Database
Getting Data From The Database
Improvement: Getting Comments For A Specific Event
Adding Error Handling
More Error Handling
A Final Note On MongoDB Connections
Module Summary
Module Resources
Working With APP-wide State
Module Introduction
Our Target State & Starting Project
Creating a New React Context
Adding Context State
Using Context Data In Components
Example: Triggering & Showing Notifications
Example: Removing Notifications (Automatically)
Challenge Solution
Module Summary
Module Resources
Requirements
Javascript Knowledge is required.
React.JS Knowledge is strongly recommended.
Who this course is for:
React developers who want to take the next step and build production-ready React apps
React developers who aim to build full stack React apps
Web developers in general, who want to work with one of the most popular and in-demand tech stacks
International Student Fee: 400 USD
Job Interview Preparation (Soft Skills Questions & Answers)
Tough Open-Ended Job Interview Questions
What to Wear for Best Job Interview Attire
Job Interview Question- What are You Passionate About?
How to Prepare for a Job Promotion Interview
Stay connected even when you’re apart
Join our WhatsApp Channel – Get discount offers
500+ Free Certification Exam Practice Question and Answers
Your FREE eLEARNING Courses (Click Here)
Internships, Freelance and Full-Time Work opportunities
Join Internships and Referral Program (click for details)
Work as Freelancer or Full-Time Employee (click for details)
Tough Open-Ended Job Interview Questions
What to Wear for Best Job Interview Attire
Job Interview Question- What are You Passionate About?
How to Prepare for a Job Promotion Interview
Stay connected even when you’re apart
Join our WhatsApp Channel – Get discount offers
500+ Free Certification Exam Practice Question and Answers
Your FREE eLEARNING Courses (Click Here)
Internships, Freelance and Full-Time Work opportunities
Join Internships and Referral Program (click for details)
Work as Freelancer or Full-Time Employee (click for details)
Related Courses
Blockchain Developer Course – Python Js React
Complete Front-End Web development (Html, CSS, JavaScript, jQuery, Angular JS)
Java Course – Servlets and JSPs Application Development
Python 10 Projects – Complete Python Programming
0 Reviews