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 authentication
Learn 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

Module IntroductioN
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

🎥 Your FREE eLEARNING Courses (Click Here)

International Student Fee: 400 USD

Flexible Class Options