Learn Next JS basics and build full stack apps with the Next JS framework!
Free tutorial
4.4
Created by Sangam Mukherjee
English
English [Auto]
What you’ll learn
- Learn all key Next JS features like pre-rendering, SSR, data fetching, file-based routing.
- Learn how to build client-side and full stack React JS apps with Next JS
- Implement Authentication Using Next Auth Google Provider
- Build real projects and apply what you learned
Requirements
- NO prior NextJS knowledge is required
- JavaScript ES6 knowledge is required
- React JS knowledge is required
Description
This course will take you from Next JS beginner to advanced level in no time!
We’ll start at the very basics, no Next JS knowledge is required at all, and we’ll then dive into all the core features that make up Next JS where all concepts will be applied step-by-step.
For this course, you’ll need basic React knowledge.
In detail, this course will cover:
- What is NextJS? And why would you use it?
- Creating NextJS projects from the ground up & understanding folder structure
- Working with file-based routing
- Adding dynamic routes
- Navigate between pages using Next/Link and Next/Router
- 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
- API routes and fetch data from API routes
- Adding authentication to Next JS apps using Next Auth Google provider
What should you know before taking this course?
You should know JavaScript basics and modern JavaScript features like arrow functions, restructuring, the spread operator
You should also know the basics of React.
Who this course is for:
- Programmers who want to learn the most in demand skill of a web developer
- Developers that want to be in the top of Next JS Developers
- React/Web developers who want to build static or hybrid (static + SSR) web apps with Next·js
Who this course is for:
- React/Web developers who want to enhance their web development skills with Next·js
Show less
Course content
5 sections • 22 lectures • 1h 39m total lengthCollapse all sections
Introduction3 lectures • 10min
- Introduction01:37
- What this course is Not00:55
- Create a Next JS App and understanding the folder structure07:22
File Based Routing6 lectures • 25min
- Create our first page and concept of index route05:36
- Concept of nested routes03:54
- Dynamic routes03:02
- Navigate between pages using Next/Link04:08
- Navigate to dynamic pages using Next/Link05:28
- Alternate way of navigating using Next/Router02:45
Data Fetching And Pre Rendering7 lectures • 37min
- Data fetching using GetStaticProps05:26
- Api call using getStaticProps04:00
- Dynamic routes and getStaticProps03:35
- GetStaticPaths and getStaticProps06:08
- Data fetching using getServerSideProps04:17
- Client side data fetching using useEffect hook07:19
- Client side data fetching and useSWR hook06:11
Api Routes2 lectures • 11min
- Create first api route03:33
- Fetch data from api routes and display in our ui07:55
Authentication Using Next Auth4 lectures • 16min
- Introduction to Next Auth and how authentication works in Next JS03:20
- Get Client ID and Client Secret key03:47
- Create nextauth route and sessionProvider01:20
- Implement Sign in and sign out functionality07:49
